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

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(); 
    }
} );