Play sound/video when image/link is clicked

Demo

We need:

  • a js function for playing sound/video
  • a reference to that js function in the href tag of the image/link/video
  • an audio/video file with a unique id

JS

Basically, get the media file by id and use .play() to play it.

  function play(media) {
    document.getElementById(media).play();
  }

HTML

The magic in using direct reference to js functions in the href tag. Like so: href="javascript:play('media')"

<!-- image --> 
<a href="javascript:play('dog')"><img src="img/dog.png"></img></a>
  
<!-- link -->
<a href="javascript:play('dog')">Dog</a>
  
<!-- audio file -->
<audio
    id="dog"
    src="media/dog.wav"
    preload="auto"
></audio>