5

I tried adding the autoplay functionality to the player like in the w3school example: https://www.w3schools.com/tags/att_audio_autoplay.asp

What I did was copy-paste the code from the example in an index file in this server, remove the ogg player, add an mp3 file in the same location as the index file and make sure the name of the mp3 file matches the name in the source tag.

For transparency's sake, this is the code:

 let x = document.getElementById("myAudio");
        var test_autoplay = document.getElementById("myAudio").autoplay;
        console.log('autoplaying:    ', test_autoplay);
<!DOCTYPE html>
    <html>
    <body>
    
    <h1>The audio autoplay attribute</h1>
    
    <p>Click on the play button to play a sound:</p>
    
    <audio id="myAudio" controls autoplay>
      <source src="elrio.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    
    </body>

    </html>

It should be a pretty straightforward thing. However, in mobile devices it doesn't work. I have to click the button to make the audio play. In desktop devices, sometimes it plays as soon as the page loads and sometimes it doesn't.

I checked for console errors, there are none. The network tab doesn't show any error either.

I tried printing the autoplay property with javascript like this:

<script>
    let x = document.getElementById("myAudio");
    var test_autoplay = document.getElementById("myAudio").autoplay;
    console.log('autoplaying:    ', test_autoplay);
</script>

Every time the page was loaded, the value of test_autoplay was true, even when it wasn't actually playing.

I had read the link in Lawrence Cherone's comment and understand why the autoplay property is discouraged. However, there are cases (such as music playing sites) where I think autoplay should be allowed. Besides, I would understand if autoplay simply wouldn't work. What I am trying to figure out is how in this simple page I copied from w3schools, sometimes it works and sometimes it does not.

OS version: Windows 10. Browser : Google Chrome, Version 80.0.3987.132 (Official Build) (64-bit)

Ace
  • 1,398
  • 13
  • 24
Evi
  • 51
  • 3
  • 1
    See ways to work around autoplay restrictions here https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide just placing `autoplay` prop should not be relied on to work – Lawrence Cherone Mar 12 '20 at 22:10
  • @Lawrence Cherone I did read the article. It says there that for autoplay to work, at least one of the following requirements should be fulfilled (muted audio, user interaction, user behavior etc). However, in my case the autoplay is not entirely working or not working. In a timeframe of, let's say, two minutes, sometimes it works and other times it does not. Is this how it is supposed to work? – Evi Mar 13 '20 at 15:28
  • Hi Evi, could you add a table of OS/browser (including version if possible), where it worked and where it didn't? Could help to reproduce it locally. – Ryuno-Ki Mar 15 '20 at 16:40
  • Oh, and how do you assess, that the audio isn't playing? (I would assume, that you look at the browser's audio player UI). Is it loaded via network tab? (Hard to tell via mobile perhaps - some of them could be debugged via a laptop, though). – Ryuno-Ki Mar 15 '20 at 16:41
  • @Ryuno-Ki Maybe I didn't clarify this, but I am saying that reloading the page from the same machine, same browser, without modification in the code, gives random results. It may not play for several reloads, then it suddenly autoplays. I do not know why that happens because I expected at least a consistent behavior. I can tell the audio isn't playing in desktops (let's forget the mobile devices for a sec) because I cannot hear any audio and because the play symbol in the tab isn't showing. – Evi Mar 15 '20 at 16:43
  • I get that. I'd like to check, whether it is a special OS/browser combination, though. Perhaps it works for others and only in certain combinations it doesn't. For example, https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio_autoplay will only autoplay on first load (Sabayon Linux / Firefox) for me. – Ryuno-Ki Mar 15 '20 at 16:51
  • @Ryuno-Ki OS: windows 10. Browser: Google Chrome, Version 80.0.3987.132 (Official Build) (64-bit). The w3schools example above plays every time I click run, from the same browser (maybe this is considered as user interaction). – Evi Mar 15 '20 at 16:56
  • Autoplay audio is the cancer of the internet – Adrian Brand Mar 17 '20 at 04:27

1 Answers1

3

This is a tricky one. I'm able to reproduce what you're seeing, but I think I've figured it out.

If you allow the site to play music for more than 7 seconds, it will allow autoplay the following visit. If you stop playback, close or reload the tab before 7 seconds is up, the site loses the ability to autoplay until you play audio for more than 7 seconds again.

Chrome autoplay

This behavior is specific to Chrome (which you mentioned that you are using). Chrome keeps a tally of what sites the user has allowed to play audio. It stores this in the Media Engagement Index. You can see Chrome's tally at by typing chrome://media-engagement/ into the address bar. If you've allowed your site to play audio for more than 7 seconds, you should see it listed there. More information on Chrome's behavior with regards to autoplay is available here. The Media Engagement Index is described here, although that some of the document is no longer current due to changes in Chrome.

Javascript checking of autoplay permission

Additionally, your javascript code snippet, reproduced below, appears to be trying to check if autoplay is enabled. 

document.getElementById("myAudio").autoplay

In fact this only checks to see if the autoplay property is set on the HTML tag, which it always will be.

To test if autoplay is allowed, use this snippet: 

document
  .getElementById('myAudio')
  .play()
  .then(() => console.log('autoplay success!'))
  .catch(e => console.log(e))

Related info

This answer describes a way to "trick" Chrome into always autoplaying, though I have not personally tested this.

Codebling
  • 10,764
  • 2
  • 38
  • 66