Streaming live at 10am (PST)

BT Hover/Clic : Play an audio file?


#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.


#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


#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.


#8

Thanks :slight_smile:


#9

Hi Vincent, this is a good solution actualy, give by a webflow member. Thanks for youe support
-> https://webflow.com/AliSisk

<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>