Question

I want to use an image as HTML5’s audio player’s play/pause button.

I don’t need to show the controls. Is there any way I can do this, like hide the audio element and use Javascript or jQuery to play/pause the audio whenever the image is clicked?

Answer 1

Yes you can use this:

HTML

<audio id="player">
  <source src="file.ogg" type="audio/ogg">
  <source src="file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

JS

var player = document.getElementById('player');
player.play();

and to pause

player.pause();

Let me know if you need any more help 🙂