HTML audio autoplay after user interaction

531 Views Asked by sofname At 23 September 2023 at 04:21

Chrome's autoplay policies changed in April of 2018. And I would like to use one of its policies: Autoplay with sound is allowed if the user has interacted with the domain (click, tap, etc.). Thus, I have a webpage

<a href="d2.php">dictation</a>

when the user click on the link on the above page, the second webpage, d2.php, is loaded. Its content is shown as following

<!DOCTYPE html>
<html>
<body>

<h1>The audio autoplay attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

The audio autoplay works on Chrome as expected. Also it can be verified that the autoplay works with Edge and Opera. However,

It does not work with Firefox 117.0.1 (64-bit), ie, audio is not autoplayed.
With a version of Safari I installed on my Ubuntu using WINE, it give me "Your browser does not support the audio element." message.

I would consider the Safari message is caused by my Ubuntu - WINE installation. However, could anybody help me with the firefox audio autoplay? I am open to any solution with HTML, PHP, and JaveScript. Thanks in advance.

PS: I have read many popular posts about "html audio autoplay" on the Internet.

Original Q&A

There are 1 best solutions below

Ken Lee On 23 September 2023 at 04:50

Under default settings - for Firefox (at least up to the latest version (as at today): Firefox 117.0.1), autoplaying audio is blocked and hence must be triggered if there is human interaction on the same page (e.g. click a button)

So, apart from the built-in "play" button in the audio element, you may use JS (say associated with the click of a button) to trigger the audio play, you may (as a demonstration):

Assign the audio an ID (e.g. audio1)
Trigger play(), such as document.getElementById('audio1').play();

So the code is:

<!DOCTYPE html>
<html>
<body>

<h1>The audio autoplay attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio controls autoplay id=audio1>
  <source src="https://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<input type=button onclick="javascript:play1();" value="Play">
</body>
</html>

<script>
function play1(){
document.getElementById('audio1').play();
}
</script>

You may try this sandbox to see the effect, please try the link by both chrome and firefox

Alternatively, you may change firefox default settings by :

click settings in Firefox,
click privacy & security,
scroll to "Autoplay" and click "Settigs"
choose choose "Allow Audio and Video"

If you do the above, then auto-playing an audio will be allowed when the page is loaded in firefox

HTML audio autoplay after user interaction

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in HTML

Related Questions in AUDIO

Related Questions in AUTOPLAY

Trending Questions

Popular # Hahtags

Popular Questions