Audio embed doesn't autoplay on chrome unless

[tarekr]

Hi,

I am embedding this code to autoplay sound in my website “https://tarekrabaa.com/en/”
<audio id="audio" style="display: none;" src="music-for-my-website.mp3" autoplay="autoplay" loop="loop" controls="controls" onloadeddata="setHalfVolume()"></audio>

This is working on opera browser normally but on Chrome, it doesn’t autoplay unless i click on the URL inside the SF menu “https”//tarekrabaa.com" than click back on the english website again.

The same issue occurs on mobile phone.

I tried many ways and cannot autoplay.

Do you have a solution for this?

rgds

[friech]

Hi @tarekr,

Thank you for writing in, is your English and Arabic are two different pages? I see on the English page source the music-for-my-website.mp3. But not on the Arabic page source.

Please make sure you add your mp3 on both English and Arabic pages.

Cheers!

[tarekr]

Hi,

I am using music only on the English Website. The arabic website is without background music.
The problem i am experiencing is on the English website https://tarekrabaa.com/en/

rgds

[christian]

Hey @tarekr,

I checked your site: https://tarekrabaa.com/en/ in Chrome and the audio auto-plays without me doing anything.

There might be a browser extension on your end that’s causing the issue. Either way though, there’s nothing to fix on our end because it works when I checked. You’re also using a custom code.

Please try using the Audio element. Create a Global Block and add an Audio element and use the Global Block’s shortcode to output the audio.

Thanks.

[tarekr]

I tried all options.
The audio player doesn’t auto run on CHROME neither on desktop nor on Androild phone.

check this: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

The same issue on Opera for Android. It just auto play when i click the home menu.

Even on Opera browser, if i refresh the page the audio stop autoplaying! while checking the console, i see this error:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

What is weird, if the audio doesn’t autoplay, i click on the Home in the SF menu, then it will auto play.

Same issue on Opera and Chrome.
On firefox and Microsoft Edge the audio auto run normally.

[friech]

Hi @tarekr,

It seems you already resolve the issue, your audio is autoplaying now from the get-go, even without navigating from the SF menu. And I don’t see that script error on your site now.

Yes, you need to take a note on this https://developers.google.com/web/updates/2017/09/autoplay-policy-changes Because of that, the default settings of a browser is to mute an autoplaying media.

@tarekr

What is weird, if the audio doesn’t autoplay, i click on the Home in the SF menu, then it will auto play.

That is not weird, that is actually written on the autoplay policy.

• Autoplay with sound is allowed if:
  – User has interacted with the domain (click, tap, etc.).
  – On desktop, the user’s Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
  – The user has added the site to their home screen on mobile or installed the PWA on desktop.

Please keep in mind that you do not really have control over your viewer’s browser settings, some of your viewers won’t hear your audio because of the autoplay-policy.

Thanks,

[tarekr]

Interesting. and helpful info

[friech]

We are delighted to assist you with this.

Cheers!