5

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 3

7

É 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.

Música cortesia da Wikipedia.

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.

3

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/

0

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .