Audio.js with Volume Control


Hits: 13462  

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

Published by

Sandeep Verma

I’m an Entrepreneur. I’m proud to work as Blogger, LAMP Programmer, Linux Admin, Web Consultant, Cloud Manager, Apps Developer, Searcher. Concentrate > Observe > Imagine > Launch

9 thoughts on “Audio.js with Volume Control”

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

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

  3. This is possibly the worst implementation for volume control I’ve ever seen.

    If you’re not going to use any extra libraries like bootstrap or jquery, here is vanilla js implementation that is far better than the one posted.

    http://jsfiddle.net/4xgtsh4r/

    Simplest usage:
    &uarr;
    &darr;
    <p id=”vol_lbl”>100%</p>

    But really… throw in jQuery UI and use a slider.

Leave a Reply

Your email address will not be published.

*