Search code examples
javascriptjqueryaudiojplayer

Is there a way for audio fadeout in jPlayer


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);
   }
 }


Solution

  • 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); 
          } 
        });