Menu
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)
842
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.
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.
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))
This answer describes a way to "trick" Chrome into always autoplaying, though I have not personally tested this.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
