使用Reveal.js在两个幻灯片之间进行音频转换

时间:2016-02-03 23:19:40

标签: javascript audio reveal.js

我使用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>

0 个答案:

没有答案