Play and stop audio with clicking text-block

Design help Custom code
1

Long story short:

I want to click a text block to start playing an audio file and press another or the same to stop it.

Short story long:

I just switched to Webflow after being on Wix and Squarespace. I AM LOVING IT. A bit of a learning curve, but so many possibilities! I have never been more excited about learning a new tool. This will surely be my gateway to code as well.

I am building a site that will have different toggles for audio ambience. Its a passion project and I don’t need any design advice (I know 99/100 sound integrations on websites are horrible).

I am already using a lot of hide / show interactions for visual content, and now I need to toggle audio too. I don’t mind going deep here, as long as I reach my goal.

I am looking for a super minimalistic audio player. “Press text, text changes colour and starts to play audio, press again or on different text, audio stops playing.”

I am new to HTML, CSS and JS, but solving this issue would be tremendous for me!

Hope there are some skilled souls out there that could guide me! I am in awe of your knowledge.

1 Like
2

Hey, @Tideboi Welcome to webflow, Check the links below if you haven’t already it might give you some insights.

I’ve just tried adding audio by using some low-code in webflow you can find the code below it might be of help.

Read-Only
Published Link

Hope it helps :peace_symbol:

1 Like
3

Thank you so much for the quick reply, @Sachin.

Beaaautiful! I got it to work. Searched 3 hours for this yesterday. You made my day!!

5

Dear @Sachin.

This is beautiful. Now the plot thickens.

Is it possible to have multiple audio files to be played with different buttons?

I tried duplicating the body code changing “id” to “myaudio2” and also changing “playAudio2” but this did not work.

6

Hey, @Tideboi watch this video if you haven’t already he has used different buttons to activate different music. I hope you’ll get some insights after watching this.

7

What a time to be alive. So many skilled and helpful people online. It works as intended now!
Thanks again!

8

Hey!

@Sachin Thanks for recommending us!!!

@Tideboi Feel free to contact us if any questions occur, we’re always here to help you!

Regards,
Elfsight Team