BT Hover/Clic : Play an audio file?

Design help Custom code
1

Hello everyone,

after the novels, newspapers, blogs, videos, podcasts… We are all looking to gain information for as little time as possible. What I’m trying to do today through my favorite tool, Webflow !

Create a BT / Div that allows when I am in hover or when I click on it to launch an audio media,
without video without “text”.

The user just has to listen to what we have to say.
What could be better than a video demo and just audio to sell a product, tell a story, have a blog style website but with beautiful podcasts. If you have any suggestions for help, I’m listening.

You can understand me here with my exemple : http://blueprint-record-play.webflow.io/

:fire::smiling_face_with_three_hearts::fire:

2

I wrote a piece about making the perfect button a while ago:

It contains a codepen example using HTML/CSS and JS, of a button that if playing a sound on hover-in, and another sound on hover-out.

2 Likes
3

hi vincent,
Thanks for this great tips !!!
I’ve following your great tutorial but is not working actually :confused: can u help me more ?

4

workinggggg :slight_smile: thanks vincent

1 Like
5

Yeah! You did it faster than I’m eating my sandwich :smiley:

6

@vincent Do you know how I can create a stop clic on the song ? http://blueprint-record-play.webflow.io/
bt on the right. This could be perfect.

7

Unfortunately no, I’m not a coder, but it should be easy to add that to my code.

You can maybe search for a better code directly on codepen or stackexchange.

1 Like
8

Thanks :slight_smile:

9

Hi Vincent, this is a good solution actualy, give by a webflow member. Thanks for youe support
→ Ali Sisk | freelance web designer

<html> 

<audio id="main-song"><source src="audio-file.mp3"> </audio>
<div class="the-perfect-button" onclick="playAudio()"></div>
</html>

<script>
var x = document.getElementById("main-song"); 

function playAudio() { 
 x.play(); 
} 

function pauseAudio() { 
 x.pause(); 
}
</script>
3 Likes
10

Hello @Thinkrs_Agency

How did you implemented the solution in webflow?
I cannot make your code working, I don’t understand if I have to add it to the one posted by @vincent, or if it’s a solution working by itself.

I also found online this other nice button, to play and pause an audio source, but apparently I cannot make the html and the js communicating together.

11

Hello Gareth (or anyone else who wants to get involved)
This may be a silly question but while I understand the premise of code and what’s written above, how do I actually attach it to a button on my page? I’ve only really been on webflow properly for a week now and maybe missing something silly.

Thanks in advance,
Si

https://preview.webflow.com/preview/pixelandvector?utm_medium=preview_link&utm_source=designer&utm_content=pixelandvector&preview=088b529bd24bed09a37bf00eb2f4d327&mode=preview