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

[boozerl]

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.

<p>
<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="https://santarosa.instructure.com/media_objects_iframe/m-6gs48aCfStym3iks48NKqzfU22w9VuaF?type=audio" 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="https://santarosa.instructure.com/media_objects_iframe/m-3dMXfzPoaPNvaEdVAWL5NZsZimBvJs6N?type=audio" data-media-id="m-3dMXfzPoaPNvaEdVAWL5NZsZimBvJs6N"></iframe>
</span> &nbsp;
</p>

[Chris_Hofer]

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.

[jerry_nguyen]

@boozerl 

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">
    </audio>

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;
}

[JOSEPHMARX]

Unfortunately, the html audio player has either been bricked in Canvas or is not supported by current iterations of Chrome. : (. Big ol' media player it is then, for now...

[williak21]

😭

[jerry_nguyen]

@JOSEPHMARX 

The html audio tag still works for me. Check your browser console log (F12) to see if there are any errors

[williak21]

it looks like it was a temporary issue! I tried it again and it has been working consistently. Much better option - thank you!!

[kbarton]

I have only been able to do this using uploads to Studio/ARC Media, switching to html edit mode </> on the page you are editing. Entering Studio, selecting the audio you want, then Share Media>Create Public Links and then copying, pasting and modifying the iframe embed code as indicated below using the width and height dimensions as indicated, resulting in a much more compact player for audio and a concise code.

Inserting files stored within the course and modifying the height results in not being able to see the controls. I also tried some standard audio embed codes, but since the links don't directly reference an mp3 file, standard html audio codes do not work.

<iframe width="330px" height="80px" allowfullscreen="true" allow="autoplay *" title="2-02_blue_in_green" src="https://thomasu.instructuremedia.com/embed/34effcfd-e2d2-4995-9faf-f76b5a7d8035" frameborder="0"></iframe>