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

Hello 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

sound allow in chrome

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

25 responses to “How to Play Audio After The Page Loads in HTML With JavaScript”

  1. Deepak Patil says:

    I have try this but it is not work in google chrome

    • Saruque Ahamed Mollick says:

      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.

  2. Francis says:

    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

    • Saruque Ahamed Mollick says:

      I have checked the code right now, I am also using the same version of chrome.
      Please re-check your mp3 source file path.

  3. Saruque Ahamed Mollick says:

    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

  4. Pramod says:

    it is not working in android chrome browser ????

    • Saruque Ahamed Mollick says:

      Sorry to inform you but this is a technical problem of chrome browser. Once we will get another way we will update here.

  5. Amirul Asri says:

    First try on google chrome, its works.. After refreshing page again.. Audio is not playing..

  6. Dev says:

    It is not working in Firefox also.

    • Saruque Ahamed Mollick says:

      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.

  7. Cikal says:

    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

  8. Cikal says:

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

  9. Omar says:

    it’s working in firefox but not in chrome !!

  10. Mayuresh Deshmukh says:

    Navigate to Google Chrome Settings , Search permissions and give audio permission ,

    You can also add your page link in allow section

  11. Bob Gross says:

    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?

  12. Bob Gross says:

    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.

  13. varun says:

    Thanks, brother your code is 100% working.

  14. Natig says:

    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.

    • Saruque Ahamed Mollick says:

      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.

  15. Shruti says:

    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

Leave a Reply

Your email address will not be published. Required fields are marked *