Limit HTML5 Audio Controls

Navigation
3

I wanted, if it were possible, of course, that a component <Audio> of HTML5 would just show mute , and the rest would not show up; such as volume , play , pause , etc.

    
asked by anonymous 30.12.2014 / 18:56

3 answers

4

It is possible, but you can not choose the controls on the * palyer itself. Or it's all or nothing. So you have to create a button manually and link it to the player , which may even be advantageous 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><buttononclick="document.getElementById('player').muted = !document.getElementById('player').muted">Mute / Unmute</button>
</div>
</body>
</html>

Music courtesy of Wikipedia .

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

    
30.12.2014 / 19:05
2

The HTML5 API only lets you show or not show all the controls.

To hide everything you can do so ( link ): 

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

If you want to have only the mute, as you have in the question, you have to be the one to do it. Hide the native controls, arrange a mute button and add this feature: 

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

An example would look like this: 

var video = document.getElementById("myvideo");

function mute(btn) {
    var muted = video.muted;
    btn.innerHTML = muted ? 'Mute' : 'un Mute';
    video.muted = !muted;
}

jsFiddle: link

    
30.12.2014 / 19:13
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>
    
30.12.2014 / 19:37
How to select with regex? Calculate distance between 2 points in Google maps