1

I am using below code to display the audio in the browser

<audio  controls="controls" id="audio" width="300" height="300" src="<?='audios/remix.mp3'?>" > </audio>

The height of the audio tag is not adjusting correctly, can anyone tell me how to increase the height of the audio tag.

4 Answers 4

3

You can use style="height: 300px;", however, in Firefox, this just renders as a large blank space above the controls. (However, clicking in the space makes the audio play, as would be expected.)

3
  • is there any possible to increase the height without any blank space
    – lalith458
    Oct 11, 2013 at 10:03
  • 2
    This is a correct answer to the question asked. Changing the appearance of the controls is a different issue. It can be addressed by not using the controls attribute and setting up your own controls, which need to be JavaScript-driven. Oct 11, 2013 at 10:28
  • @a3nm setting the height to 300px pulled down the audio control down the page and didn't affect its over all height at all in my case. Jun 8, 2022 at 21:53
1

There is not such attribute for the audio tag.

3
  • k.. can u tell me which attribute we can use for audio tag
    – lalith458
    Oct 11, 2013 at 10:00
  • For IE and chrome <audio> and for firefox embed audio object?
    – nkmol
    Oct 11, 2013 at 10:03
  • You can try out with a div tag and style option. But the video tag doesn't have this attribute, only the video tag.
    – Jonysuise
    Oct 11, 2013 at 10:05
-1

It is not possible to style an HTML5 <audio>.

But it has a few events that you can run functions off of and a source tag which contains the path to the song you want to play along with the type of the song.

<audio id="song" width="300" height="32" ontimeupdate="updateTime()"><source src="path/to/music.mp3" type="audio/mp3" /></audio>    
Your browser does not support the audio tag.

You may use JavaScript + CSS to do a workaround.

Here is a tutorial on How To Style the HTML 5 Audio Player

1
  • It is possible to style an audio element, just not with HTML attributes but with CSS. On the other hand, styling only affects things like the dimensions of the box, border, etc. Changing the appearance of the controls is something quite different (and the tutorial linked to is a good start). Oct 11, 2013 at 11:18
-1

I do not think there is a tag height for that. You may want to double check this quick html5 audio reference:

https://bytutorial.com/tutorials/html5/html5-audio-control

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.