Play sound/video when image/link is clicked
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>