Streaming live at 10am (PST)

Best embeddable audio player?

I’m looking to build a site that will host audio tracks, along with text and image commentary below. I’ll do this using the webflow CMS functionality.

However, I really don’t like the Soundcloud embed widget. Even on their Pro Unlimited subscription it’s not very customisable at all, and doesn’t look good on mobile (where I anticipate the majority of the traffic to be).

Webflow (presumably for reasons of ease) is pushing people to host with Soundcloud: https://university.webflow.com/integrations/soundcloud

Does anyone have any recommendations of other options? I’m not looking for anything more complicated than the ability to play, pause, and go forward / back.

Thanks in advance.

Might I recommend plyr.io? Super customizable and can act as an audio player as you desire. Just a thought!

2 Likes

Thanks @mattvaru. Plyr looks great. From a non developer’s perspective, it looks a little harder to integrate within webflow, so will have a go and see how I get on. At the moment I’m just building an MVP and so may have to revert to soundcloud (not ideal but has a very easy set-up) if I get stuck. Thanks.

1 Like

Understandable! It’s not super difficult to get up-and-running, though I’m sure it looks daunting to anyone that’s not familiar with code. I’m actually looking to write a tutorial on this soon, so once it’s up, I can let you know!

3 Likes

Hi @mattvaru - I’ve actually given up on Soundcloud. The embeddable widget they have is really annoying as whenever a user pauses the track there is a huge soundcloud link, and so it’s very easy for them to accidentally navigate off the page.

I’ve integrated a basic version of Plyr.io, and it’s great.

However at the moment I haven’t been able to customise the Plyr. I want to add the ability for a user to select the speed that they want to listen in. From the docs, 'speed' should be a default option, but in my instance only ‘download’ is available as a user option.

I’ve managed to customise the player through CSS styling in the settings section then the inside <head> tag option (slightly annoying that this doesn’t render in preview but I appreciate it’s custom code), but can’t see how to control the player’s options.

2 Likes

Great to hear you’re liking plyr.io so far! Admittedly, I’ve found the docs unclear and difficult to follow on things like options (which I believe speed is a part of), so I understand what you mean. Can you share your read-only link so I can see your set-up?

Also, saw your edit — your placement of code is/was spot-on!

Yes, I’m enjoying it :slight_smile:

Have got it all set up but am only missing 2 things:

  1. How to toggle off the volume bar

  2. How to enable ‘download’ of the audio track.

I believe both of these can be accessed via the controls (https://github.com/sampotts/plyr/blob/master/controls.md), but I haven’t managed to get this to work yet.

Read only link of the work in progress is here: https://preview.webflow.com/preview/leonardo-english?utm_medium=preview_link&utm_source=designer&utm_content=leonardo-english&preview=84531c3aece92eddd119da5593d73fd5&pageId=5d778fabc494ddc763fd7295&itemId=5d778fabc494ddd887fd72d9&mode=preview

Try adding this to your page’s inside <head> tag section.

<script>

var Webflow = Webflow || [];
Webflow.push(function () {

    var controls = ['play', 'duration', 'progress'];

    (function() { 
        var instances = plyr.setup({controls});
    })();

});


</script>

I’ve got this mocked up in a Codepen, where the HTML structure matches your current setup. See here:

https://codepen.io/mattvaru/pen/gOYKMmJ

The download part is tricky. I tried passing in “Download” in the above Controls array, but to no avail. I’ll keep trying, but that should fix your volume issue.

Note that Controls works in such a way that, as soon as you pass in one variable in that array (like play, duration, and progress), all default controls are gone and you’ll need to pass in each control you want as its own parameter, if that makes sense. :smile:

1 Like

Thanks @mattvaru. I can see that working nicely in Codepen, but it doesn’t work when adding in the <head> unfortunately. Note, this is even when publishing (as I know that some custom code isn’t visible in the preview). The volume button is the ‘nice to have’. Really it’s the download I’m more keen for.

I guess that I can either persevere with trying to get the download to work within Plyr, or alternatively I can just add another button (outside Plyr) as a normal element in webflow (similar to as suggested here.

check this out to see if it could work for you:

1 Like

Hey Webflowers.
Just did a web with my music in Webflow.
The song previews are nested in Adobe Portafolio. Cheers

hi @alastairbudge and @mattvaru

Where did you end up hosting your sound files for the plyr embed? I wouldn’t mind using Soundcloud or Mixcloud for hosting, but i can’t seem to find how to do that in the plyr documentation (only vimeo, youtube)

1 Like

Hi there - I have a podcast, so I just used the podcast hosting platform (Transistor)

Hello,
Data + intelligence for audio content on the Website. Backtracks’ intelligent podcast and audio analytics let you search, slice, dice, and dig your way to a deeper understanding of your listeners and audio content. Cross-Device. Get data across web, mobile, client, and server scenarios. Big Data.

Has anyone had any luck with implementing playr using soundcloud?

I’ve been able to get the player itself working fine on my webflow site but the issue seems to be with it parsing the soundcloud links I give it. The player doesn’t ever finish loading.

For some reason it seems near impossible to be able to embed a soundcloud link using a custom player, Which is weird as I didn’t think it would be so difficult.

Any ideas would be appreaciated. Thanks

1 Like

Hey Matt,

I was able to get the plyr embed working; however, the player will not work with my SoundCloud files and audios. It just shows the file loading forever. Do you know how to fix this?

Thank you.

Hey Pablo,

I’m having the same issue. plyr embed is working, but I can’t get my soundcloud file to work. Were you able to get this working?

Thanks.

Hey Beth, I was unfortunately not able to get it working.

No worries, thx for the quick response.

Beth and Pablo, if you were still looking for a solution;

I ended up using amplitude.js
https://521dimensions.com/open-source/amplitudejs
Had to do a fair bit of coding to create my own custom player, but managed to get it receiving CMS links for soundcloud tracks to populate on the front end.

2 Likes