Audio tag in blogspot, Audio tag half working in blogspot Options

[Retrotechy]

Hi all.

First post on a great forum. Unfortunately it’s a shout out for help please.

I have a blogger blog and have tried to put in an auto play audio tag into the main forum landing page.

As the landing page isn’t a post, I have put the audio tag html in the theme html in the body.

When you navigate to the page from the website address or a browser, the audio doesn’t play, but if you open a post then use the back button to go back to the landing page, the audio then plays fine.

Can anyone advise why this is happening?

Initially the audio had no visual but I added the controls attribute and it looks like the auto play attribute isn’t initially kicking in, but does kick in when you hit the back button back to Landing page.

[Christian J]

Hi and welcome!

Hard to say without seeing the page. Could it be that the audio simply haven't had time to load?

In theory a javascript on the page may only start the player if there's a Referer header (or even a cookie set on the other pages), but that sounds farfetched (also I can't remember if using the Back button sends a Referer header).

Many users may also disable autoplay in their own browser settings, but then it should never work of course.

[Retrotechy]

Hi.

Thanks for the reply!

The website is a blogspot blog and my audio playing code inserted into the body of the page is this:

<b:if cond='data:blog.url == &quot;https://mr-flibbles-lair.blogspot.com/&quot;'>

<audio autoplay='1' controls='1' id='myaudio' loop='1'>
<source src='https://andy-lawson.uk/Mr Flibbles Lair/Red Dwarf - Series 7/Music Cues/8 Rimmer Munchkin Song.mp3' type='audio/mpg'/>
</audio>

</b:if>

I made the control panel temporarily visible so that I could see that the link to the audio file was being picked up, and that the <b:if> tag was activating correctly for that URL only.

Everything looks good so I am assuming that on first landing that the autoplay is blocked, but still cant figure why going back to the page allows it to play.

[pandy]

I don't know blogger lingo, but I doubt the quotes here should be escaped.

CODE

<b:if cond='data:blog.url == &quot;https://mr-flibbles-lair.blogspot.com/&quot;'>

Also, spaces aren't allowed in URLs. They need to be URL encoded, escaped with %20. Like this.

CODE

Red%20Dwarf%20-%20Series%207/Music%20Cues/8%20Rimmer%20Munchkin%20Song.mp3

It's much easier not to use spaces in file names. Use underscores or hyphens as word separators. But I don't think this is your problem. Modern browsers tend to mend that mistake.

Instead I think this is the problem.
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
https://www.w3schools.com/tags/att_audio_autoplay.asp

And I think that probably goes for FF too. You had commented out the audio on your page. I removed the comments. Didn't auto play. Neither in FF nor Edge. But it starts to play as soon as the volume control is touched. I guess that is what "muted autoplay" means. And when I loaded the page in an older gecko browser it did autoplay. So that's my guess, browsers don't allow it anymore.

[Christian J]

I don't know blogger lingo

Me neither. But it looks like the following is an IF condition that checks the URL of the blog:

CODE

<b:if cond='data:blog.url == &quot;https://mr-flibbles-lair.blogspot.com/&quot;'>

<audio autoplay='1' controls='1' id='myaudio' loop='1'>
<source src='https://andy-lawson.uk/Mr Flibbles Lair/Red Dwarf - Series 7/Music Cues/8 Rimmer Munchkin Song.mp3' type='audio/mpg'/>
</audio>

</b:if>

--but since the quotes are incorrect the URL becomes messed up, and the IF conditions returns false (and the AUDIO element is not rendered by Blogspot?). But that still doesn't explain why it works when using the Back button.

Instead I think this is the problem.
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
https://www.w3schools.com/tags/att_audio_autoplay.asp

And I think that probably goes for FF too.

There are setting for this in my browsers, but I can't remember what the defaults are.

You had commented out the audio on your page. I removed the comments.

You mean the IF condition above?

[coothead]

Hi there Retrotechy,

further to testing your code with @pandy's suggestion...

CODE

src="https://andy-lawson.uk/Mr%20Flibbles%20Lair/Red Dwarf%20-%20Series%207/Music%20Cues/8%20Rimmer%20Munchkin%20Song.mp3"

...I found that in all my test browsers the audio still failed to play.

The problem turned out to be caused by this...

CODE

type="audio/mpg"

It required...

CODE

type="audio/mpeg"

...to work

CODE

<audio controls autoplay loop muted>
<source
   src="https://andy-lawson.uk/Mr%20Flibbles%20Lair/Red Dwarf%20-%20Series%207/Music%20Cues/8%20Rimmer%20Munchkin%20Song.mp3"
   type="audio/mpeg">
</audio>

coothead

[pandy]

Online it was audio/mp3. I never checked if that's kosher, but I did change to audio/mpeg and it still didn't work for me.

[coothead]

. but I did change to audio/mpeg and it still didn't work for me.

My tests were with windows 10 and Linux Mint 20.3

In Firefox, using the code which I posted, the audio auto-started and looped but required manual volume
In Chrome, the audio required manual controls.

Your...

CODE

type="audio/mp3"

...also worked OK for me.

coothead

[coothead]

Hi there pandy,

here is an interesting article with regard to mp3/mpeg usage...

The Difference Between MPEG and MP3

coothead

[Retrotechy]

Hi,

Many thanks for all of the responses and info.

I have removed / adjusted spaces in the mp3 URL and also corrected the type to mpeg but still no joy.

I am guessing that the autoplay prohibited unless muted function is the reason it wont play.

Many thanks for all of the comments and advice.

[pandy]

here is an interesting article with regard to mp3/mpeg usage...

The Difference Between MPEG and MP3

OK. But it doesn't mention content-type. But I looked it up and audio/mp3 doesn't seem to exist, so audio/mpeg as you said. But neither worked for me. I'm on Windows, so I guess browsers differ between OS.

[coothead]

But neither worked for me. I'm on Windows,
so I guess browsers differ between OS.

Are you certain that the code that you are using for your test(s) is not faulty?

Check out my test code here...

munchkin-song.zip file

coothead