セクション上のすべてのhtml5オーディオをフェードイン/アウトします。fullpage.jsでアクティブ

Question

Fullpage.jsセクションがアクティブなときにオーディオ（およびビデオ）を自動再生できます。私はそれぞれに異なるオーディオ/ビデオ要素を持つ10のセクションを持っており、セクションがアクティブ/非アクティブになったときにオーディオが消えて&になります。

再生/一時停止/ミュート/ミュート解除ボタンが設定されていて、このコードでオーディオをフェードインさせることができますが、トランジションでも同じようにしたいと思います。

$('#mute').on('click', function() { 
$('body audio, body video').each(function() { 
    $(this).animate({volume: 0}, 1000, function() { 
     muted = true; 
    }); 
}); 
}); 

私は自動再生/一時停止を制御する拡張の関連する部分を見つけましたが、適切に&にフェードインする方法を見つけ出すように見えることはできません...その恒久的にすべてをミュート、またはページエラーを投げるのいずれか。私はそれが正しい方法は、最初からグローバルに0にすべてのボリュームを設定し、prop.play == trueの場合、ボリュームを1にアニメーション化すると仮定していますか？そういう行に沿った何か？自動再生のために

（ライン1662）：

//playing HTML5 media elements 
     panel.find('video, audio').each(function(){ 
      var element = $(this).get(0); 

      if(element.hasAttribute('data-autoplay') && typeof element.play === 'function') { 
       element.play(); 
      } 
     }); 

とautopausing（ライン1700）

//stopping HTML5 media elements 
     panel.find('video, audio').each(function(){ 
      var element = $(this).get(0); 

      if(!element.hasAttribute('data-keepplaying') && typeof element.pause === 'function') { 
       element.pause(); 
      } 
     }); 

私は非常に基本的なjsfiddle hereを持っている、と私は実際にis hereに取り組んでいます。

Answer 1

これを行うには、fullpage.jsコードに入る必要はありません。実際には、最新のfullPage.jsのバージョンなどに更新し続ける場合は避けてください。

自動再生と一時停止を削除して、fullpage.js callbacksを使用して自分で行うことができます。

は、あなたがこのような何かを行うことができ、それらをミュートするには：

$('#fullpage').fullpage({ 
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 

    onLeave: function(index, nextIndex, direction){ 
     var leavingSection = $(this); 

     leavingSection.find('audio, body video').each(function() { 
      $(this).animate({volume: 0}, 1000, function() { 
       muted = true; 
      }); 
     }); 
    } 
});