Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Participant

How can I modify the audio player so it is smaller?

I was wondering if anyone knows how to have this audio player only display the bottom part. I do not want the thing with a music note to display. I am including the code that this uses.

Audio Player Example.png

<span style="font-size: 12pt;">&nbsp; &nbsp; <iframe style="width: 300px; height: 15rem; display: inline-block;" title="Audio player for Smith is from America - slow" data-media-type="audio" src="" data-media-id="m-6gs48aCfStym3iks48NKqzfU22w9VuaF"></iframe>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<iframe style="width: 300px; height: 15rem;" title="Audio player for Smith is from America" data-media-type="audio" src="" data-media-id="m-3dMXfzPoaPNvaEdVAWL5NZsZimBvJs6N"></iframe>
</span> &nbsp;


0 Kudos
2 Replies
Community Coach
Community Coach

Hello there, @boozerl ...

I see what you mean.  In my own Canvas sandbox course, I tried recording a bit of audio on a content page.  It inserted the audio just like what you have pictured.  The "rem" number for my height was 14.25 (compared to your 15).  I tried modifying the HTML to change 14.25 to a lower number, but when I did that, I saw that it was cutting off the bottom part of the gray box which included the controls to play the audio.  So, it seems like if you decrease the height ("rem" number), it's taking it off the bottom part and not scaling...which makes sense, I think, because it is a specific height and width.

I'm not sure if there are any other ways to get rid of the note above the player controls.  You might try reaching out to Canvas Support to see what they say.  Then, come back here to let us know the outcome of that conversation.  How do I contact Canvas Support? - Instructure Community

Hope this helps a bit.

Community Contributor


A workaround would be using HTML <audio> tag

It will look like this


You can follow these steps

1. Record and embed the recording to the editor

2. Right-click on the player then select "Copy audio address"

(Alternatively, you can also upload the audio file into "Files" then use that file link or even using an audio url hosted elsewhere)


3. Open the editor source-code (click on </> button)

4. Insert the link into this tag


    <audio src="https://YOUR_LINK_HERE/XYZ.mp4" controls="controls">


However, this audio player doesn't have a playback speed control

Alternatively, if you have access to upload custom CSS file you can also apply styling to .audio-player css class. E.g. 

.audio-player {
    height: 80px !important;