1
Host your MP3 tracks in a folder on another server. There is no workaround here: you really need another server. Copy the MP3 tracks' URLs for later reference.
Host your MP3 tracks in a folder on another server. There is no workaround here: you really need another server. Copy the MP3 tracks' URLs for later reference.
2
In order to hide your browser's ugly default audio controls, place this little line of code inside the <head> tag of your page:
<style type='text/css'> audio { display:none; } </style>
In order to hide your browser's ugly default audio controls, place this little line of code inside the <head> tag of your page:
<style type='text/css'> audio { display:none; } </style>
3
Before the </body> tag of your page, place the script that you will find before the </body> tag of this very page.
Before the </body> tag of your page, place the script that you will find before the </body> tag of this very page.
4
In Webflow designer, make a CMS collection and call it Audio. The names in this CMS collection will later be the track names that you see in the playlist, the slug will be your unique ID name that you will need afterwards, and the link field that you need to create here will later refer to the unique URLs of each MP3 file in step 1.
Note: if you decide to use Dropbox to host your MP3 files, each hyperlink in the CMS collection should end like so: .mp3?raw=1
In Webflow designer, make a CMS collection and call it Audio. The names in this CMS collection will later be the track names that you see in the playlist, the slug will be your unique ID name that you will need afterwards, and the link field that you need to create here will later refer to the unique URLs of each MP3 file in step 1.
Note: if you decide to use Dropbox to host your MP3 files, each hyperlink in the CMS collection should end like so: .mp3?raw=1
5
In that same collection list, you could also add image fields, create additional text fields, color fields … just like you would do when creating other collection lists.
In that same collection list, you could also add image fields, create additional text fields, color fields … just like you would do when creating other collection lists.
6
Now place a Div block on your page and give it the following ID name: soundlinks. If you get this wrong, your playlist will not work.
Now place a Div block on your page and give it the following ID name: soundlinks. If you get this wrong, your playlist will not work.
7
Place a Collection List element inside the Div block that you created in step 6. Open it until you see the Collection Item. There, place an Embed element.
Place a Collection List element inside the Div block that you created in step 6. Open it until you see the Collection Item. There, place an Embed element.
8
Open the Embed element and paste the code below. The purple field names are the result of clicking the + Add Field button in the top right corner and choosing the correct collection field names.
Open the Embed element and paste the code below. The purple field names are the result of clicking the + Add Field button in the top right corner and choosing the correct collection field names.
9
Styling this very text block (yes, this one) will enable you to style the track names above, as well as this nice little button:
Styling this very text block (yes, this one) will enable you to style the track names above, as well as this nice little button:
10
Done. Publish your site.
Done. Publish your site.