4

I want to make a style on html5 audio player.

    <audio id="player" controls="controls">
        <source src="song.ogg" type="audio/ogg" /> 
        <!-- using mozilla firefox -->
        Your browser does not support HTML5 audio. Please upgrade your browser.
    </audio>

enter image description here

Is it possible to put css style on the html5 generic audio player timeline?

-thanks.

user1844626
  • 1,838
  • 7
  • 24
  • 37
  • I found a similar but more general question [here](http://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag). It looks like none of the answers are helpful for what you are looking for and just a lot of repeats of what has already been said here. – user2350838 Jun 26 '13 at 06:23
  • I styled that border-radius and background color in the picture by applying css on audio tag. but can't do that on timeline,thats what I want to do.is that possible to make style on timeline only by css (not javascript player)? – user1844626 Jun 30 '13 at 01:28
  • linking to cross browser info based on this question by @jessegibbons http://advprog.blogspot.co.uk/2013/07/styling-html-media-inner-workings.html – Mousey Aug 27 '15 at 17:44

2 Answers2

2

The following code, when pasted into Chrome's developer console, reveals a document fragment that describes the audio element's structure:

var aud = document.createElement('audio');
document.querySelector('body').appendChild(aud);
aud.controls = true;

Going to the chrome debugger's elements tab reveals this document fragment:

<div>
 <div>
  <div>
   <input type="button">
   <input type="range" precision="float" max="0">
   <div style="display: none;">0:00</div>
   <div>0:00</div>
   <input type="button">
   <input type="range" precision="float" max="1" style="display: none;">
   <input type="button" style="display: none;">
   <input type="button" style="display: none;">
  </div>
 </div>
</div>

If there was a way to change the style of the time display or the play/pause button without redefining the inner structure(i.e. shadow DOM), it would be through that document fragment. There is neither a function nor an attribute that suggests the ability to access said document fragment.

user2350838
  • 139
  • 6
  • but in firefox,input type 'range' is appeared as textbox, isn't looked like the chrome or opera range. but the html audio timeline still appeared in firefox,thats not like textbox.so isn't there any way to make css style on generic html5 player timeline ? – user1844626 Jul 03 '13 at 18:29
  • You have just proven that media controllers are not uniform and by definition, not generic. There is no HTML5/CSS3 standard for styling the inner workings of a media element yet, but I have done some research and will show you how it is done if I can succeed. Unfortunately, I can only discover these things from the Shadow DOM, so until further notice, only Chrome, Opera and Shadow DOM-supporting browsers can be included. – user2350838 Jul 07 '13 at 05:27
  • 2
    Please read my blog post carefully and tell me what you think. I know it does not give you a way to style a generic media controller, but I hope it explains why that is not possible without some custom HTML and how you would figure it out if it were possible. http://advprog.blogspot.com/2013/07/styling-html-media-inner-workings.html – user2350838 Jul 07 '13 at 15:35
  • thanks for your blog link.that solves for chrome.but what about opera ? I tried audio::-o-media-controls-timeline{background-color:green;width:800px;} but that doesn't work (where -webkit-media-controls-timeline worked for chrome). and I'm still getting trouble with firefox.and since input type 'range' doesn't support firefox well,so I can't create my own player with timeline.so isn't there any way to style that timline for firefox ? – user1844626 Jul 10 '13 at 22:04
  • I tested it just now, and it works on the latest version of opera(15.0+) because opera is now a webkit browser. It also should work with Safari because Safari is based on Webkit. I know it works with Maxthon, which is a Chinese webkit browser. That's half of the browsers you usually need to worry about, plus Maxthon. – user2350838 Jul 13 '13 at 04:28
  • A test on my family's macintosh shows that this method is only supported by Google Chrome and Maxthon for mac, not Safari or Opera. – user2350838 Jul 13 '13 at 04:54
  • Ic,so it means other almost all major browsers supports styling timeline except mozilla firefox. so I would have to find a trick for firefox. but I'm accepting your answer.thanks for your try. – user1844626 Jul 13 '13 at 21:15
1

Youtube does their own HTML5 video timeline in case someone wants to "try something new"(or just hack an easy way to download some of their ad-free WebM videos), so I know it is possible. I'm guessing you would need to do it like this:

 <audio id="player" ><!--notice how you get rid of the controls -->
        <source src="song.ogg" type="audio/ogg" /> <!-- using mozilla firefox -->
        Your browser does not support HTML5 audio. Please upgrade your browser.
    </audio>

If you have the audio player hidden, you can add Event Listeners to update the status/progress. You will definitely want to use at least onTimeUpdate

Meanwhile, you can make your own DOM controller with a square tags with border-radius = (width/2) for a circle, or just use a . I suggest you look into the Shadow DOM for a way to hide functionality from both users and other scripts. If you want to just show the user how far the music has played and not allow the user to seek, use a tag or a tag. Otherwise, you can use an tag and stylize that. Don't forget to add an onInput handler to skip through the track.

edit

I did not see that image. You must have uploaded it while I was answering. I would suggest you use a filter, but that might not work on anything but images. Try making a div transparent over it and allowing the user to click through it

edit #2

It turns out that background-color kinda tints the player in Chrome(only the audio player) depending on the background color, but the play time color does not change color with either background-color or color. You can get full control and uniformity over your style with a custom player, but that would mean extra work for you. I hope that my answers were helpful.

Community
  • 1
  • 1
user2350838
  • 139
  • 6
  • is it possible to use just css on the generic player (player is not hidden) ? – user1844626 Jun 16 '13 at 03:10
  • sorry,thats not what I wanted. – user1844626 Jun 16 '13 at 03:21
  • I keep drawing the wrong conclusion :~| That last edit is the best I could do without some deep research. – user2350838 Jun 16 '13 at 03:29
  • Since the players are different between the browsers, there is no standard way to style the text and scroll view and keep the original player. You don't even have that time pop up in Chrome on hover. – user2350838 Jun 16 '13 at 03:40
  • 1
    but the timeline is appeared in firefox,chrome,opera. is there any way to style the timeline of generic html5 audio player ? – user1844626 Jun 17 '13 at 20:10
  • Chrome has the audio element GUI in a [document fragment](http://www.w3.org/TR/2012/WD-dom-20121206/#interface-documentfragment). If you could get to the stuff in the document fragment, you could style it in Chrome. I don't know about the other browsers. – user2350838 Jun 26 '13 at 05:59