Embedding Audio Files

 

To embed audio files in Etudes, you have two options:

Before beginning to work with audio files in Etudes, do the following:
  1. Install the QuickTime Plug-in for your Browser and Enable it.

Mac: QT is integral to OSX. Must download* for Firefox and Chrome Browsers.
PC: Must download* for IE, Firefox, and Chrome Browsers

*Download from Apple Support: http://support.apple.com/kb/DL837

  1. Install the Adobe Flash Player Plug-in for your Browser and Enable it.

    The Flash Player is integral to Chrome.
    For other Browsers, go to the Flash Player Download Page: http://get.adobe.com/flashplayer/

Your students will need Quick Time and Adobe Flash Player to play your audio files. Include this requirement in your Syllabus. 

Creating a Hyperlink to an Audio File

  1. Type a Title for your Audio File and/or Insert an Image for your audio file using the Insert Image Button of the editor:

    my music file
    Listen to this music file

If you don’t have an audio image, you can use the above. Just add the following image URL in the insert image dialog box:
http://etudes.org/wp-content/uploads/image/help/play-mp3.jpg

(For more help, see the tutorial on Inserting Images Using CK Editor).

  1. Make the Title of the audio file and/or the Image a Hyperlink so that when clicked, it will open the audio file in a new browser window.

    To create the hyperlink, follow these steps:

    1. Highlight the text (and image, if you use one) that you’d like to make a hyperlink.
    2. Click on the hyperlink icon in the editor.
    3. Highlight the text or image that you wish to make a Hyperlink.
      hyperlink icon
  2. Enter the URL of the audio file that you want to link out to. Test your publisher’s audio file first in a separate browser window to make sure it plays, and poses no restrictions.
     

add url to file

  1. Click on OK.
  2. The image and/or text in your editor will now be a hot link. You can test it in the Student or Preview Views.

[rule_top]

Embedding an Audio File in the Etudes Editor

  1. Create your Embed Code:

a. Locate and copy the URL of the audio file… It will now be on your Clipboard.

Note: If your audio file does not have a URL (i.e. it’s a sound file on your computer), you can upload it to Resources where Etudes will assign it a URL. Then, copy the URL from Etudes and proceed as directed below. Remember that your files cannot be larger than 100 MB.

b. Next, Insert the URL into the following HTML 5 embed code for playing audio on the web:

<audio controls>
<source src=”Paste your Audio File URL here” type=”audio/mpeg”>
</audio>

Note: Copy the audio controls code from this text file to avoid copying styles from this website.

c. Next, Copy the embed code you just created to your Clipboard.

  1. Place your cursor in your content in the Editor’s Text Window where you would like to insert the Audio Player.
  2. Click on the Insert Media Icon embed media icon in the editor’s toolbar.
  3. An “Embed Media Dialog” box will appear. Paste the Embed Code of your Audio File and click on OK.

embed media dialog box

  1. Preview your content and test the player. This is how it will look in your content. 

[rule_top]