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

[floresr]

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:

[imendez]

Gracias, use el código en una página y funcionó perfecto el audio en Chrome, pero cuando abro la misma página en Explorer 11 me dice "Origen no valido" y no carga el audio. ¿Qué le debo agregar al código?

[floresr]

Hola Idalia,

El problema es que IE 11requiere que abilites antes de reproducir sonidos. Yo pienso que eso es intencional por parte de Microsoft. La verdad que no recomiendo usar IE con Canvas (en verdad que para nada lo recomiendo). El mejor navegador para Canvas es Google Chrome. Otra buena alternativa es Vivaldi browser. 

No conozco alguna solución programática a este problema, pero aqui estaán los pasos a seguir para habilitar la reproducción de sonidos:

1. Abre IE
2. Pica el boton "Tools" 
3. Elige "Intenet Options"
4. Elige la pestaña "Advanced" bajo "Multimedia"
5. Selecciona "Play sounds in webpage"
6. Pica "Apply"
7. Pica "OK"

Tambien es importante verificar que tu archivo es de formato mp3; ya que es el estandar de sonido para la web.

Espero esto te sirva.

Saludos.

M. Ricardo 

[imendez]

Gracias Ricardo.

Ya verifique y si tengo habilitado el Play sounds in webpage. 

Y aún así me sigue marcando "Origen no válido".

[jschofield]

Is there a way to allow scrolling, I have tried adding code to not auto play in hopes that would allow for scrolling but for the life of me I can't get anything to work.

[floresr]

Hi Jack Schofield,

by "scrolling" do you mean scrubbing?

scrub = to move the play head by dragging on it. 

If you truly want scroll bars you can drop the audio into an iframe and make the iframe small enough that the browser will give you scroll bars. The only other way I can think of adding scroll bars is with javascript, but Canvas won't allow javascript. So, the iframe seems the only option.

[jschofield]

Hi M Ricardo Flores

Correct I was referring to scrubbing, I realized that is was a chrome issue in the end.  All other browser allow the user to scrub through the timeline but for some reason Chrome doesn't allow the user to manually scrub through the timeline.

[floresr]

Hi @Jack Schofield,

I use Chrome too and I am able to scrub through the audio. 

it is the horizontal bar between the time stamp and the volume icon:

Maybe something in your Chrome preferences is blocking it?

I hope this helps.

Ricardo 

[jschofield]

Thanks for verify that it works for you, not sure why its not work for me and my team. Both the Canvas app on android and Chrome on windows/mac don't allow us to scrub. Could be my admin have some settings changed at a higher level, just weird it works fine in other browsers.

[david_loebe]

We are working on an intake test and would like to prevent students from manipulating the audio. Is there any way to prevent scrubbing or pausing? Thank you!

[mcarbajalh]

Buen aporte, muchas gracias

[Morrilov]

How do you remove the download control?

[alanabryant]

@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)

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)

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

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):

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!

[MissBlackwidow]

Loving this option but is there a more detailed instructions on how to do this? I'd like to add this in my instructions in quizzes. And I've never coded before. You have uploaded pictures which I can't copy and paste 😞 

[Heather2022]

I am getting an error when viewing the mobile app (iOS). It works fine on the desktop (mac). Any suggestions?

[jay_fermaglich]

This method works great for Chrome and Firefox browsers, but it does not work for Safari as of January 2023.

[JeffreyHeld]

How do you handle these files and URLs in the next semester?  I had a bunch of these inserted in quizzes, but when my course copies to a new semester course, the course number obviously changes.  So does the number of the .mp3 file.  The URL does not change, since it is manually created.  The students cannot access files referenced in past courses.  Apparently, they also cannot access a file that I keep in the "my files" section.  What do you do when the semester changes?  Do you manually update all of the URLs with new course numbers and file numbers?