music-2When you are designing a website, there are times when you may need to add an audio player. For instance a band website would not be complete without some examples if the music.

In this tutorial we will show you how to add an audio player to your website using the free Music Add-On available in the Concrete5 Marketplace. This addon provides a simple way to play music on your website.

How to Add Audio to Your Website:

  1. Login to your Concrete5 Dashboard.
  2. Roll your mouse over the Dashboard button and then click add-ons.
  3. In the keyword field type 'music' then click the search button.
  4. You will see the Music Add-on listed, click it.
  5. On the bottom right click the blue Download & Install button on the bottom right.

    You will see a notification stating "The package was successfully installed."
  6. Click the Return button on the bottom right, then click the Return to Website button on the top left.
  7. Using the menu, navigate to the page you want to add music to, and click the Edit button onthe top left.
  8. Now select the area you want to add the music player block to, and click +Add Block. In my tests I want the music player below the Header image, so I selected Add To Header Image.
  9. Now scroll down and click or search and select Music.

    On the Add Html5 Audio menu, you can add file with extensions of .mp3. To add an .mp3 file click Add new file
  10. Then using the file manager click the Browse button, locate and select the music file on your computer and click the Open button. 
  11. Click the Upload File button. After the file upload completes, an Upload complete menu wil come up and display basic audio properties of the files. 
  12. Select the green Continue button on the top right.
  13. In the File Manager menu click the check box next to the audio file you uploaded, and on the top click the drop-down box titled **With Selected, and click Choose.
    OptionDescription
    Skin Choose from different skins. Skins change the look and style of the player. Options are: easy_glaze, easy_glaze_small, lila, lila_info, old, old_noborder, position_blue, silk, silk_button, standard, stuttgart, wooden. In my tests I chose old.
    Width You can enter a specific width for the player in pixels. Default is 120.
    Height You can enter a specific height for the player in pixels. Default is 60. 
    Window Mode Set how you want the player to display, choose from window, opaque, or transparent. In my tests, changing this did not affect the look of the player.
    Auto Load MP3 Files When this is selected the audio file will pre-load in yor browser, so when you hit play it has already buffered.
    Autostart This will cause the audio file to play automatically when the page loads.
    Shuffle This will randomly play the songs. 
    Repeat This will cause the song to play over and over agian. 

  14. Click the blue Add+ button on the bottom right.
  15. Roll your mouse over Editing, and select Publish My Edits. You will now see the music player on your Concrete5 website.

    Congratulations, now you know how to add a music player to your Concrete5 website, using the free Music Add-on!

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.