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

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.

友情链接