Play sound on hover or click - diffferent audio for different images

Get Started
1

i have no idea which category this goes in so starting here since I have no idea how to even begin asking javascript or php questions … I have a page with several thumbnail images and need to attach a distinct audio track to each image. one of them should be looping, the rest a single listen.

I’ve done some web searching and found several solutions – some js and some html5 – for a single audio file attached to one or more images, but nothing about working with multiple images each with their own audio file.

I am working in wordpress but am clueless about javascript and/or php, but I am pretty handy with html and css, though. my theme, weaver II pro, does facilitate adding script to the head area.

thanks in advance for any insight. :slight_smile:

2

Use this code:

<body>

    <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
                 }
   </script>

<img src="htttp://www.yoursite.com/image.png" value="PLAY"  onclick="play()">
<audio id="audio" src="yoursite.com/song.ogg" ></audio>
 </body>

I hope this helps you.

3

so it does have to be javascript, eh? :frowning:

i will give it a try it i can figure out how to add javascript to the body of my wordpress theme.

thank you very much. :slight_smile: