Col semplice html (o anche con css) non puoi fare personalizzazioni particolari sull'elemento <audio>.
Devi optare per l'uso di javascript.
Esistono plugin jQuery personalizzabili. Uno a caso: http://www.jplayer.org/
Oppure puoi creare qualcosa di molto semplice usando sempre <audio> ma togliendo i controlli e applicando il muted tramite qualche riga di javascript.
Ti posto un esempio da cui puoi prendere spunto:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
#audiotoggle{
width:48px;
height:48px;
background-image:url("audio.png");
}
#audiotoggle.mute{
background-position:0 -48px;
}
</style>
<script type="text/javascript">
function audiotoggle(self,idaudio){
document.getElementById(idaudio).muted = self.classList.toggle("mute");
// NOTA: versioni poco recenti di IE non supportano classList. Nel caso, usare metodi alternativi.
}
</script>
</head>
<body>
<audio id="audio" src="audio.mp3" loop autoplay></audio>
<div id="audiotoggle" onclick="audiotoggle(this,'audio')"></div>
</body>
</html>
L'immagine che ho usato è questa:audio.png
Rispondi quotando
