Audio on click with Interactions

How To
1

I want to put a fixed div on the website. When I click on the div, an audio should start playing. Is this possible with interactions?

2

What you describe is possible to do with javascript. But why not just make that fixed div with the image as background and place the audio file into that div?

3

Thanks for your reaction! I am going to try this and see if it works Javascript Audio Play on click - Stack Overflow

4

You can add the image the attribute “onclick” with value playSound()
Next to the image set a Code element and copy the code below into it. You have to replace the link to the mp3 file. After that the sound should start on click on the image. Another click pauses the sound. I assume that your audio isn’t only a sound effect, so it’s good to be able to stop it again.

<script>
  var sound = new Audio('/wp-content/uploads/01-La-Libertad.mp3');
  function playSound(){
    if(!sound.paused && !sound.ended){
      sound.pause();
    }
    else{
      sound.play();
    }
  }
</script>

You can see it on a test site where I wrote this code to try it. Just click on the image there
https://161maluhia.pebweb.ch/test/