È possibile impostare la posizione e la dimensione dei controlli audio? - css, html5, html5-audio

Ho un tag audio in cui i controlli non sono inizialmente mostrati e li visualizzo se l'utente fa clic su un link come questo:

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 è l'url del file audio da riprodurre.

L'audio è così:

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

Come posso impostare la posizione dei controlli ed è anche possibile impostare le loro dimensioni?

Il tag audio è figlio di un elemento della lista, per tutti gli altri elementi della lista che li posiziono come

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

risposte:

Non c'è modo di controllare i controlli del lettore audio html5 tramite CSS per il tag audio html5. Anche se potresti voler lasciare i controlli predefiniti e implementare i tuoi controlli tramite javascript.

Comunque c'è un bel giocatore a tema html5 esistente chiamato JPlayer che si rivela molto utile.

Potresti utilizzare l'API multimediale per creare il tuo set personaledi controlli, permettendoti di modellarli come desideri tramite CSS come qualsiasi altro elemento HTML. Ho scritto su come eseguire questa operazione su Adobe Developer Connection: Lavorare con componenti multimediali HTML5 - Parte 3: controlli personalizzati .