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!

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

1 Like

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