Question

I have an audio tag where the controls are not initially shown, and display them if the user clicks on a link like this:

var audio = document.getElementById(audioId);
if (audio.paused) {
    audio.src = clip;
    audio.play();
    audio.setAttribute("controls", "controls");
}
else {
    audio.removeAttribute("controls");
    audio.pause();
    audio.currentTime = 0;
}

clip is the url of the audio file to play.

The audio is like this:

<audio id="audio1"></audio>

How can I set the position of the controls and is it also possible set their size?

The audio tag is a child of a list element, for all the other list elements I position them such as

#track_title {
    position:absolute;
    top: 2px;   
    left: 80px;
    font-size: 15px;
    font-weight: bold;
}

Answer 1

There is no way to control the html5 audio player controls via CSS for html5 audio tag. Though you may want to leave the default controls and implement your own controls via javascript.

However there is a nice existing html5 themable player called jPlayer which proves to be very useful.