Functionality:
I have implemented a jPlayer audio function where the audio will play in correspond to the video.
Hence, at a certain part of the video, I will need to set the audio to fade out in a gradual manner, rather than just an abrupt mute.
what i have done:
I have set the a jplayer to play the following video list and have also set the audio to mute in the following parameter:
$("#Macallan_Video").jPlayer("mute", true);
Issue:
The audio will mute at the required part of the video. However, looking through the documentation of jPlayer, I am still unable to set the jplayer audio to fade out.
Could I please get some help on how to fade out an audio.
Code:
function stop_interrupt() {
isInterrupt = false;
triggerFeedback = "0";
$("#M_Video").jPlayer("mute", true);
console.log("stop_interrupt triggerFeedback: " + triggerFeedback);
}
//To continuously play a list of video
$("#M_Video").jPlayer({
ready: function() {
console.log("currentPlaying " + videoList[videoIndex]);
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
stop_interrupt();
},
ended: function() {
videoIndex++;
console.log("NewCurrent:" + videoIndex);
console.log("current :" + videoList[videoIndex]);
if (videoIndex >= videoList.length) {
console.log("Next" + videoIndex);
videoIndex = 0;
}
$("#M_Video").jPlayer("setMedia", {
m4v: videoList[videoIndex]
}).jPlayer("play");
stop_interrupt();
},
swfPath: "javascript",
muted: true,
loop: true,
supplied: "webmv, ogv, m4v",
size: {
width: 1400,
height: 750
}
});
$("#M_Video").show();
function show_interrupt(flag) {
//Set Timeout for flag to be equal to "1"
if (flag == "1") {
$("#M_Video").jPlayer("mute", false);
}
}
Best solution: Download the jquery jplayer fade plugin from github developed by Solutions Nitriques
Alternatives:
Now, I take no credit for the following code: i found it on a [google groups forum] (it was posted in 2009) 3 There was an alternative suggestion on metafilters The guy on google groups did stress to ensure the volume was not already at 0 (makes sense!). Here's the code.
var vol = 20;
var t = 0;
function playSample(id) {
$("#player").stop();
vol = 20;
stopSample();
$("#player").setFile("yourfile.mp3");
fadeIn();
$("#player").play();
}
function stopSample(id, fadeout) {
clearTimeout(t);
//Set fadeout = true in the function call: <a href="#"
onClick="stopSample(23, true);">Stop</a>
if(fadeout == true) {fadeOut();}
}
$("#player").jPlayer({
swfPath: "swfpath";
});
$("#player").onSoundComplete(function() {
stopSample();
});
function fadeIn() {
if(vol < 150) {
$("#player").volume(vol);
t = setTimeout("fadeIn()", 200);
vol = vol + 10;
} else {
clearTimeout(t);
vol = 150;
}
}
function fadeOut() {
if(vol > 0) {
$("#player").volume(vol);
t = setTimeout("fadeOut()", 200);
vol = vol - 10;
} else {
clearTimeout(t);
$("#player").stop();
vol = 20;
}
}
$("#player").onProgressChange(function (l,pr,pa,pt,t) {
if(pa > 90 && pa < 92) {
stopSample(0, true);
}
});