Looking for jQuery to play sound on click of div

Design help Custom code
1

Hey! So I’ve been chipping away trying to get a piece of jQuery to work on my site. I’m wanting it to trigger a sound linked in html on the click of a div.

I’ve read and listened to numerous tutorials, but I just can’t see where I’m going wrong.

Any help would be massively appreciated.

HTML:

SCRIPT:

Here is my site Read-Only: https://preview.webflow.com/preview/adevinta-ec?utm_medium=preview_link&utm_source=designer&utm_content=adevinta-ec&preview=c7a0ff3732c6be951eacf10af4ffd59a&mode=preview

2

Hey, @danmreese I think the problem is it is not detecting the audio source.

<audio id="myAudio">
  <source
    src="https://res.cloudinary.com/de5pzy8r2/video/upload/v1616733333/Alert_irjfut.mp3"
    type="audio/mpeg"
  />
</audio>

<script>
  var soundclick = document.getElementById("myAudio");

  $(".linkblock").click(function () {
    soundclick.play();
  });
</script>

The only change you need to do is to host your audio in Cloudinary which I’ve already done but you can create your own account and host your audio for free

just make sure the source format to be like src="https://res.cloudinary.com/de5pzy8r2/video/upload/v1616733333/Alert_irjfut.mp3" type="audio/mpeg"

you can use any service to host your audio files I personally use Cloudinary hence suggesting hope it helps :peace_symbol:

1 Like
3

Thank you. This worked perfectly. Probably the only thing I didn’t try was hosting it elsewhere! :man_facepalming:

4

Your welcome @danmreese, I checked your code was perfect and the only reason this would not work is the source where the files are hosted but anyway all the best for your future endeavors and feel free to check any response as a solution to mark this request as solved :peace_symbol: