Help Center
    Help Center
  1. Managing your business
  2. Business solutions & apps
  3. Wix Audio
  4. Wix Audio Player
    5. Wix Audio Player: Adding and Setting Up the Wix Audio Player

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

7 min read
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. 
A screenshot of an Audio Player on a live site.

Step 1 | Add the player to your site

First, add a player. Choose between a classic audio player or a player that only displays a play icon. 
Wix Editor
Studio Editor
  1. Click Add on the left side of your editor.
  2. Click Video & Music.
  3. Click Audio Players.
  4. Select a player and drag it to the relevant location on your page.
A screenshot of audio players elements panel in the editor menu

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
Studio 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.
A screenshot of the wix audio player settings panel in Wix Editor

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
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 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.
A screenshot of the design options for the Audio Player with the Regular and Hover options highlighted.

Troubleshooting Wix Audio Player issues

Click an issue below to learn how to solve it.

Still need help?

If the problem persists, contact us and we will be happy to help. Please include the following information:
  • The music file you are trying to upload / the link you are trying to embed.
  • The name and version of the web browser you're using.  
  • The name and version of your computer's operating system.
  • A screenshot of your console view using the steps below:
    1. Open an incognito window in Google Chrome (Ctrl + Shift + N).
    2. Sign in to Wix and try to open your Editor. 
    3. Use the keyboard shortcut Ctrl + Shift + J (on PC) or Cmd + Option + J (on Mac).
    4. Click the Console tab at the top of the panel and refresh the page (F5).
    5. Take a screenshot of this tab.

FAQs

Click a question below to learn more.

Did this help?

|

In This Article

  • Step 1 | Add the player to your site
  • Step 2 | Set up your Audio Player
  • Step 3 | Customize the player's layout and design
  • Troubleshooting Wix Audio Player issues
  • FAQs

Related Content

About the Wix Audio Player

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched