延迟加载和 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(); 
    }
} );

延迟加载和 Javascript 与 Reveal.js

Lazy Loading and Javascript with Reveal.js

html

javascript

html5-audio

reveal.js