Search code examples
javascripthtmlhtml5-audiojplayer

Get/Set global volume for all of my audio instances

I'm using jPlayer to play audio files on my website.

I've created mix for smooth transitions between two songs.

mix = while decreasing the volume of the first player, I'm increasing the volume on the other one.

I'm looking for a global volume property that will impact on the two players simultaneously so I'll be able to change the volume relative to their current volume state even if they are in a middle of a mix.

I tried to use globalVolume as described in the documentation of Jplayer, but I didn't understand what i'm supposed to do with that and set it.

I'm sure that there is more elegant way to access the Audio class and ask for the globalVolume or changing it.

On MDN the only way to get the instance volume is

var vid = document.getElementById("myAudio");
vid.volume = 0.2;

Any suggestions?

Solution

  • You can create a jPlayer instance by calling the constructor function: $('#myPlayerId').jPlayer({option: 'value'});.

    One of the options is volume, which defines the initial volume as a value from 0 to 1: $('#myPlayerId').jPlayer({volume: '0.8'});.

    Another option is globalVolume. This is a boolean option that causes the volume option to be shared with other jPlayer instances that have the globalVolume option enabled. Check out this demo page for an example and don't forget to play around with the volume to see the effect of this option.

    Anyway, the globalVolume property isn't what you're looking for if you want to create a crossfade effect (or implement a way to 'mix' one or more audio streams).

    What I would do is listen to a jPlayer event, more specifically the one that is fired when the volume of an instance changes: $.jPlayer.event.volumechange. For example:

    // [...] Code to create jPlayer instances

var handleOnVolumeChange = function handleOnVolumeChange (event) {
    var targetElement = event.srcElement || event.target;
    var playerId = targetElement.id;

    // event.jPlayer contains jPlayer information
    // event.jPlayer.options: The volume and muted values are maintained here along with all the other options.
};

$('#playerOneId').bind($.jPlayer.event.volumechange, handleOnVolumeChange);
$('#playerTwoId').bind($.jPlayer.event.volumechange, handleOnVolumeChange);

    In the function handling the event you should be able to find out which player fired it and respond accordingly (eg. change the volume of one or more other players based on a ratio you define).

    Would this work for you?