Use the audio widget generator below to create your responsive music widget for free. Select a template and click the “Continue with this template” button to get started.
Want to add your Audio Player in Webflow and others? No problem.
How to use the Webflow Audio Player Widget builder
- Choose a template: The available pre-designed audio widget templates are Music Playlist, Inline Audio Player, Single Track, New Album, Meditation and Ambience, Audiobook, and Nature Sounds. Click on the ‘Continue with this template‘ button to select the template that best suits your website’s audio needs.
- Edit audio tracks: In the Tracks section, you can upload music or audio you want to embed on your Webflow website. Each track can have its title, artist, and image. You can set the order of each audio by dragging and dropping its placement on the playlist. Additionally, you can encourage users to download or buy your track and grow your audience by adding links to music services using Call-to-Action buttons. To do this, click the ‘Add Call-to-Action’ button, select the music service, and paste the link. The supported music services are Apple Music, Spotify, YouTube Music, Soundcloud, Amazon Music, Deezer, iTunes, Bandcamp, Google Play, Pandora, and Tidal.
- Set the widget’s layout: There are two options: floating and embed. You can also set the Webflow music widget’s placement (Top Left and right, Bottom Left and right) and size, as well as turn the close button and the minimize button on or off.
- Player Settings: In this section, you can set the player options.
- Player Controls: Turn on or off the buttons for track controls, Shuffle, Loop, Volume, Progress Bar, Playlist, and player information like image, title, and artist on the player. Also, the music widget-maker offers toggle options for enabling the Save Playing Track and Progres, shuffle, repeat, and set the volume level by default.
- Autoplay: Automatically play audio on the website.
- Playlist settings: Tailor the user experience by showing or hiding the playlist by default, adjusting track info, and setting the playlist’s height. This flexibility allows you to create a unique and engaging audio experience for your website visitors.
- Message: This section lets you translate front-end messages.
- Customize Appearance: Two color schemes are available: Light and Dark. The Custom color scheme allows you to edit the background, colors, and fonts. There are even custom CSS and JavaScript fields for further customizing the look and feel of the music player for Webflow.
- Once you have finished designing the audio player plugin, click on the “Add to website for free” button and sign up on the following page to save your widget.
- Get the embed code for the audio gadget and use it on your website.
How to add audio player widget on Webflow
Your widget’s embed code includes an external JavaScript file and an HTML div with a class attribute. You can easily embed the audio player widget into your Webflow website by using the “Code Embed” element in Webflow Canvas. Here’s how:
- Edit the page where you want to embed audio player on Webflow.
- Add the Code Embed element to your page.
- Paste the generated code into the Code Embed Editor.
- Save your changes.
- Since you’ve added the Webflow to Webflow, you can change the widget’s properties, such as size, background, border, etc.
The best part is you can embed your audio widget on multiple websites regardless of whether they are made on Webflow.
How to manage your Audio Player widget
Once you have created your audio player for Webflow, you can easily manage it on your account. In your dashboard, search for “Audio Player” app under list of apps. As you can see from the following screenshot, you can create more music player widgets, edit existing ones, and get HTML embed code.
What Are the Uses of an Audio Player for Your Business?
Enhance User Engagement with Music Player Widgets
An audio player widget allows you to embed music or podcasts directly into your Webflow website, creating an immersive experience for your visitors. By offering background music or curated playlists through a music player widget , you can keep users engaged longer, reducing bounce rates and increasing time spent on your site. This is especially useful for creative industries like photography, art galleries, or fashion brands where ambiance matters.
Promote Podcasts and Audio Content
If your business produces podcasts, interviews, or educational audio content, an mp3 player widget makes it easy for users to access and listen without leaving your page.
Streamline E-Learning Platforms
For businesses in the education sector, an audio player widget can be invaluable. Use it to deliver lectures, tutorials, or language lessons in an accessible format. With features like pause, rewind, and volume control, learners have full flexibility over their listening experience, making your platform more user-friendly. Tip: Activate the Webflow audio widget’s “download” feature to enable users to download audio content and listen offline.
Create Interactive Storytelling Experiences
Storytelling is a powerful marketing tool, and an mp3 player widget takes it to the next level. Share customer testimonials, narrated case studies, or product stories in audio form to captivate your audience. An engaging narrative delivered via Webflow music player widget can humanize your brand and build trust with potential customers.
Support Multilingual Audiences
If your business caters to international audiences, a Webflow audio player widget can serve as a translation aid. Offer voiceovers or narrations in multiple languages to make your content more inclusive and accessible.
Monetize Your Website with Sponsored Content
Integrating an audio player for Webflow websites opens doors to monetization opportunities. Partner with advertisers to feature sponsored tracks, jingles, or promotional messages within your widget. Alternatively, offer premium subscriptions for exclusive audio content, generating additional revenue streams for your business.
