CODEWITHSUNDEEP
javascriptaudioautoplay
sofname
sofname

Reputation: 441

HTML audio autoplay after user interaction

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,

  1. It does not work with Firefox 117.0.1 (64-bit), ie, audio is not autoplayed.
  2. 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.

Upvotes: 1

Views: 1175

Answers (1)

Ken Lee
Ken Lee

Reputation: 8073

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):

  1. Assign the audio an ID (e.g. audio1)
  2. 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 :

  1. click settings in Firefox,
  2. click privacy & security,
  3. scroll to "Autoplay" and click "Settigs"
  4. 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

Upvotes: 1

Related Questions