Canvas audio link size

[rashidmostafa]

I am driving myself mad looking for a way to reduce the size of the instructure_audio_link instructure_file_link graphic.  Or to replace it with a button or icon.  New to Canvas so apologise for asking a basic question, but I can't find the answer.

Just to be specific, here's what I am doing.  In a content page I am editing I add a link to a local mp3 file by highlighting a word and navigating to the mp3 file I need.  I then get two links, on that invokes my machine's sound application and the other that uses Canvas' inbuilt sound bar.  The sound bar looks great, but the big square link with the play arrow on it takes up too much room.  And I don't want the users to use their own sound app (Media Player or Rhythm Box or such) to listen to the sound.

Any kind and clever people with help out there?

Rashid

[Stef_retired]

 @rashidmostafa ​, I don't have an answer to your question. However, this seems like a topic better suited to the folks in the Canvas Developers​ space. Would you mind if I moved it there? (I also added some tags to enhance the question's prominence in search results.)

[rashidmostafa]

That would be great. Many thanks,

Rashid

[marinated_pork]

 @rashidmostafa ​,

To change the size of the box around the play button, target the <span> tag with the below CSS selector and input your desire width and height:

span.media_comment_thumbnail {

  width: <width that you want> !important;

  height: <height that you want> !important;

}

Then change height and width of the <span> tag that contains the play arrow (probably the same height of the box that holds the arrow), then adjust the size arrow size with the background-size property and align it by adjusting the background-position property:

span.media_comment_thumbnail_play_button {

  width: <width that you want> !important;

  height: <height that you want> !important;

  background-size: <size of arrow in pixels>;

  background-position: <position of play arrow in pixels>;

}

Right now, I have the play button and play button container at ~50% the size with the below CSS:

span.media_comment_thumbnail {

  width: 50px !important;

  height: 50px !important;

}

span.media_comment_thumbnail_play_button {

  height: 50px !important;

  width: 50px !important;

  background-size: 75px;

  background-position: 65px;

}

I hope that is helpful.

Matt

[rashidmostafa]

Many, many thanks.  Perfect solution.

Rashid

[tsd]

hi. 

i've got the finished html code, but i'm not sure where to drop it in the html editor. 

could you to tell me where it goes? what it replaces/overrides in the existing code?

ty!

[benjamr]

Regular Embed Is Too Big

Use the HTML5 <audio> tag instead of a regular Embed to get a slimmer profile audio player.

Problem

This is what a regular audio embed looks like before the user clicks on it. It is very large.

Solution

Use the <audio> instead to have an audio player that looks like this:

Steps

1. First embed the file normally from the sidebar in the Rich Content Editor (which gives you the giant thumbnail seen in the "Regular Embed" section.
   
2. Switch to the HTML Editor. You will see that the code for your embed is very long. Find the part that says "href=":
   <a id="media_comment_m-5SfgDmhBqkHMZtLHguQ9GtrcnN62b"
   class="instructure_file_link instructure_audio_link"
   title="a-alba.mp3"
   href="https://random.instructure.com/courses/160/files/1013202/download?wrap=1"
   data-api-endpoint="https://random.instructure.com/api/v1/courses/160/files/1013202"
   data-api-returntype="File">a-alba.mp3</a>
3. Copy URL from the href from after the ".com" and before the "?":
   /courses/160/files/1013202/download
4. Paste your URL from Step 3 into the code below:
   <audio controls="controls"><source src="put your url here" type="audio/mpeg" /></audio>

Finished HTML code

<audio controls="controls"><source src="/courses/160/files/1013202/download" type="audio/mpeg" /></audio>

Enjoy a slimmer profile audio player!

[dearne_willing]

Thank you for this solution! 

The code works a wonder. My audio profile player is a rounded rectangle, with 3 dots to download instead of the big square.

[benjamr]

Hi Dearne,

I'm glad the solution is still working! Thanks for your response.

Best regards,

Ben

[dearne_willing]

Hi Ben benjamr

Is there a way to tweak the code so there is no download option?

Regards

Dearne

[benjamr]

Hi  @dearne_willing ‌,

In short, there is no way to remove the download button.

Each browser displays the audio player differently. On Safari on MacOSX there is no button for downloading, but you can download from the right-click menu.

Safari right-click menu example:

This article says you can customize some things about the audio player but cannot change how the buttons appear:

You can style the default controls with properties that affect the block as a single unit, so for example you can give it a border and border-radius, padding, margin, etc. You can't however style the individual components inside the audio player (e.g. change the button size or icons, change the font, etc.), and the controls are different across the different browsers.

: The Embed Audio element - HTML: HyperText Markup Language | MDN 

So, short of programming a new audio player yourself using Javascript and CSS, your stuck with whatever buttons and options each browser gives you.

Best regards,

Ben

[tsd]

hi. i've followed the steps and have the new html code, but i don't know where it goes? what does it replace in the current html code?

thanks!