Wix Audio Player: Adding and Setting Up the Wix Audio Player

The Wix Audio Player is a stylish and simple music element that allows you to add a single track to a page on your website. Select your preferred player style, add a track and cover image, and customize its design.

Step 1 | Add the player to your site

First, select the player preset you like best and add it to your page.

Wix Editor

1. Go to your editor.

2. Click Add

   

   .

3. Click Video & Music.

4. Click Audio Players.

5. Select a player and drag it to the relevant location on your page.

Studio Editor

1. Go to your editor.

2. Click Add Elements

   

   .

3. Click Media.

4. Click Mini Players under Audio.

5. Drag a player onto the page.

Wix Harmony Editor

1. Go to your editor.

2. Click + Add at the top left of the editor.

3. Select Elements.

4. Click the Video icon

   

   on the left.

5. Drag a design you like onto your page.

   

Step 2 | Set up your Audio Player

Next, set up your player. Upload a track, add an image and track details, and define the player's playback settings.

Wix Editor

1. Click the player in your editor.

2. Click the Settings icon

   

   .

3. Set up your player using the options:

   • Choose Image: Select the image you want your player to display and click Add to Page.

   • Choose audio from:

     • One track: Click Upload Track to access your Media Manager. Select your chosen track and click Add Track.

     • External MP3: Enter the URL of the track you want to play.

   • Track Details: Enter the artist and track name.

   • Playback Options: Select an option:

     • Play once: The track plays once.

     • Play in loop: The track plays continuously in a loop.

Studio Editor

1. Click the player in your Studio Editor.

2. Click the Settings icon

   

   .

3. Set up your player using the options:

   • Choose Image: Select the image you want your player to display and click Add to Page.

   • Choose audio from:

     • One track: Click Upload Track to access your Media Manager. Select your chosen track and click Add Track.

     • External MP3: Enter the URL of the track you want to play.

   • Track Details: Enter the artist and track name.

   • Playback Options: Select an option:

     • Play once: The track plays once.

     • Play in loop: The track plays continuously in a loop.

Wix Harmony Editor

1. Click the Audio Player element in your editor.

2. Click the Display icon

   

   on the action bar and choose what you want to display, e.g., Cover art, Time display, Volume control and more.

3. Click the Settings icon

   

   on the action bar.

4. Choose what you want to customize:

   • Cover art: Add an image to your player. Click the Display mode dropdown and choose how your image is shown: Fill, Fit, or Keep image ratio.

   • Playback options: Choose how your track plays.

     • Plays in a loop: Click the toggle to choose whether the audio repeats after it ends.

       • Enabled: The audio plays again automatically.

       • Disabled: The audio stops at the end of the track.

     • Volume: Drag the slider or enter a value to set the default volume.

   • Audio source: Click the dropdown and choose how you want to add audio:

     • Upload file: Click Upload Audio and select the relevant file.

     • Use link: Enter the track URL in the Link field.

   • Track title: Enter the title of the track.

   • Artist name: Enter the artist's name.

   • Accessibility: Click the dropdown to add an accessible name and enable the Set as decorative toggle if there's no important information in the image to be read by screen readers.

     

Step 3 | Customize the player's layout and design

Lastly, customize the player's layout and design so that it complements your site's style.

Wix Editor

1. Click the player in your editor.

2. Click the Layout icon

   

   and select a layout: Classic or Icon.

   Note: If you choose the Classic layout, you can choose what info to display, e.g. a progress bar or time stamp.

3. Click the Design icon and customize the following:

   • Classic layout: Customize the regular and hover view of your player.

     • Regular:

       • Fill color & opacity: Choose a color for your player's background and adjust its opacity.

       • Borders: Adjust the color and thickness of the player's border.

       • Corners: Change the shape of the player by adjusting the corner radius.

       • Text: Choose the font and color of the player's text and controls and adjust their size.

     • Hover: Choose a color for the text and controls when a visitor hovers over the player.

   • Icon layout: Select your preferred icon and click Customize Design.

     • Regular: Choose an icon color and adjust its opacity.

     • Hover: Choose a color for controls when a visitor hovers over the player.

Studio Editor

1. Click the player in your editor.

2. Click the Layout icon

   

   and select a layout: Classic or Icon.

   Note: If you choose the Classic layout, you can choose what info to display, e.g., a progress bar or time stamp.

3. Click the Design icon

   

   and customize the player's regular and hover views using the inspector panel.

Wix Harmony Editor

1. Click the Audio Player element in your editor.

2. Click the All design options icon

   

   on the action bar.

3. Select the relevant option under Select a part: Audio player, Cover art, or Playback controls.

4. Design the element using the available options:

   • Fill colors

     

     : Change the background color of the player, choosing one of your brand colors or a custom color.

   • Text

     

     : Customize the typography, style and alignment of the text on the player.

   • Borders

     

     : Define the borders of the player so it stands out, choosing a color, width and style. Click the Edit individual borders icon

     

     to design each side of the border.

   • Corners

     

     : Make the corners of the player more square or round by dragging the slider under Radius. Click the Edit individual corners icon

     

     to design each corner separately.

   • Shadow

     

     : Apply an outer shadow to give the player an interesting 3D effect, setting the position, blurriness, color and more.

   • Spacing

     

     : Add breathing room to your content by adding padding spacing around the player.

   • Layout

     

     : Customize aspects of the player's layout like alignment and site direction.

     

Troubleshooting Wix Audio Player issues

Click an issue below to learn how to solve it.

FAQs

Click a question below to learn more.