我使用reveal.js进行演示,在一张幻灯片中有一个自动播放的音频文件。我希望音频在进入下一张幻灯片时淡出,我现在能想到的是将音频文件设置在任何部分之外,并在slidechanged
上设置一个事件监听器。当第一张幻灯片是音频开启的时候,第一张幻灯片在音频上应该自动播放,一旦它不是第一张幻灯片,音频应该淡出。
我想知道是否有更简单的方法在一个部分内设置过渡。这就是我现在所拥有的,尝试淡出每个slidechanged
事件的音频而不考虑返回第一张幻灯片时的情况。下面的js代码是从另一个帖子复制的。
<section>
<audio data-autoplay loop id="sound"><source src="assets/audio.mp3"></audio>
</section>
<script>
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
var sound = document.getElementById("#sound");
var fadePoint = sound.duration - 2;
var fadeAudio = setInterval(function(){
// Only fade if past the fade out point or not at zero already
if ((sound.currentTime >= fadePoint) && (sound.volume != 0.0)) {
sound.volume -= 0.1;
}
// When volume at zero stop all the intervalling
if (sound.volume === 0.0) {
clearInterval(fadeAudio);
}
},200);
</script>