How to Play Audio After The Page Loads in HTML With JavaScript
By Saruque Ahamed MollickHello developer, today I am going to show you how to play audio after page load in JavaScript. In many cases, it is seen that we need to play the audio file only after the webpage gets loaded. Because most of the times, we don’t wanna play the audio file before the webpage getting loaded.
Update: In the recent updates of Chrome, you might face difficulties for autoplay as you will need to use
muted="muted".You may get error like this: Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.
Google chrome is very much strict to defense the noise autoplay on a webpage.
Bottom Sticky Music Player Source Code in JavaScript and CSS
You should also learn How to Play Audio After Few Seconds or Delay in JavaScript
Play this video tutorial to learn more
Play Audio After The Page Loads in JavaScript
Note that: For the recent updates of chrome and some other browsers you should try this:
Navigate to Google Chrome Settings, Search permissions and give audio permission,
You can also add your page link in allow section
(Mayuresh Deshmukh commented on this post)
So before showing you that directly I would like to show you how audio file is played in HTML.
<!DOCTYPE html> <html> <head> <title>My Audio</title> </head> <body> <audio src="mysong.mp3" id="my_audio" loop="loop" autoplay="autoplay"></audio> </body> </html>
So we need to remove the autoplay attribute first. Then we gonna add our JavaScript function to play the audio on page load.
<script type="text/javascript">
window.onload=function(){
document.getElementById("my_audio").play();
}
</script>
So our full code will look like this
<!DOCTYPE html>
<html>
<head>
<title>My Audio</title>
</head>
<body>
<audio src="mysong.mp3" id="my_audio" loop="loop"></audio>
<script type="text/javascript">
window.onload=function(){
document.getElementById("my_audio").play();
}
</script>
</body>
</html>window.onload
will run this function after page load.
document.getElementById("my_audio").play();Here document.getElementById() method is responsible for getting the audio file by its id.
Later, play() method is used to play the audio file.
Also Read,
How To Get Selected Option from HTML Form Dropdown in jQuery
HTML5 Video/Audio player Volume Control With Key in JavaScript
Special Note: The audio tag is used in the body tag not in the head tag, because if you insert it into the head tag the browser will automatically load the media data in the body section. You can use your browser’s inspect option to see what happens if you put the audio tag in the head tag.
So it’s better to put the audio tag in the body tag.
Using this JavaScript function you can easily play the audio file after page loading.
Feel free to write in the comment section and watch the video embedded on this page to learn how to set the time delay to play your audio file on the webpage.
I have try this but it is not work in google chrome
Can you show me your full code so that I can resolve your issue?
Because this code is tested on chrome and it is working fine till now to play audio after page load using JavaScript.
Hi,
I also have the same issue. It does not work on my chrome version 73.0.3683.86.
I copied the exact code and only replace the audio file name which is in the same location of this html file. Wondering why….
Thanks for your help
I have checked the code right now, I am also using the same version of chrome.
Please re-check your mp3 source file path.
But the page will play the audio for the first time only, If you reload it will not work. I guess this is an error with google chrome only. We hope the new update will fix the issue
it is not working in android chrome browser ????
Sorry to inform you but this is a technical problem of chrome browser. Once we will get another way we will update here.
First try on google chrome, its works.. After refreshing page again.. Audio is not playing..
I am facing the same issue. I think it’s a bug of Chrome
It is not working in Firefox also.
Are you getting any kind of error? Because it’s working fine on my firefox. Don’t know if they made any major updates or not.
No need to Override call >> elem.play()
just put the audio element like this, and everything works well (Tested by me) on Chrome, FireFox, IE-11
No need to Override call: elem.play()
just put the audio element like this, and everything works well (Tested by me) on Chrome, FireFox, IE-11
<audio control loop autoplay src=”home.mp3″></audio>this site need code embedded for comment, at least image for share capture with other visitor.. recommend Disqus for this section.. 🙂
it’s working in firefox but not in chrome !!
Navigate to Google Chrome Settings , Search permissions and give audio permission ,
You can also add your page link in allow section
I don’t see a Audio setting for Google Chrome Version 78.0.3904.108 (Official Build) (64-bit). The code only works in Firefox, IE and MS Edge. Any suggestions?
Kindly check sound setting under site settings.
OK, I fixed the Audio issue in Google Chrome. The “Speakers / HP” in HP BeatsAudio was set o 0%. The code now works in browsers, Google Chrome, Firefox, IE and MS Edge.
We are glad that it is working fine now.
Thanks, brother your code is 100% working.
Hi Ahmed! Your code works very well. Can I write code to play sound at a specific time? For example: (April 27, 2020 15:20) play only once. This is for azan.
Just detect the current time using JavaScript and compare it with April 27, 2020 15:20. If they are the same you can run the function to play the audio.
It’s not working for me i getting this error “Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.”
can anyone help me for the same
It is because of the browser update. It will work fine if you use this: muted=”muted”.
I am not able to do it in chrome, but I can able to do it in Mozilla.
First try on google chrome, its works.. After refreshing page again.. Audio is not playing.
I tried your full code.
But result showing nothing , and I got this error in console.
“Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first. ”
Kindly help me to fix this.
Thanks a lot! It works but how to make it play just 1 time and not repeat?
it didn’t work for me, tried already but nothing happens
It is not working. It is showing nothing.
Can you please help me to fix this?
My audio not playing when we load a website . Please reply me
According to new web policy of google chrome and mozilla firefox the AudioContext is suspended until user interaction. So this solution is no more valid.
The code is not working. Can you please help me?
I am exactly using the above code. and my chrome version is Version 102.0.5005.115.
Hope your response.