cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
floresr
Community Contributor

How to embed audio into Canvas using the <audio> tag

Embed Audio into a Canvas Page

 

 

The <audio> tag allows you to upload audio files into the “FILES” folder in Canvas, and then make that audio playable in a Canvas page.

 

Note: The best file type for the web is .mp3. other file types will be troublesome if not impossible to use. So, make sure your audio file is in .mp3 format.

 

Here is the code (edit the green text before you paste it into Canvas. It's easier to do it in this order unless you are comfortable editing HTML):

 

 

<div class="description user_content student-version">

</p>

<p>Press the play button to listen to Ray Charles</p>

</p>

<audio src="/courses/18876/files/1130201/download" controls="controls"Your browser does not support the audio file.</audio>

</p>

</p>

</div>

 

When you place any kind of file in your “FILES’ folder in Canvas, it is assigned a file number. There is a couple of ways to find out that number. The easiest is to right-click the file and “copy URL”. Somewhere in the URL you will see the file number or ID. 

 

In addition to providing your own audio clips, the only other thing you will need to edit the green text items in the code to reflect the file ID numbers of your sound files in your own courses. After you change those, you can copy and paste the code into your Canvas page.

 

 

My course ID is # 18876 (each course you have will have its own ID. You can get the ID by looking in the URL)

My File ID # 1130201 (this the number of this particular sound file in my Canvas course. Your files will have their own numbers as well)

 

After you successfully paste and save the edited code, you will see something like this in your page:

Demo of &lt;audio&gt; with controls

 

 

 

12 Replies
mcarbajalh
Community Participant

Buen aporte, muchas gracias Smiley Happy

Morrilov
Community Member

How do you remove the download control?

@Morrilov I work in a language school and have been working on a fix that will embed audio without any controls beyond a 'play' button for a listening test. Here's my fix:

 

1. Upload your mp3 to 'Files'

2. Create an html file with the following code (changing the sections in brackets to your own info - don't change any other parts of the file path)

Screen Shot 2020-08-28 at 11.54.15 am.png

 

3. Upload this HTML file to 'Files' (ideally in the same directory or folder as your mp3 file)

4. Embed your HTML file as an iframe on your Canvas page with the following code in the HTML editor (changing the sections in brackets to your own info)

Screen Shot 2020-08-28 at 11.58.35 am.png

5. Voila! You should now have a page with your audio embedded that looks like this (my page was named 'Audio test'):

Screen Shot 2020-08-28 at 12.01.07 pm.png

NOTES:

- The section of the code reading "this.disabled=true" makes the button disable after the first time it is clicked. Removing this part of the code will make it clickable more than once. 

- The button only allows the audio to play, not pause. To add a pause button, add this to the code (note that the above function "this.disable=true" has been removed):

Screen Shot 2020-08-28 at 12.08.30 pm.png

There are other ways of coding this to allow the one button to both play and pause, but for my purposes it was important to separate the two functions out.

 

Hope this helps someone!