Implementing Interactive Audio

Greetings and salutations to whoever reads this, I hope you are well.

I’ve been working on my portfolio and it’s coming out pretty well. But when it comes to implementing audio I can’t for the life of me find a forum or tutorial of the kind of effect I desire. Most are either hard to work my head around or don’t fully explain how they work.

  1. What I would like to add to me site, is being able to trigger a sound clip if I hover/click an element. Example, If I press a button element, it would play a click sound. Also being able to control the playback speed, looping and pause and play it.

This would most probably be done through custom code of course, but I couldn’t t find one that was straight forward to accomplish this effect. So would anyone happen to have or can make a clear custom code that allows me to swap in my elements so I can have sounds play on hover and click, and if the sounds need hosting, where can I host them?

If there’s not a good way of doing it in this particular way, are there any alternative methods to have this done? I’d appreciate it if anyone with an answer can help me with this, been trying to find one all-day

  1. If not the others above, then can someone recommend me to a free and good audio widget-maker for websites. Most I tried were either not free or confusing. I tried using ones like plyr.io but I couldn’t fully work out how to implement it onto my site. It can either be from a third party or custom code to make a player widget.

Ones like SoundCloud don’t work for me as I need to be able to trigger it on and off with different elements.

Thank you in advance to whoever takes the time to read this and respond. I love Webflow but this is the only thing about it I haven’t been able to figure out.

hi @BurningAmbition and welcome one of best JS APIs for audio is HOWLER-JS or of course WEB AUDIO

this is more simpler to understand

Ahh, thank you, Stan. Will definitely check these out later. Haven’t had much experience with JavaScript so I hope I can absorb that second video well, been stressing for a simple answer for a while. If you have any more tutorials or sample code that are also straight forward please add them here also if you can, for when I’m back.

Thank you again, Stan

hi @BurningAmbition sorry, but I wouldn’t do your homework for you. I presume that you are able to browse the internet.