CODEWITHSUNDEEP
jqueryhtmlaudio
user1293026
user1293026

Reputation:

Audio.js HTML5 volume control

I'm using the audio.js library for a project I'm working on and I'm having a hard time implementing a volume controller. I've tried contacting the developer who built the library, but haven't been able to reach him. I've built a volume slider using jQuery UI and I'm now trying to parse the value of the slider to all players in my instance using the .setVolume function. I can't make it work though. Here's my code:

audiojs.events.ready(function() {

    var audio = audiojs.createAll(),
        slider = $('#slider');

    tooltip.hide();

    slider.slider({
        range: 'min',
        min: 1,
        value: 35,

        start: function(event,ui) {
            // Start
        },

        slide: function(event, ui) {

            var value = slider.slider('value');

            // Slide

        },

        stop: function(event,ui) {
            // Stop
        },

        change: function(event,ui) {
            audio.setVolume(ui.value / 100);
        },

    });

});

Upvotes: 0

Views: 5005

Answers (2)

Ajay Gupta
Ajay Gupta

Reputation: 2957

Without using audio.js library you can simply do it by using volume attribute of the audio element of HTML5.

For that, you can go with the below lines.

var myAudio = document.getElementById('myAudio');
myAudio.volume = 0.32;

Where Volume 1.0 is highest and 0.0 is the lowest volume.

Upvotes: 1

Gregory R.
Gregory R.

Reputation: 1945

audiojs.createAll() creates an array, thus the variable audio is an array. If you are using one audio js player, then declare: var audio = audio[0]; this should work. If you are using multiple, then you are going to need to either do a for loop or call the audio js player with the index number, such as audio[0].setVolume(ui.value / 100);.

Upvotes: 0

Related Questions