Putting Audio on Site
Posted by , Last modified by Paul Steinbrueck on 09 October 2014 12:36 PM

Please read our help pages on Audio and Video Formats and Uploading Media Files, before putting audio on your website.

If you prefer to learn by watching, watch this video tutorial:


If you prefer to follow written instructions, here you go:

Once you have uploaded the desired audio files in the Asset Manager, you are able to put those files on your web pages. Click to edit the page you want to add the audio to and then, in the page editor, select where you would like the audio player to be located. (Note: You can move the audio player after you have inserted it onto the page.)  Then click on the “Insert / edit embedded media” icon. In the window that comes up, select the type of file you would like to add in the “Type “ section select. You have five options to choose from: Flash, Quicktime, Shockwave, Windows Media, and Real Media (Figure 1). 

(Figure 1)

Next, click the folder icon next to the “File/URL” field (Figure 2) to access your Asset Manager. In the Asset Manager select the desired audio file and click the “OK” button to return to the Media dialog box.

(Figure 2)

In the “Dimensions” option you can enter the width and height (in pixels) you want the media player to be (Figure 3). A good size for audio is 300 x 35.

Note: Clicking the “Constrain proportions” will link the width and height. That way if you change one, the other is changed as well automatically and the perportions of the media player will stay the same. This is especially helpful when dealing with video.

(Figure 3)

Note: The “Advanced” section under the "Advanced" tab is the same under every file type, while the “Options” section below the “Advanced” section will change according to file type that you choose.

In the “Advanced” section you can adjust the following:

    1. ID – The ID is the name of the file that is displayed within the coding. You may be asking why you would need to give your file an ID when you don’t even see the code. You don’t have to, but if you have deaf visitors, the program they use to know when there is audio on the site will read this ID and show them the ID. The ID can help them know what the audio is.

    1. Name – This is the title of the audio file that you are uploading (Figure 4).

      (Figure 4)

    1. Align – This option will NOT control how the media player aligns within the page but how it aligns with the text around it. There are 4 options:

Top: This will align the media player at the top of the text.

Right: This will align the media player to the right side of the text.

Bottom: This will align the text to the bottom the media player

Left: This will align the media player to the left side of the text.

    1. Background – This controls the background color behind the media player. Since we are using the player for audio you will not be able to see the background color. (Figure 5)

      (Figure 5)

  1. V-Space / H – Space – HSPACE sets the horizontal space (buffer) between the media player and surrounding text. VSPACE sets the vertical space (buffer) between the media player and surrounding text (Figure 6).

    (Figure 6)

The second section under the "Advanced" tab is the “options” section. The options under this section will change depending on the type of file you selected under the “Type” section under the General tab.

The most common options under the “options” section are (Figure 7) :

    1. Loop –Checking this will make your file restart once it is finished. If check the audio will keep replaying until the visitor leaves that page or manually stops the audio.
    2. Auto Play – Checking this option will make your file start media playing as soon as the page opens. Tip: The Auto Play feature can be helpful when you have only one media file playing on a page. If you have more than one media file on a page, be careful to either have only one or none of the media files Auto Play. Otherwise, multiple files will start playing at the same time.
    3. Show Menu – Checking this option will show the menu or controls for the media player that the file is playing in. This allows the visitors to the page to control the media player to stop, pause, start, fast-foward or rewind the audio as well as control the volume. Tip: Most visitors like to be able to control media on a page. Having the controls displayed for the media player can make the visitor's experience more enjoyable.

      (Figure 7)

    – Other options are available under the “options” section; however, we recommend that you not change those options unless you are familiar with them.

Once you have selected the settings you wish to use, click the “Insert” button . You should now see the audio player in the page editor. Click the “Save” icon in the top, left corner of the page editor.

*Tip: You can quickly edit your media file by right clicking on the file within your page and selecting “Edit embedded media”.