make style on html5 audio player timeline

Question

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>

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

-thanks.

Answer 1

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.