eLearning at Texas Christian University

Embedding Audio Files (mp3, wav, ogg)

This method describes how to embed audio files to be played directly from a content item on the Pearson LearningStudio platform. This method is easy to apply and it is stable in that all end users on all browsers and all operating systems will get the same experience. The audio files can live directly in the file manager. This method involves using the HTML tab of the Visual Editor to insert code.

There are three supported video formats for the HTML5 <audio> tag at this time: mp3, wav, and ogg. Mp3 will be used in this example.

1. The .mp3 files should ideally be living anywhere in the file manager of the course. To upload go to Course Home > Author, then select File Manager. Click Upload files. Choose/browse for your mp3 file, then click Upload file.

2. If you place it in the main root of the file manager, the path will be: /CurrentCourse/filename.mp3 for each of these files.

3. Open the content item where you want to display the player for the mp3 file, and click on the Visual Editor's HTML tab in the lower left.

4. Paste the code below into the editor window. Make sure to change the three items in red to the correct /CurrentCourse/ paths of where you uploaded the corresponding .mp3 files. You will need to do this once for every mp3 file you want to embed. Be sure to paste the embed code in at whatever point you want the player for the mp3 file to appear. You may use this code multiple times on a page if needed.

<audio controls>
<source src="/CurrentCourse/filename.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

5. Save the item and view it. The following player should appear wherever you inserted the code:

An additional format of the audio may be uploaded and called by adding another source line of code, <source src="filename.wav" type="audio/wav"> for example. The browser will choose the compatible file to play.

Learn more about HTML5 audio at the w3schools.com HTML5 audio page.

Documentation
Thu, 06/04/2009 - 16:56 — GregT Pearson eCollege/ Edited by Kerrie Conover 06/05/12 TCU/ Edited by Brian Elmore 03/15/13 TCU.