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

Community resources General
1

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

2

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.

1 Like
3

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?

5

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:

3 Likes
6

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

7

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

8

Passionate performance !! What piano did you play ?

9

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:

10

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
11

Works! Tnx for the tip👍
Is there any way to style it? Even something as simple as setting its width?

12

Thank you!! This is super helpful

13

Thanks :slight_smile: Saved me here

15

I put this code into an HTML Embed but it doesn’t work. How is it possible that webflow doesn’t offer the ability to host direct access to a simple audio file?

<audio id="audioPlayer" src="https://www.dropbox.com/scl/fi/0ehpkzaan1q0ixh5a3r0j/Jijoninja.mp3?raw=1" preload="auto"></audio>

<button id="playButton">Play</button>
<button id="pauseButton">Pause</button>

<script>
	const audioPlayer = document.getElementById("audioPlayer");
	const playButton = document.getElementById("playButton");
	const pauseButton = document.getElementById("pauseButton");

	playButton.addEventListener("click", () => {
	audioPlayer.play();
});

pauseButton.addEventListener("click", () => {
audioPlayer.pause();
});
</script>
16

That asset is protected so that would be a problem.

17

Hi, How do you know it’s protected?

18

@Graziano_De_Rossi - Well you could try accessing the file a device when not logged into Dropbox as I did.

dp-isue
dp-isue720×496 9.66 KB

19

Ok… so I think Dropbox doesn’t allow direct access to your files unless you buy the paid version. In the meantime I tried with GitHub but even there initially I didn’t succeed I had difficulties except that in the end ChatGPT corrected my address by putting a “raw” and now it works. Later I then still found out how to copy the address from GitHub. In short, it is enough to use those three hours. And here’s a random audio file that works:

<audio id="audioPlayer" src="https://github.com/Togliatti/AudioAbleton/raw/main/wong-1.mp3" preload="auto" controls></audio>

And anyway at the moment on my page “Jijoninja font” the most absurd way to achieve the result obtained with an iframe from SoundCloud and with a divblock that covers the parts of the graphics of SoundCloud that must not be seen.

But it’s hard… life. On the one hand, you can publish hours of absurd videos in which people say that the earth is flat and on the other, to publish two seconds of audio, you must have a solid foundation in computer science.

Thanks a lot for your interest anyway!

My read only link:
https://preview.webflow.com/preview/situ-novu?utm_medium=preview_link&utm_source=designer&utm_content=situ-novu&preview=25ba8a565a28157afb3e155e98dc3eae&pageId=64e8c73e2617c089ab280f8f&workflow=preview

20

I probably wouldn’t use Git raw for serving media, it’s not designed as a hosting service, and you have the problem that any time you update these files the entire version history is kept. Not ideal for binary files.

Netlify would be a good choice. Simply zip your files and upload. Custom domain, good CDN and clean URLs, all available on the free plan.

However you likely had the right approach with Dropbox, but either you did not share your file, or the link construction is wrong. Here’s how to do that correctly;

21

Upload your file to google drive.
Share it > get the URL link.
Use below embed code

Remove last part from the link and replaceit with /preview"

Lets say if the share link is “https://drive.google.com/file/d/1wMmxX8fXnL-g-kb8lJvb1ZqWonzQEvRi/view?usp=drive_link”

Change it to : " https://drive.google.com/file/d/1wMmxX8fXnL-g-kb8lJvb1ZqWonzQEvRi/preview"

Use above mention link as embedded link it will work.
Or use below mentioned iframe

<iframe 
  frameborder="1"  
src="https://drive.google.com/file/d/1gMwX_1YEv5L_qAU0CckdO4k0ch4XGyRw/preview"
  style="width: 100%; height: 50px; max-width: 800px;"
></iframe>
22

FYI: Using Netlify to host assets for remote storage is clearly against their Acceptable Use Policy and can get your account terminated. This is what CDN’s are for.