Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Web Site Functionality _ Audio tag in blogspot

Posted by: Retrotechy Jul 21 2023, 04:34 PM

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.

Posted by: Christian J Jul 22 2023, 04:47 AM

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). unsure.gif

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

Posted by: Retrotechy Jul 24 2023, 08:30 AM

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.

Posted by: pandy Jul 24 2023, 12:36 PM

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


QUOTE
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.

Posted by: Christian J Jul 24 2023, 02:53 PM

QUOTE(pandy @ Jul 24 2023, 07:36 PM) *

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. unsure.gif



QUOTE
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.

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

You mean the IF condition above?

Posted by: coothead Jul 24 2023, 03:24 PM

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

Posted by: pandy Jul 24 2023, 04:38 PM

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. wacko.gif

Posted by: coothead Jul 24 2023, 06:51 PM

QUOTE(pandy @ Jul 24 2023, 10:38 PM) *

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



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. IPB Image


coothead

Posted by: coothead Jul 24 2023, 07:09 PM

Hi there pandy,


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

http://www.differencebetween.net/technology/protocols-formats/difference-between-mpeg-and-mp3/


coothead

Posted by: Retrotechy Jul 25 2023, 06:04 AM

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.

Posted by: pandy Jul 25 2023, 09:12 AM

QUOTE(coothead @ Jul 25 2023, 02:09 AM) *

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

http://www.differencebetween.net/technology/protocols-formats/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.

Posted by: coothead Jul 25 2023, 01:04 PM

QUOTE(pandy @ Jul 25 2023, 03:12 PM) *


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...

https://www.mediafire.com/file/s18rk721vuq242n/munchkin-song.zip/file




coothead



Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)