Play sound on click ( Anywhere)-CodePudding

Im trying to create a function that when you click down anywhere on the page a sound is played. I can only find information on how to do this for buttons. If you can help me that would be amazing

html css and js

Thank you

CodePudding user response：

This script binds an click event to any element in the body, upon click will play the sound stated in the audio tag.

<!doctype html>
<html>
  <head>
    <title>Play audio</title>
  </head>
  <body onl oad="addEvent()">

    <script>
      function addEvent(){
         document.body.addEventListener("click", play)
       }
      function play() {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>
    <h1>click any element on the body to play sound </h1>
    <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>

  </body>
</html>

CodePudding user response：

you should just handle onclick event.

<html lang="en">

<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
<script>
    var should_play=true
    window.onclick = () => {
        if (should_play){
            should_play=!should_play
            let soundSource = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
            let sound = new Audio(soundSource);
            sound.play();
            sound.onended = () => {
                should_play=true
            }
        }

    }

</script>

</html>

variable should_play has been defined for not to playing song again when it is playing.

CodePudding user response：

Why dont just use onClick event on the body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onclick="playAudio()" style="height: 1000px;"> 
<p>CLICK</p>

    <audio id="audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>

<script>
  
function playAudio() {
 var audio = document.getElementById("audio");
 audio.play();

}
</script>    
</body>
</html>