不按鼠标或 Javascript 中的任何键，音频无法播放

Question

I am trying to play an audio which is a smoke detecting sound whenever I sense smoke. But the problem is audio is not playing correctly. If I click the mouse on the page, then sound comes. Even if I press any key from the keyboard, then also sound comes. So, I need a way to play the music without clicking the mouse on the page or pressing any key from the keyboard. Help me out. Thanks.

<tr>
    <table align="center" style=" border: 5px solid grey; width:100%;">
       <td valign="center"><t style="font-size: 70px; padding-left:0px; color: white; font-family: serif;">SMOKE:</t></td>
       <td valign="center">
          <i id="smoke" style="font-family: 'verdana';  font-weight: 'bold'; font-size: 75px;">{{ smokestatus }}</i> 
       </td>
       </tr>
       <audio id="myAudio">
          <source src={{ url_for('static', filename='smoke_detector_beeps.mp3') }} type="audio/mpeg">
          Your browser does not support the audio element.
       </audio>
       <script>
          var x = document.getElementById("myAudio"); 
          function playAudio() { 
            x.play(); 
          } 
          function pauseAudio() { 
            x.pause(); 
          } 
       </script>
       
       <script>
          if (document.getElementById('smoke').innerText == "NO SMOKE" ) {
          document.getElementById('smoke').style.color = 'green';
          }
          else if (document.getElementById('smoke').innerText == "SMOKE DETECTED" ) {
          document.getElementById('smoke').style.color = 'red';
          document.getElementById('smoke').style.fontSize = '65px';
          document.getElementById("smoke").className = "blink"; 
          playAudio();
          }
          else if (document.getElementById('smoke').innerText == "SENSOR DISCONNECTED" ) {
          document.getElementById('smoke').style.color = 'yellow';
          document.getElementById('smoke').style.fontSize = '60px';
          pauseAudio();
          }
          else if (document.getElementById('smoke').innerText == "SENSOR CONNECTED" ) {
          document.getElementById('smoke').style.color = 'green';
          }
          else {
          document.getElementById('smoke').style.color = 'white';
          }
       </script>
    </table>
 </tr>

Answer 1

The answer depends on when you want the sound to be played:

If you only want to check for the smoke status on page load, you can wrap your logic that's currently within the second script tag into a function.

This function can then be called when the window loads by using:

window.onload = checkSmoke()

If you want the function to be called multiple times whenever the smoke status changes, you will have to call the function again.

Here's a small JSFiddle to show what I mean.

If this wasn't the answer you were looking for, let me know!