使用Reveal.js延迟加载和Javascript

Question

我正在用Reveal.js制作幻灯片。根据docs (https://github.com/hakimel/reveal.js/)，您应该使用数据-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

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

如果要在幻灯片显示时自动播放音频文件，则应在x.play()的回调中运行事件在显示幻灯片时由slide发出。。

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