Javascript audio/video element control volume programmatically?

Question

Flash has an API to control the volume for a Sound object. Can volume be controlled like this currently or is there support planned for <audio> or <video> html5 elements?

Answer 1

The html 5 audio element appears to have a volume getter/setter on it, so you could do something like this in jQuery:

<script type="text/javascript" charset="utf-8">
  $(function() {
    var audio = $('#clip')[0];

    $('#start').click(function() {
       audio.play();
    });

    $('#stop').click(function() {
       audio.pause();
    });

    $('#quiet').click(function() {
      audio.volume = audio.volume - 0.2
    });

    $('#loud').click(function() {
      audio.volume = audio.volume + 0.2
    });
  });
</script>

<audio id="clip">
  <source src="/audio/safari.mp3" />
</audio>
<button id="start">start music</button
<button id="quiet">quieter</button>
<button id="loud">louder</button>

Source: http://www.whatwg.org/specs/web-apps/current-work/#user-interface

This seems to work in Safari 4, though I couldn't get it to play with FF 3.5.

(Note there's no bounds checking in the code above... you'll get a javascript error if you try to set the value below 0 or above 1.)

-John

Answer 2

I have the same problem with firefox. Is there a documentation specifically related to the video tag ? The w3c page make my browser crash !

Answer 3

Just a heads up, I'm also finding that volume for video / audio doesn't work in Mobile Safari. You can update the property and check that you did in fact change the volume property, but mobile safari iPad doesn't care, it's all about the hardware volume rocker apparently.