preface

To prepare message Notification on the Web side, use the Notification to create pop-up boxes for system messages, and find that the sound is automatically played. Just out of curiosity, check out the W3C autoplay example… See the Github link for more information about demo

About audio autoplay

  // This code can be run in the Source Snippets, not in the console. The console can play directly because it involves mouse backdown, mouse events, and execution.
  let audio = document.createElement('audio');
  audio.autoplay="autoplay";
  audio.meted = false;
  audio.src = 'http://127.0.0.1:3003/notice_test.mp3';
  audio.play(); 

  // Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
Copy the code

Google chrome has disabled the automatic playback of sound in the higher version of the browser. You must manually trigger events, mouse events or keyboard events, etc. There are also console, directly execute the above code will directly report an error

When viewing the Audio Autoplay property on the W3C website, click on the link to open the page toplay automatically. But when the page is refreshed, it does not play again. There is also a rule that javascript code can play directly as soon as the sound is played for the first time. Out of curiosity, the W3C code implementation was simulated as follows

# Start service involving form submission
npx http-server . -p $port
Copy the code
  • index.html
  <form id="codeForm" autocomplete="off" style="margin:0px; display:none;" action="/b.html" method="get" accept-charset="utf-8" target="iframeResult">
      <input type="hidden" name="code" id="code" value=""/>
  </form>
  <div id="iframecontainer"> 
    <div id="iframe">
         <div id="iframewrapper">
        <iframe frameborder="0" id="iframeResult" name="iframeResult"></iframe>
      </div>
    </div>
  </div>
  <script>
    submitTryit();

    function submitTryit() {
        if (window.editor) {window.editor.save(); }let text = document.getElementById("textareaCode").value;

        let ifr = document.createElement("iframe");
        ifr.setAttribute("frameborder"."0");
        ifr.setAttribute("id"."iframeResult");
        ifr.setAttribute("name"."iframeResult");  
        document.getElementById("iframewrapper").innerHTML = "";
        document.getElementById("iframewrapper").appendChild(ifr);

        let  t = text;
        t=t.replace(/=/gi."w3equalsign");
        t=t.replace(/\+/gi."w3plussign");

        //document.write(t);
        var pos=t.search(/script/i);

        while (pos>0) {
          t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3.3) + "tag" + t.substr(pos+6);
          pos=t.search(/script/i);
        }

        document.getElementById("code").value=t;
        document.getElementById("codeForm").action = "/b.html";
        document.getElementById('codeForm').method = "get";
        document.getElementById('codeForm').acceptCharset = "utf-8";
        document.getElementById('codeForm').target = "iframeResult";
        document.getElementById("codeForm").submit();
    }
  </script>
Copy the code
  • b.html
    <audio controls="controls" autoplay="autoplay">
        <source src="/1702.mp3" type="audio/mpeg"/>
    </audio>
Copy the code

In the W3C example, when a link opens a new TAB, the mouse event is passed to the new TAB, so the form is automatically submitted and iframe is embedded in B.HTML to complete the auto-play. The page does not play automatically when refreshed, and an error is reported if javascript executes auto-.play () directly. As for the audio playback problem, I have not found a better method for the moment by Google. It is said that I can hack, but I do not know the specific implementation scheme out of my knowledge. If you have a bull, you can give an example.

Making a link