SOLVED - How to use audio in Webflow

Introduction

There are 2 steps to getting this to work. In a perfect world this would be a copy and paste job, and I shall do my best to provide that luxury, however it does require a little bit of leg work on your end too. Fear not, the steps are relatively simple to follow:

1. Setting up the Plyr Audio player

• What is Plyr?
• Set up the Plyr
• Set up dynamic content

2. Storing music on Amazon Web Servers (AWS)

• Creating an S3 Bucket?
• Setting up permissions
• Fixing Cross-Origin Resource Sharing (CORS) issues
• Protecting Intellectual Property
  

By the end of this tutorial you’ll have the ability to dynamically populate audio players using ASW, and the Webflow CMS or eCommerce, and a few new suggestions for your Spotify playlist. I’m not going to dive into the deep specifics, as all the platforms I’m using have extensive documentation, my intention is to show you enough to understand how to safely implement this in Webflow. 

Before we get started let's briefly discuss setting up your CMS or eCommerce environment. This is entirely subjective depending on your requirements. I would advise having a name and a plaintext field to paste your song URL. The rest is up to you and will vary depending on whether you intend to sell the music (more on this in protecting Intellectual Property Section).

What is Plyr?

Plyr is a simple, lightweight, accessible and customisable HTML5, YouTube and Vimeo media player that supports modern browsers - that’s in their words which is a perfect summary. For those devs out there, yes, this includes IE11!

Linking to the CDN:

This step is simple. Add the following link to the page with the audio player or inside of your custom code section if you have audio players throughout your website:

For those who don't know the defer attribute on the script tag tells the browser to only load this script once the page is fully loaded. This will increase page load speeds which is great for user experience and, consequently, SEO. You can learn more about SOE metrics on our [post name].

Initialise the audio player 

Place the following script before the closing body tag in custom code or page settings. We’re using the initialisation guiltiness for multiple players hence the use of an Array. 

I've added an extra function that pauses other audio players when a new one is selected. This is done for a better user experience. Webflow has JQuery installed by default so no need to import the CDN

Place your embed inside of a Collection  

‍

‍

Place your embed code inside a Collection and link it to your CMS item or Product. 

Writing the code for HTML embed   

Container is just a style I’ve added. The important points from this setup are:

1. the crossorigin attribute: ensures you don’t run into permissions issues when trying to play audio hosted on a 3rd party server
2. The dynamic use of a CMS field as the sources. This should have been setup when you were configuring your CMS or eCommerce product - remember to use plaintext as the field type to avoid any unwanted results. For full list of setup options please visit the git repository https://github.com/sampotts/plyr 
   

That’s it! Webflow part is completed. The next part will seem a little daunting but I can assure you it’s relatively simple once you understand what’s going on

Storing music on AWS

So, why AWS? When I was attempting to get this to work I kept running into permissions issues. I attempted using multiple different platforms and the result was the same. Inspecting the code revealed I was running into CORS issues. “Cross-Origin Resource Sharing (CORS) is an HTTP header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources”. If this isn’t setup correctly then the resource will fail to load. AWS give the user control over how the content they upload can be distributed over the internet which lets us play audio on Webflow without any permissions issues! These policies are annoying, in the context of what we're trying to do, but they're ultimately there to secure data by defining who has access to what resource.

Creating an S3 bucket

1. Create an account on amazon web servers website {LINK}. Once this is done, search for s3 bucket in the search box at the top of the page. 
2. Next we want to create a bucket and give it a logical name eg granite-marketing-audio-files (no caps or spaces allowed). 
3. Select your AWS region (use google to find this out if you have to)
4. Object ownership - ACLs disabled 
5. Block public access - untick block all public access and tick the box acknowledging that you want to do so 
6. Bucket versioning - disable (this is beyond the scope of this tutorial)
7. Default encryption - disable (this is beyond the scope of this tutorial)
   

Enable public access to S3 bucket 

Click on your bucket and select the permissions tab. Scroll down until you see bucket policy and click edit. Then click policy generator  

‍

Watch this YouTube video for full setup instructions.

Settings:

• Select type of policy - S3 bucket policy
• Principal - * (for all resources)
• Actions - GetObject
• ARN - copy and paste the provided link and add a “/*” to the end to set this policy for all items of the object. You can find this just below where it says bucket policy after you've selected Edit. It should follow the convention arn:aws:s3:::{your-bucket-name}

‍

‍

Generate the policy and paste it into the bucket policy section: 

‍

We can now see that the resources if publicly available at the top of the page if you select your bucket name in the breadcrumbs at the top of the page: 

‍

Select permissions and scroll down to Cross-origin resource sharing and select edit. Paste the following in:

This enables only GET requests from all origins (anyone online). Your resource can now be accessed on your Webflow site! I can assure you, this is the most difficult part done! Now all you have to do is upload some audio files 

Use the breadcrumbs at the top of the page to navigate back to your bucket. Click upload and choose a file or a folder - this upload shouldn't take long. Click on the song you’ve just uploaded and copy the object URL (Figure 8). Paste this into the CMS field you created earlier that corresponds to the src attribute.

‍

That’s it! You’re now fully setup. For adding additional songs you just need to add theme to the object individually, or by uploading folders, and then copy and paste the generated Object URL into the CMS field corresponding to the src attribute. Please not that this doesn’t protect your music - if someone inspects the code they an actually find the resource and download it directly. If you intend to sell the product, this is obviously bad for business! You have two options here 1. Only upload a preview (30 seconds) or 2. Configure settings to disable downloading resources and protect your intellectual property

Protecting Intellectual Property

You need to enable "conditions", on your bucket policy, so that the resources can only be accessed on your specified domain. Ensure you include the fully qualified URL as well as the shorthand one. This can be achieved by copying and pasting this in:

 "Condition": {

                "StringLike": {

                    "aws:Referer": [

                        "https://www.your-url.webflow.io/*",

                        "https://your-url.webflow.io/*"

                    ]

                }

            }  

Your policy should now look like this:  

‍

NOTE: Referrers can be spoofed but for the average web user this would be more than sufficient! For more information please visit this link

There you have it folks! Secure audio on Webflow! If you have any questions please get in touch using any one of our forms!