CODEWITHSUNDEEP
csshtmlhtml5-audio
Kukula Mula
Kukula Mula

Reputation: 1869

HTML5 audio element - change track color

I'm using simplest html5 audio element like this

<audio controls="controls" preload="auto">
    <source src="Happy_Boy_End_Theme.ogg" type="audio/ogg" />
    <source src="podcasts/Happy_Boy_End_Theme.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

this result: enter image description here

I want to

1) change the height of the control - tried these options nothing worked:

<audio controls="controls" preload="auto" height="350px">
<audio controls="controls" preload="auto" style="height: 350px;">
<audio controls="controls" preload="auto" style="height: 50%;">

2) Want to change its built in blue color sliders to red - without "building" my own player.

Upvotes: 1

Views: 4250

Answers (2)

Nitesh Rana
Nitesh Rana

Reputation: 512

Sorry, in WinJS is an HTML5 control and currently there is no way to style by using CSS. Instead if you need a custom styled audio player, you could implement it by writing JavaScript code, or use some 3rd party library.

Upvotes: 3

mayersdesign
mayersdesign

Reputation: 5310

Some styling can be achieved with javascript. See https://serversideup.net/style-the-html-5-audio-element/ for details

Upvotes: -1

Related Questions