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).
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 @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.
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!
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.
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!
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:
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.
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.
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)
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.
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?
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.