HTML5 MP3 Player Manual

Make your website sound amazing!

Here, you can find some detailed and useful information about the HTML5 MP3 Player extension. We've summarized the features that are included and also added some functional tutorials and videos, that will help you learn more about the extension.


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.


  1. 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.



  1. 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).

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

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

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

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

  1. 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.

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

  1. 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).

  1. 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.

  1. 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.



Lubov Cholakova

Lubov CholakovaLubov has been with DMXzone for 8 years now, contributing to the Content and Sales departments. She is bringing high quality content in the form of daily blog updates, reviews, tutorials, news, newsletters,update emails and extensions' manuals. If you have a product that needs publicity or any other questions about the entire DMXzone community, she is the one you can contact.

See All Postings From Lubov Cholakova >>

Comments

Be the first to write a comment

You must me logged in to write a comment.