Made in Webflow

Multiple Songs / Audio (Same Page)

site profile thumbnail


Adding audio files on Webflow can be tricky. Here is a way to have as many audio files as you want which will play/pause every time you click a button. Follow these steps: * It only works on published sites not on the Webflow builder ** 1. Add an embed block on your project with as many audio tags as you want. You just have to change the unique "id" of each one. Example: <audio id="player1" loop src="your-song.mp3"></audio><audio id="player2" loop src="your-song2.mp3"></audio> 2. Add a button for each audio tag with a unique "id" (on the "Element Settings" section). Example: button1, button2 3. Copy the code on "Settings > Before body tag" on this project with the "id"s that you added on your players and buttons. That's it! If you have any questions feel free to comment. Sign up for the lesson: P.S πŸ™‚ πŸ™Œ - Like or follow if this was useful for you. 13 of 50 -- Resources: Photos: Unsplash Songs: Pixabay
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.

We miss comments too!

Right now, Made in Webflow doesn't offer all of the same functionality that Showcase did, like the ability to leave comments. But don't worry: We're working to bring comments back as soon as possible!

As always, we'd love to hear your feedback! Click the link below to take a short survey about Made in Webflow.


More by Webflowtips

See profile
View details
Text Reveal Different Directions