Jump to content
jpezz

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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:

36882336_FireShotCapture017--file____home_john_RR_Club_Telegraph_Web_Page_Pages_Code_Sounds_html.png.348e772f2ef70496450f784d866fc5c3.png

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 by jpezz

Share this post


Link to post
Share on other sites

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"

  • Like 1

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×