How to play mp3 after page load?-CodePudding

After creating my demo github pages. I put following code into the index.html file :

 <html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>My TITLE</title>
       <link rel="icon" type="image/x-icon" href="images/icon.ico">
    </head>
    
    <body>
       
       <iframe src="2-seconds-silence.mp3" allow="autoplay" id="audio" style="display: none" hidden=""></iframe>
       <audio id="player" autoplay loop>
          <source src="hello.mp3" type="audio/mp3">
       </audio>
    </body>
 </html>

However after loading the page by chrome, it didn't run. Is there any way to fix this?

CodePudding user response：

You can try it like that. Attribute list: https://www.w3schools.com/jsref/dom_obj_audio.asp

<html>
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>My TITLE</title>
       <link rel="icon" type="image/x-icon" href="images/icon.ico">
    </head>
    
    <body>
       
       <iframe src="2-seconds-silence.mp3" allow="autoplay" id="audio" style="display: none" hidden=""></iframe>

      <script type="text/javascript">
         document.addEventListener('DOMContentLoaded', function() {
            var audioTag = document.createElement("AUDIO");

            audioTag.setAttribute("src","hello.mp3");

            document.body.appendChild(audioTag);
         }, false);
      </script>
    </body>
 </html>

CodePudding user response：

Check this:

<audio src="mysong.mp3" id="my_audio" loop="loop"></audio>
<script type="text/javascript">
window.onload=function(){
  document.getElementById("my_audio").play();
}

CodePudding user response：

First grab the audio element using Javascript. for eg : const audio = document.queryselector("#audioId") then apply funtion window.addEventListener("load",() => {audio.play()})

CodePudding user response：

correct autoplay attribute. Instead of 'autoplay=" "' just leave 'autoplay', same for 'loop'.

Cheers