HTML5 MP3 Player Manual

Advanced: Building a Custom HTML5 MP3 Player 

In this tutorial we will show you how to build a custom MP3 player for your page using the HTML5 MP3 Player.

*You can also check out the video.

How to do it

1. We've inserted a div container with a background image that we'll use for an MP3 Player.

2. Now, we'll use another div container to insert the MP3 Player in it. Click the MP3 Player menu and the dialog window will open.

3. The dialog window opens. For our custom made MP3 Player we will use the None design (1). Add your songs from the Import a whole folder menu (2), edit the titles if necessary (3) and click OK button (4).

4. Now we're going to add Title and Time info for each song.  

5. Select the HTML5 MP3 Player Title menu from the list.

6. This is the div container for the title, now click the Split view.

7. Cut and paste the div code before the playlist with the songs.

8. Now, we're going to add a Progress bar, so we need to go back to a Design view. From the HTML5 MP3 Player menu select the HTML5 MP3 Player Progress bar.

9. We need control buttons for our Player, so we'll add some from the HTML5 MP3 Player menu.

10. We'll style the Title and Time text, so it looks great on our site design. Select the div.dmxHTML5MP3PlayerDisplay (1), click the Add property item, select the Add property item (2), type color in order to change the text color (3) and select the desired color from the color picker (4).

11. We added border-bottom property with 2px solid value and border-color property with a value #ccc. This is how you can style any element of the MP3 Player.

12. This is how the player looks like after we styled the title, controls and playlist. Finally, you can save your work and preview it in the browser.