Embedding audio

You can embed audio such as music or a podcast on your Wild Apricot site. Visitors to your site can listen to it without needing an external player like QuickTime or Windows Media Player.

Uploading your audio

The first step in embedding audio on your site is to upload your audio file to your Wild Apricot account.

Uploaded audio files will count against your file upload limit. You can also link to audio files stored on another site – you just need to know the URL of the file.

To upload your audio file, go to the Files screen by clicking Files within the Website module. You should create a separate Audio folder to organize your files, then upload your audio file to the folder.

Adding the code to embed the audio

Now that you've uploaded your audio file and copied its location, you add HTML code to display a player and play the file. You have two choices for the embed code:

• code that works for all browsers but requires the visitor to install a browser plugin to see the player and play the audio
• code that does not require a plugin but does not work on Internet Explorer 8

Code that requires a browser plugin

The following embed code may require visitors to your site may be required to install browser-specific plugins to see the player and play the audio.

To add the code to embed the audio, follow these steps:

1. Copy and paste the following code to the clipboard.
   <embed height="42" type="audio/mpeg" width="300" src="MP3_FILE_URL" autostart="false" loop="false" controller="true" bgcolor="#FFFFFF">
2. In your Wild Apricot site, go to Sites pages (within the Website module) and begin editing the site page or page template where you want to embed the audio.
3. Click the Gadgets icon to display the list of available gadgets.
4. Drag the custom HTML gadget from the Gadget list, and drop it on the desired location.
   When a layout cell or placeholder is empty, a Drop gadget or layout here prompt will be displayed. When you drag a gadget over an empty layout cell or placeholder, it turns green, indicating that you can drop the gadget there. When you drag a gadget above or below a layout, a prompt will appear indicating that you can drop the gadget before or after the layout.
5. After you have inserted the gadget, hover over it and click the Settings icon.
6. Within the gadget settings on the left, click the Edit code button.
   
7. In the dialog that appears, paste the embed code for the audio.
8. Within the pasted code, replace MP3_FILE_URL with the name and location of the MP3 file, beginning with the Resources folder. If you saved the file to a subdirectory on the Files screen, then include the directory name after the Resources folder. For example, if you saved podcast.mp3 to an Audio directory, you would enter:
   "Resources/audio/podcast.mp3"
9. To have the audio played automatically, change:
   autostart="false"
   to
   autostart="true"
   On some browsers, the autostart setting may be ignored.
10. Click the Save button.
11. Click the Save button to save your changes to the page.

Instead of creating a custom HTML gadget to embed the audio, you can use the Snippet feature to embed the audio within a content gadget. For more information on using the Snippet feature, see Inserting and modifying HTML or JavaScript.

Code that does not require a browser plugin

The following embed code does not require a browser plugin to be installed, but does not work on Internet Explorer 8.

To add the code to embed the audio, follow these steps:

1. Copy and paste the following code to the clipboard.
   <audio controls="controls"> <source src="MP3_FILE_URL"></audio>
2. In your Wild Apricot site, go to Sites pages (within the Website module) and begin editing the site page or page template where you want to embed the audio.
3. Click the Gadgets icon to display the list of available gadgets.
4. Drag the custom HTML gadget you want to insert from the Gadget list, and drop it on the desired location.
5. After you have inserted the gadget, hover over it and click the Settings icon.
6. Within the gadget settings on the left, click the Edit code button.
7. In the dialog that appears, paste the embed code for the audio.
8. Within the pasted code, replace MP3_FILE_URL with the name of the MP3 file, beginning with the Resources folder. If you saved the file to a subdirectory on the Files screen, then include the directory name after the Resources folder. For example, if you saved podcast.mp3 to an Audio directory, you would enter:
   "Resources/audio/podcast.mp3"
9. Click the Save button.
10. Click Save to save your changes to the page.