使用fullpage.js淡入/淡出section.active上的所有html5音频

Question

Fullpage.js允许音频（和视频）在其部分处于活动状态时自动播放。我有10个部分，每个部分都有不同的音频/视频元素，并且希望在部分变为活动/非活动状态时音频在&中淡出。

我有播放/暂停/静音/取消静音按钮设置（和工作）淡入此代码的音频，但希望同样发生在转场。

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

我发现，控制自动播放/暂停扩展的相关部分，但似乎无法弄清楚如何正确&淡出......无论是其永久关闭一切，或抛出页面错误。我假设正确的方法是从一开始就将全部音量设置为0，然后将音量设为1，如果prop.play == true？或类似的规定？

对于自动播放（行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; 
      }); 
     }); 
    } 
});