Is there any way to control the size of the audio icon?

[jpezz]

I'm a newbie to the audio command and I find it takes too much horizontal space in a table cell for the icon (if that's what you call it?). Is there any way to set the size so it is smaller or bigger?

 

While I started writing HTML back in the early '90s, my knowledge and use of HTML hasn't progressed much beyond that. But I have figured out how to do lots of things only by looking at other HTML and copying it or by searching the web. But I see nothing on this topic.

[Ingolme]

I'm not sure what an audio icon is. You should go through the HTML and CSS tutorials on W3Schools and relearn it all.

[jpezz]

20 hours ago, Ingolme said:

I'm not sure what an audio icon is. You should go through the HTML and CSS tutorials on W3Schools and relearn it all.

If there is anything in W3 that answered my question, I wouldn't be posting. I am talking about this item:

It is automatically inserted with this code. Check this link:

https://www.w3schools.com/html/html5_audio.asp then go to the "Try it yourself" page.

Nothing is said or shown about the size. I want to make it smaller. That W3 page has nothing about any possible options or settings. I can't find any other site that says anything useful although one site mentioned it was like the IMG command (but I can't seem to set the size like you can with an image).

Thanks for at least replying.

 

Edited February 8, 2019 by jpezz

[dsonesuk]

The controls are all different in size and icons depending on browser used. You can create customized controls using images, css, but this will require you recreate each custom button with JavaScript functions to reproduce same results the browser controls provide. google "html5 video custom controls css"

[jpezz]

On 2/8/2019 at 5:38 PM, dsonesuk said:

The controls are all different in size and icons depending on browser used. You can create customized controls using images, css, but this will require you recreate each custom button with JavaScript functions to reproduce same results the browser controls provide. google "html5 video custom controls css"

Great help! I googled what you said except replaced "video" with "audio" and eventually found this page

https://stackoverflow.com/questions/5635365/html-5-audio-tag-width

and this answer which worked perfectly! Can't get any simpler than that.

<audio controls style="width: 200px;">
   <source src="http://somewhere.mp3" type="audio/mpeg">
</audio>