CODEWITHSUNDEEP
javascriptjqueryhtmlaudio
beer_baron
beer_baron

Reputation: 81

autoplay html audio created with javascript

I did this little script that can control the playing of an audio track on a webpage.

var source = "audio/burger.mp3"
var audio = document.createElement("audio");
audio.load()
audio.addEventListener("load", function() {
  audio.play();
}, true);
audio.src = source;



$("#playBtn").click(function() {
  audio.play();
});

$("#pauseBtn").click(function() {
  audio.pause();
});

$("#stopBtn").click(function() {
  audio.pause();
  audio.currentTime = 0;
});
<ul>
  <li>
    <a><i class="fa fa-play" aria-hidden="true" id="playBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-pause" aria-hidden="true" id="pauseBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-stop" aria-hidden="true" id="stopBtn"></i></a>
  </li>
</ul>

I would like know if there is a way for play the file on the page load. I know this way, It's something really 90s but I have to test something on the page.

Upvotes: 3

Views: 51207

Answers (4)

Jess Uni
Jess Uni

Reputation: 37

Agreed with Patrick Roberts' suggestion on using new Audio instead of document.createElement('audio)`. However, for audio to autoplay on page load, you don't need to add any event listeners. Setting:

  1. a valid media source
  2. audio.autoplay = true

will make the audio start playing as soon as it is loaded. So the JS part could be simplified as:

var source = "audio/burger.mp3"
var audio = new Audio();
// no event listener needed here
audio.src = source;
audio.autoplay = true;

$("#playBtn").click(function() {
  audio.play();
});

$("#pauseBtn").click(function() {
  audio.pause();
});

$("#stopBtn").click(function() {
  audio.pause();
  audio.currentTime = 0;
});

However, this thread is a bit dated, and policy has changed since. Staring in 2017, safari 11+ on iOS and MacOS as well as chrome 64+ no longer support audio/video autoplay. See: autoplay policy changes for macOS and autoplay policy changes.

Safari implemented a blocker on media that autoplay with sound, so autoplay is disabled by default. Users have to manually enable this feature. They recommend developers add a snippet to detect this behavior:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

Upvotes: 0

Patrick Roberts
Patrick Roberts

Reputation: 51967

Use the autoplay attribute on your audio element. Also, try to prefer using the Audio() constructor when generating an Audio element in JavaScript. Lastly, don't call audio.load() here, setting the src value in this case triggers that automatically.

var source = "https://html5music.herokuapp.com/media/no_words.webm";
var audio = new Audio(); // use the constructor in JavaScript, just easier that way
audio.addEventListener("load", function() {
  audio.play();
}, true);
audio.src = source;
audio.autoplay = true; // add this

$("#playBtn").click(function() {
  audio.play();
});

$("#pauseBtn").click(function() {
  audio.pause();
});

$("#stopBtn").click(function() {
  audio.pause();
  audio.currentTime = 0;
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a><i class="fa fa-play" aria-hidden="true" id="playBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-pause" aria-hidden="true" id="pauseBtn"></i></a>
  </li>
  <li>
    <a><i class="fa fa-stop" aria-hidden="true" id="stopBtn"></i></a>
  </li>
</ul>

Upvotes: 3

radiantstatic
radiantstatic

Reputation: 342

Add *.autoplay = true; before you load.

 var source = "audio/burger.mp3"
 var audio = document.createElement("audio");
 //
 audio.autoplay = true;
 //
 audio.load()
 audio.addEventListener("load", function() { 
     audio.play(); 
 }, true);
 audio.src = source;

Upvotes: 6

Hector Barbossa
Hector Barbossa

Reputation: 5528

You can use the autoplay attribute on the audio tag.

Upvotes: 1

Related Questions