Lazy Loading和JavaScript与Reveal.js

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