Search for the Music app in the Wix App Market and install it on your website.
After installing, you’ll be automatically redirected to the app dashboard.
If not or if you need to access it later, you can open it anytime by going to:
Wix Dashboard > Apps > Music > Edit Widget
Once you open the app dashboard, you'll find six sections in the left panel: Library, Playlists, Behavior, Templates, Layout, and Appearance.
Each section gives you control over a different part of your music player, from managing audio tracks and playlists to customizing its behavior, design, and position on your site.
The Library is where all your uploaded audio tracks are stored.
Click Add Track to upload audio files to your music library.
Use the search bar to quickly find a track by entering any part of its title.
Click the ⋮ menu next to a track to: Edit the track, Download the audio file, Add the track to a playlist, Delete the track
Tracks added to a playlist will automatically become available in your music player when that playlist is active.
Use Playlists to group your audio tracks and create different collections for your visitors.
The Active playlist is the playlist that visitors will hear on your site. You can create as many playlists as you like, but only one playlist can be active at a time.
Click + Create Playlist to create a new playlist and select tracks from your library.
You can also add tracks directly to a playlist from the Library by clicking the ⋮ menu next to a track.
Click a playlist card to edit its contents, name, or cover image.
You can also:
Use the toggle switch to set a playlist as Active
Use the ⋮ menu to Edit, Duplicate, or Delete a playlist
The playlist editor is used both when creating a new playlist and updating an existing one.
Playlist Name - Give your playlist a clear and recognizable title.
Cover Image - Upload a cover image from the Wix Media Manager.
Select tracks from library - Select tracks from your library and reorder them as needed.
Set as Active - Make the playlist the one visitors hear on your site.
The Behavior section lets you control when the player appears, how audio starts, which controls visitors can use, and which pages display the player.
Choose when your music player first appears on the page:
Immediately - The player appears as soon as the page loads.
After Delay - The player appears after a specified number of seconds, making it less intrusive.
Configure how your audio behaves when visitors interact with the player.
Autoplay - Automatically start playback when the page loads. Note that some browsers may block autoplay until the visitor interacts with the page.
Start Muted - Load the player without sound and allow visitors to unmute it.
Shuffle - Play tracks in a random order by default.
Remember Last Track - Resume playback from the track the visitor listened to previously.
Default Volume - Set the initial volume from 0–100%.
Choose which controls are available inside the player:
Shuffle Button - Lets visitors randomize the playlist.
Repeat Button - Lets visitors repeat a single track or the entire playlist.
Download Button - Allows visitors to download the audio file.
Fine-tune how visitors interact with the widget:
Start Expanded - Display the full player when the page loads instead of only the badge.
Show Close Button - Allow visitors to close the player.
Reopen Behavior - Choose what happens after a visitor closes the player, such as keeping it closed or reopening it on their next visit.
Collapse on Scroll - Automatically minimize the player to its badge when visitors scroll down the page.
Choose where your music player should appear:
All Pages - Display the player across your entire site.
Specific Pages - Display the player only on selected pages by entering their URL paths, such as /blog or /shop.
You can add multiple page paths to target more than one specific page.
The Templates section lets you choose from four ready-made player layouts.
Click a template to apply it and see the changes instantly in the preview.
Floating Player – A sticky audio player that stays visible as visitors browse your website.
Cover Focus Player – A visually engaging player featuring a large cover image and simple playback controls.
Audio Bar – A clean, compact horizontal player with essential audio controls.
Full Playlist Player – A feature-rich player with a playlist, cover image, playback controls, and active track display.
The Active badge indicates which template is currently selected and published.
Use the Layout section to control where your music player appears and how much space it has around it.
Use the 9-point positioning grid to place the widget on your screen.
You can switch to Mobile view from the header and configure a different position for smaller screens.
Adjust the distance between the player and the edges of the screen:
Vertical Margin - Controls the distance from the top or bottom edge.
Horizontal Margin - Controls the distance from the left or right edge.
Use the slider to adjust the roundness of the player's corners.
0 px - Sharp, square corners
50 px - Fully rounded, pill-shaped corners
The Z-Index controls whether your music player appears above or below other elements on your site.
If the player is hidden behind another element, such as a chat widget or sticky header, increase the Z-Index value to bring the player to the front.
The Appearance section lets you personalize your player's colors, typography, animations, and badge logo.
The Themes tab provides ready-made color palettes that you can apply with a single click.
Themes automatically set the player's: Background color, Text colors, Control colors, Icon colors
After applying a theme, you can further customize individual colors from the Colors tab.
Use the Colors tab to fine-tune the appearance of individual elements.
Background Color: Set the main background color of your music player. You can also adjust the opacity to create a semi-transparent effect that blends with your site's content.
Text Colors: Customize the colors of text displayed in the player:
Song Title - The name of the currently playing track.
Time Text - The playback time, such as 1:06 / 2.38.
Control Colors: Customize the colors of the playback controls:
Primary - The play button and filled portion of the progress bar.
Track - The unfilled portion of the progress bar.
Icon Colors: Set the color of utility icons, including the volume, download, and close icons.
The Design tab gives you additional options for customizing the player.
Animations: Add motion effects to your player
Entry Animation - Choose how the widget appears when it loads: Fade In, Bounce, Shake, Pulse
Pulse Animation - Add an animated ring around the player badge to make it more noticeable and encourage visitors to click it.
Song Title Font: Customize the typography used for the song title
Font Family - Choose from more than 900 Google Fonts.
Weight - Select Light, Regular, Medium, Semi-Bold, or Bold.
Size - Set the font size from 8 px to 36 px.
Badge Logo: Customize the circular badge visitors see before expanding the player
Use Cover Image - Display the active song's album artwork.
Custom Logo - Upload your own logo from the Wix Media Manager.
Timer Font: Customize the font used for the playback time display
Choose the font family, weight, and size. For the best results, keep the timer text small and easy to read so it doesn't compete with the song title.
Use the Desktop and Mobile preview options to see how your player looks on different screen sizes.
Position and spacing can be configured independently for desktop and mobile, allowing you to create a layout that works well across devices.
Your changes are automatically saved as a draft while you work, so you don't have to worry about losing your progress.
Use the available actions to manage your changes:
Undo / Redo - Move backward or forward through your recent edits.
Save - Manually save your current draft.
Publish - Make your changes live on your site.
⋮ Menu - Use additional options to discard changes or unpublish the widget.
Preview your player on both desktop and mobile before publishing to make sure its position, spacing, controls, and appearance work as expected.
To get in touch with us, please use the blue chat bubble from the bottom left of the screen.
Please consider Adding a Review for the app where you mention how it has helped you achieve your goals. We prioritize adding features to an app based on how many reviews it's getting. Thank you for your help! ❤️