Playing audio after the page loads in html

Question

I inserted the audio in html. But the audio gets started before the entire page loads. I want the audio to be played after the entire page gets loaded.

<audio src="bg.mp3" autoplay="autoplay" loop="loop"></audio>

Can anyone help me in this.

score 30 · Answer 1 · answered Jan 16 '13 at 11:29

30

You're going to need JavaScript for that. Remove the autoplay attribute:

<audio id="my_audio" src="bg.mp3" loop="loop"></audio>

and add a script like this:

window.onload = function() {
    document.getElementById("my_audio").play();
}

Or if you use jQuery:

$(document).ready(function() {
    $("#my_audio").get(0).play();
});

answered Jan 16 '13 at 11:29

Aioros

4,373
1
18
21

7

Got this error: `Uncaught (in promise) DOMException`. When I manually execute `play()` in the console, it works fine. – thdoan Sep 09 '19 at 05:30
my solution is adding 5 second delay, does anyone have better solution for `DOMException` error? – StefansArya Feb 02 '20 at 03:21
@thdoan have you fixed Dom exception issue ? – Knowledge Seeker Jul 02 '20 at 05:29
I don't think it's possible https://developers.google.com/web/updates/2017/09/autoplay-policy-changes – Chagai Friedlander Jan 02 '21 at 15:36

score 10 · Answer 2 · edited Nov 10 '15 at 15:23

10

Just Copy and Paste this Code in Body section of your HTML Code.

<audio autoplay>
  <source src="song.mp3" type="audio/mpeg">
</audio>

and make sure that your audio file should be in same folder.

edited Nov 10 '15 at 15:23

pistou

2,799
5
33
60

answered Oct 01 '13 at 06:46

Rajesh

109
1
3

what if the audio file is elsewhere? How to do it then? – Shefali Sep 25 '17 at 13:24
2

I'm getting this error: `DOMException: play() failed because the user didn't interact with the document first.` – Knowledge Seeker Jul 02 '20 at 05:23
@KnowledgeSeeker You are getting this cause the browser is blocking the auto play. You can find more in https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide#Autoplay_and_autoplay_blocking – akatran Oct 07 '20 at 15:26

score 3 · Answer 3 · edited May 23 '17 at 11:47

3

I think you must use JS (jQuery) function to do get document ready

$(document).ready(function()

Play an audio file using jQuery when a button is clicked

You have answer here (if I follow you right)

edited May 23 '17 at 11:47

Community

1
1

answered Jan 16 '13 at 11:21

Sebastian Koziara

133
3
9

Trinadh Koya · Answer 4 · 2016-12-09T10:56:36.867

0

For a repeated tone place the below code

        <audio src="./audio/preloader.mp3" autoplay="autoplay" loop="loop"></audio>

and for a single time, remove the loop. Then it should be like this

        <audio src="./audio/preloader.mp3" autoplay="autoplay"></audio>

edited Dec 09 '16 at 10:56

answered Dec 09 '16 at 05:02

Trinadh Koya

1,089
15
19

Playing audio after the page loads in html

4 Answers4

Linked