Home

Download this help site
(PDF 80MB)

Download

Embedding audio on your site

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. 

 Read more/less
Icon

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 under the Website menu. Your should create a separate Audio folder to organize your files.

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.

 Read more/less

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

  1. Copy and paste the following code to the clipboard.

  2. In your Wild Apricot site, go to Sites pages (under the Website menu) 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 with the name of the MP3 file. If you saved the file to a subdirectory on the Files screen, then include the directory name. For example, if you saved podcast.mp3 to an Audio directory, you would enter:

  9. To have the audio played automatically, change:

    to

    Icon

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

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.

 Read more/less

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

  1. Copy and paste the following code to the clipboard.

  2. In your Wild Apricot site, go to Sites pages (under the Website menu) 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 with the name of the MP3 file. If you saved the file to a subdirectory on the Files screen, then include the directory name. For example, if you saved podcast.mp3 to an Audio directory, you would enter:

  9. Click the Save button.
  10. Click Save to save your changes to the page. 

On this page: 

  • No labels
 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7