Adding Audio to your Concrete5 Website

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

    Option	Description
    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!