Eu queria, se for possível, claro, que um componente <Audio>
do HTML5 apenas mostrasse o mute
, e o restante não aparecesse; como o volume
, play
, pause
, etc.
3 Respostas
É possível, mas não dá para escolher os controles no próprio player. Ou é tudo ou nada. Então você tem que criar um botão manualmente e vincular ele ao player, o que pode até ser vantagem porque pode controlar mais como quer manipular o controle. Assim:
<!DOCTYPE html>
<html>
<body>
<audio id="player" src="http://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" autoplay></audio>
<div>
<button onclick="document.getElementById('player').muted = !document.getElementById('player').muted">Mute / Unmute</button>
</div>
</body>
</html>
Coloquei no GitHub para referência futura.
Depois você pode sofisticar e fazer o texto do botão trocar conforme o estado ao invés de mostrar os dois valores. Enfim, dá para fazer o que você quiser com o botão.
O API do HTML5 só permite mostrar ou não mostrar os controlos todos.
Para esconder tudo podes fazer assim (http://jsfiddle.net/eud2Lnne/):
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls", "controls")
}
}
Se queres ter só o mute, como tens na pergunta, tens de ser tu a fazer. Esconde os controles nativos, arranja uma imagem ou botão de mute e junta esta funcionalidade:
document.getElementById('idDoVideo').muted = true; // para fazer mute
document.getElementById('idDoVideo').muted = false; // para desfazer mute
Um exemplo seria assim:
var video = document.getElementById("myvideo");
function mute(btn) {
var muted = video.muted;
btn.innerHTML = muted ? 'Mute' : 'un Mute';
video.muted = !muted;
}
jsFiddle: http://jsfiddle.net/eud2Lnne/1/
ISTO É O QUE VOCÊ PRECISA:
<audio id="demo" src="audio.mp3"></audio>
<div>
<button onclick="document.getElementById('demo').muted = true;">Mute</button>
<!- ISTO ABAIXO É OPCIONAL->
<button onclick="document.getElementById('demo').play()" hidden>Reproduzir o áudio</button>
<button onclick="document.getElementById('demo').pause()" hidden>Pausar o áudio</button>
<button onclick="document.getElementById('demo').volume+=0.1" hidden>Aumentar o volume</button>
<button onclick="document.getElementById('demo').volume-=0.1" hidden>Diminuir o volume</button>
</div>
<!- ISTO EXECUTA O ÁUDIO AO ABRIR A PÁGINA->
<script type="text/javascript">
var v = document.getElementById('demo');
v.play();
</script>