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 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.

• javascript
• jquery
• html
• audio

• 2 If I understood you correctly, you should use "autoplay" attribute with your audio tag. w3schools.com/tags/att_audio_autoplay.asp – Artem Arkhipov Commented Jul 11, 2016 at 21:43

4 Answers 4

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;

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>

You can use the autoplay attribute on the audio tag.

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
    });
}