Question

我正在用Reveal.js制作幻灯片。根据文档（https://github.com/hakimel/reveal.js/），您应该使用 data-src 进行延迟加载。如何利用延迟加载并使用JS播放音频？

这是我尝试的但它没有播放音频：

 <section>
    <audio id="audio2" controls><source data-src="http://opengameart.org/sites/default/files/foom_0.wav" type="audio/wav"></audio>
    <script>
        var x = document.getElementById("audio2"); 
        x.play(); 
    </script>
 </section>

Answer 1

您的脚本在加载演示文稿时执行，此时可能还没有发生延迟加载，因此无法播放该文件。

如果您想在幻灯片显示时自动播放音频文件，则应在event emitted by Reveal upon showing the slide的回调中运行x.play()：

Reveal.addEventListener( 'slidechanged', function( event ) {
    if (event.indexh === mySlideNumberWithAudio) { // might need to check indexv too
        document.getElementById("audio2").play(); 
    }
} );

使用Reveal.js进行延迟加载和Javascript

1 个答案: