pause sound on mouse click

Question

I'm trying to design my own audio player. I made "play", "pause" and "stop" symbols (Png format) and I couldn't find a solution to actually ad play pause and stop functions when you click on them.

I figured out how to play sound when the word "play" is clicked (no button) but I'm lost when it comes to add "pause" or "stop".

I'm a rookie using html/css so please forgive me if I'm not very clear. This is what I have so far:

<audio id="audio" src="sons/son.mp3" autostart="false" ></audio>
<a onclick="PlaySound()"> Play </a>
<script>
function PlaySound() {
      var sound = document.getElementById("audio");
      sound.play()
  }
</script>

Thank you for your answers.

Do you understand what `onclick` does? – PM 77-1 May 18 '18 at 16:45 — PM 77-1, May 18 '18 at 16:45

score 0 · Answer 1 · answered May 18 '18 at 17:23

you were on the right way to achieve this !

At first you declare globally your variable sound to get it from your three functions. To pause your sound you use the .pause() method and to stop it you return to 0 second playback time with the .currentTime property.

The code:

<audio id="audio" src="sound.mp3" autostart="false" ></audio>

<a href="#" onclick="PlaySound()">Play</a>
<a href="#" onclick="PauseSound()">Pause</a>
<a href="#" onclick="StopSound()">Stop</a>

<script>
    const sound = document.getElementById("audio")

    function PlaySound() {
        sound.play()
    }

    function PauseSound(){
        sound.pause()
    }

    function StopSound(){
        sound.pause()
        sound.currentTime = 0
    }
</script>

Hope it helps you !

Thanks ! It sure seems quite simple now ! – Robyn Johnson May 21 '18 at 08:09 — Robyn Johnson, May 21 '18 at 08:09

pause sound on mouse click

1 Answers1