Audio.js with Volume Control

On February 12, 2012, in HTML5, Learning, Open Source, PHP, Web Application, Web Streaming, by Sandeep Verma


Hits: 4577  

I was working on HTML5 MP3 Player Project using audio.js and I got Audio.js with Volume Control to control the volume for the Flash alternative player?

Volume Control - audio.js

<script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll(),
            audio = as[0],
            ids = ['vol-0', 'vol-10', 'vol-40', 'vol-70', 'vol-100'];
        for (var i = 0, ii = ids.length; i < ii; i++) {
          var elem = document.getElementById(ids[i]),
              volume = ids[i].split('-')[1];
          elem.setAttribute('data-volume', volume / 100)
          elem.onclick = function(e) {
            audio.setVolume(this.getAttribute('data-volume'));
            e.preventDefault();
            return false;
          }
        }
        
      });
    </script>
<audio src="audiofile.mp3"></audio>
    <p><a href="#" id="vol-0">Volume: 0%</a></p>
    <p><a href="#" id="vol-10">Volume: 10%</a></p>
    <p><a href="#" id="vol-40">Volume: 40%</a></p>
    <p><a href="#" id="vol-70">Volume: 70%</a></p>
    <p><a href="#" id="vol-100">Volume: 100%</a></p>

You can also use the same volume as in https://github.com/dz0ny/AudioJS



  • Anonymous

    Was testing this implementation, and found it to work on Mac OS X on Chrome and Safari, but fail in FireFox from my server, but still works here.

  • eugene

    Thanks! And how can i use it with several players on one page? 

  • http://www.facebook.com/svnayak Sandeep Verma
  • Alexander

    Hi  any idea why I’am getting the following error?
    TypeError: audio.element.setVolume is not a function in audio.js (line 370)I downloaded the audio.js from you example, the weird thing is that when I load the script directly from your page it works.Everything works except the volume change.

  • http://www.facebook.com/svnayak Sandeep Verma

    Hey, You need to check flash fallback working on not …

  • Weband

    It was a flash fallback problem, i downloaded the swf file here, and it works in Firefox o/ http://demo.svnlabs.com/html5player/volume-control/audiojs/audiojs.swf

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...