Autoplay audio jQuery

How to Play Audio After The Page Loads in HTML With JavaScript

By Saruque Ahamed Mollick

Hello developer, today I am going to show you how toplay 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 dont wanna play the audio file before the webpage getting loaded.

Nội dung chính Show

How to Play Audio After The Page Loads in HTML With JavaScript
Play Audio After The Page Loads in JavaScript
32 responses to How to Play Audio After The Page Loads in HTML With JavaScript
Leave a Reply Cancel reply

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

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.

32 responses to How to Play Audio After The Page Loads in HTML With JavaScript

Deepak Patil says:
December 20, 2018 at 3:17 pm
I have try this but it is not work in google chrome
Reply
- Saruque Ahamed Mollick says:
  December 22, 2018 at 11:18 pm
  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.
  Reply
Francis says:
April 9, 2019 at 8:25 pm
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
Reply
- Saruque Ahamed Mollick says:
  April 9, 2019 at 10:02 pm
  I have checked the code right now, I am also using the same version of chrome.
  Please re-check your mp3 source file path.
  Reply
Saruque Ahamed Mollick says:
April 9, 2019 at 10:04 pm
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
Reply
Pramod says:
April 13, 2019 at 10:44 am
it is not working in android chrome browser ????
Reply
- Saruque Ahamed Mollick says:
  April 13, 2019 at 7:40 pm
  Sorry to inform you but this is a technical problem of chrome browser. Once we will get another way we will update here.
  Reply
Amirul Asri says:
May 27, 2019 at 5:09 am
First try on google chrome, its works.. After refreshing page again.. Audio is not playing..
Reply
- Saruque Ahamed Mollick says:
  May 27, 2019 at 10:44 am
  I am facing the same issue. I think its a bug of Chrome
  Reply
Dev says:
June 14, 2019 at 9:19 am
It is not working in Firefox also.
Reply
- Saruque Ahamed Mollick says:
  June 14, 2019 at 10:20 am
  Are you getting any kind of error? Because its working fine on my firefox. Dont know if they made any major updates or not.
  Reply
Cikal says:
August 7, 2019 at 5:23 pm
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
Reply
Cikal says:
August 7, 2019 at 5:26 pm
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..
Reply
Omar says:
September 24, 2019 at 5:39 pm
its working in firefox but not in chrome !!
Reply
Mayuresh Deshmukh says:
November 18, 2019 at 9:21 am
Navigate to Google Chrome Settings , Search permissions and give audio permission ,
You can also add your page link in allow section
Reply
Bob Gross says:
December 6, 2019 at 10:04 am
I dont 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?
Reply
- Saruque Ahamed Mollick says:
  December 6, 2019 at 10:24 am
  Kindly check sound setting under site settings.
  Reply
Bob Gross says:
December 6, 2019 at 10:54 am
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.
Reply
- Saruque Ahamed Mollick says:
  December 6, 2019 at 10:58 am
  We are glad that it is working fine now.
  Reply
varun says:
March 7, 2020 at 2:58 pm
Thanks, brother your code is 100% working.
Reply
Natig says:
April 26, 2020 at 8:25 am
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.
Reply
- Saruque Ahamed Mollick says:
  April 26, 2020 at 12:53 pm
  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.
  Reply
Shruti says:
April 27, 2020 at 11:36 am
Its not working for me i getting this error Uncaught (in promise) DOMException: play() failed because the user didnt interact with the document first.
can anyone help me for the same
Reply
- Saruque Ahamed Mollick says:
  April 27, 2020 at 3:10 pm
  It is because of the browser update. It will work fine if you use this: muted=muted.
  Reply
  - shruti says:
    April 27, 2020 at 3:29 pm
    I am not able to do it in chrome, but I can able to do it in Mozilla.
    Reply
nilesh says:
September 24, 2020 at 12:11 pm
First try on google chrome, its works.. After refreshing page again.. Audio is not playing.
Reply
James says:
February 1, 2021 at 7:54 am
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 didnt interact with the document first.
Kindly help me to fix this.
Reply
Dragnev says:
March 29, 2021 at 4:12 pm
Thanks a lot! It works but how to make it play just 1 time and not repeat?
Reply
John says:
April 15, 2021 at 4:19 am
it didnt work for me, tried already but nothing happens
Reply
Ankita Daw says:
April 21, 2021 at 2:37 pm
It is not working. It is showing nothing.
Can you please help me to fix this?
Reply
Jayshree Mohapatra says:
July 30, 2021 at 10:56 am
My audio not playing when we load a website . Please reply me
Reply
Muhammad Tariq Khan says:
September 23, 2021 at 2:35 pm
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.
Reply