javascriptloopsaudioonmousedownonmouseup

Ending an onmousedown event (onmouseup?)


I've created a button using an onmousedown event which loops an audio track when clicked. I'm trying to end the audio loop when the same button is clicked. I have tried an onmouseup event but no luck, any ideas? (I'm new to JavaScript)

<script> var one = new Audio(); one.src = "files/audio/one.wav"; one.loop = true; </script>

<img class="item" src="files/button.png" onmousedown="one.play()" onmouseup="one.stop()"/>

Solution

  • Try using a var to keep track of your clicks and only listen for the click event :

    JS

    var one = new Audio(); 
    one.src = "files/audio/one.wav"; 
    one.loop = true;
    var isPlaying = false;
    
    function manage(){
      if(isPlaying){
        one.pause();
        one.currentTime = 0;
        isPlaying = false;
      }
      else{
        one.play();
        isPlaying = true;
      }
    }
    

    HTML

    <img class="item" src="files/button.png" onclick="manage()"/>