Limit HTML5 Audio Controls

Asked

Viewed 1,670 times

4

I wanted, if it were possible, of course, that a component <Audio> HTML5 only shows the mute, and the rest did not appear; as the volume, play, pause, etc..

javascript html html5 html5-audio

3 answers

6


It is possible, but you can not choose the controls on own player. Either it’s all or nothing. Then you have to create a button manually and link it to player, which may even be an advantage because you can control more how you want to manipulate the control. So:

<!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>

I put in the Github for future reference.

Music courtesy of Wikipedia.

Then you can sophisticate and change the text of the button according to the state instead of showing the two values. Anyway, you can do whatever you want with the button.

2

HTML5 API only allows showing or not showing all controls.

To hide everything you can do so (http://jsfiddle.net/eud2Lnne/):

function toggleControls() {
    if (video.hasAttribute("controls")) {
        video.removeAttribute("controls")
    } else {
        video.setAttribute("controls", "controls")
    }
}

If you only want to have the mute, as you asked, you have to do it yourself. Hide the native controls, get an image or button mute and joins this functionality:

document.getElementById('idDoVideo').muted = true; // para fazer mute
document.getElementById('idDoVideo').muted = false; // para desfazer mute

An example would be like this: 

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

THIS IS WHAT YOU NEED:

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

Browser other questions tagged javascript html html5 html5-audio

You are not signed in. Login or sign up in order to post.