Inserted Audio taking up too much visible space...

[bellis4]

I'm working with some teachers on using audio in their course. When I insert audio it takes up this LARGE space on the screen (see image). Is there any way to remove the useless preview section or provide a more streamlined/professional look to the audio player?

[rpm]

Seconding this! It looks ridiculous. Ideally include the option of a preview that does not disrupt line spacing at all when attempted in-line.

[julian_ebeli]

The media player is so large because it is a video player, so just bear that in mind, this hack assumes that there is an audio file attached. I don't have a full solution. Here is my doodling with it.

The shape of the media player is determined by the size of the iframe it plays in. The default height is 14.5rem, you can change this to 50px and squash the box

You have to 'not show' the 'music' image. The <video> tag has an audio-player class. you can set the background-image attribute to "" or delete the attribute.

You can bring the player into the smaller frame by adding these attributes to the <div.dVRGv_crZr> the player lives in

 {

top: 0px;
margin-top: 5px;

}

I end up with

Once you collect all the css changes into  a file you can add this css to the theme of a subaccount. Again this will alter/clobber all the video players in that subaccount, so you have to be sure you won't be breaking other things.

If you want a mini-media player you'll probably have to run it through the canvas ideas process.

Hope this helps

[rpm]

Thank you for taking the time to share these suggestions. Although I have not found where to add custom CSS for a course yet (my role is teaching staff), I am getting close.

For the time being, I am creating pages using the HTML editor and simply adding an audio tag thus:

<audio src="" controls="controls">Audio not supported by browser</audio>

While it is laborious to paste in the download urls obtained by browsing files, the end result is good. And, interesting to note, Canvas normalizes the src value upon save in page edit view.

[julian_ebeli]

Hi rpm. You can't add custom css to a course. You can add it to a subaccount via its themes. This applies the customisation to all the course in the subaccount, which may or may not be desired.