Streaming live at 10am (PST)

Audio workaround for Background Video


#1

I am using the Background Video widget and it plays the video perfectly but without sound. I understand Webflow doesn't have audio natively yet. Can anyone suggest a workaround please. My client wants the video to play with sound!


#2

Hi,
You can use the basic audio tag with autoplay :
<audio controls autoplay loop>
<source src="URL OF YOUR AUDIO" type="YOUR AUDIO TYPE">
</audio>

Or you can also use the following code to be able to mute/unmute the sound :
`

<button type="button" class="audiobutton" onclick="aud_play_pause()">Audio</button>
<script> function aud_play_pause() {var myAudio = document.getElementById("myAudio");
if (myAudio.paused) {myAudio.play();}
else {myAudio.pause();}}
</script>

#3

Thanks Blaise. I presume I put the url of the video into " URL OF YOUR AUDIO" and mp4 for the audio type?


#4

Actually, the code provided by @Blaise_Posmyouck will work for audio filetypes only. It's an excellent option, and provides website visitors with the quick option to mute.

As for doing both, you can use the basic video tag which will also play audio. Here's some great information on the topic: http://www.w3schools.com/tags/att_video_autoplay.asp

As far as usability, autoplaying audio isn't always a welcomed feature for many website visitors. If you are going to include it, it's a standard practice to include a quick way to kill the audio on the webpage.


#5

Hi McGuire. I agree with you re autoplaying the audio but my client is a videographer and the voices on the video are giving him a very good recommend and so he wants users to hear it! Thanks for the response, I'll check out that link.


#6

did you figure out a workaround for this @jonimad??


#7

Hi, I've got a similar problem with background video with missing audio. Did anyone solve this?


#8