Streaming live at 10am (PST)

Playing audio files/embedded music player/linking to external files

Hello,

I’ve just signed up to this forum as I’m considering creating a new, eCommerce website in Webflow. If I’m posting this in the wrong category … apologies !

I’m not a developer and cannot code. I’ve had a site with Siteground for 6 yrs which expires soon.

I just love the design possibilities in Webflow. However, as I’m a composer and want visitors to hear snippets of my music (which they’ll hopefully then purchase) I’m concerned that playing audio files isn’t readily available in Webflow.

I’d be thankful for advice re embedding a third party music player or any other method.

SoundCloud isn’t an option for me - I found the visual aspect ugly and cancelled my former subscription.

Thanks, Maara

It should be very easy to set up an audio file to play on a page by using the HTML5 audio tag in a code Embed block.

There would use one “player” for each song and the result would look similar to the below however various browsers may produce a player that looks different.

audio

More information here.
https://www.w3schools.com/html/html5_audio.asp

Thank you. I checked out the link. There’s no indication how large the audio file can be. I’m planning 30 sec at 320kbs MP3’s which would be about 1.40 MB each.

Can I host the actual files on the Webflow hosting space … under Assets, perhaps?

The below solution worked for me in Webflow.

Get a free dropbox account.
Add the mp3 to your dropbox so it is available publicly.
get the share link for example -
https://www.dropbox.com/s/0do9xvbxz0jz9a3/02%20The%20Way%20You%20Look%20Tonight.mp3?dl=0

change the url - remove “dl=0” and add “raw=1”
https://www.dropbox.com/s/0do9xvbxz0jz9a3/02%20The%20Way%20You%20Look%20Tonight.mp3?raw=1

Paste the direct link into the src area in the below video controls code

<audio controls="" name="media"><source src="" type="audio/mpeg"></audio>

This gives you

<audio controls="" name="media"><source src="https://www.dropbox.com/s/0do9xvbxz0jz9a3/02%20The%20Way%20You%20Look%20Tonight.mp3?raw=1" type="audio/mpeg"></audio>

Use the code Embed in Webflow to paste this where you want it to appear on the page.

It is a bit of a pain and if anyone has a simpler workaround I would love to know.

PS. As you are a composer the mp3 sample is me playing piano. :slight_smile:

Wow - this is a tremendous help ! I have Box - can presumably use that to house files. Dropbox deleted 3400 of my music files so I deleted it !!

The link may be different in box but it should still work. You can reply to this post if there are any issues.

Passionate performance !! What piano did you play ?

Thanks! I have always used the Yamaha Clavinova for recording as I find it easier than trying to record an acoustic piano. Just plug it in and you’re ready to go, lol. Maybe you could share your website with us after the audio has been added? :slight_smile:

I believe that is the instrument used by Andrew Lloyd Webber too. Yes - I’ll be happy to share my new website, once it’s up-and-running.

Thanks again for your help.

1 Like