Question

我正在使用bootstrap的轮播模板，并且每张幻灯片都有一个简短的音频文件。我想知道如何在用户切换到相应的幻灯片时触发每个音频文件，并在切换幻灯片时暂停当前文件（然后播放该幻灯片的文件。）

像这一系列事件：

显示幻灯片1，触发音频1
显示幻灯片2，暂停音频1，触发音频2

等等。我是jquery / javascript的新手，所以你能给予的所有帮助都值得赞赏！

这是我的HTML轮播代码：

<div class="mycarousel">
 <div class="carousel-item active">
   <img src="img1.jpg">
     <div class="container">
      *slide 1 contents
      </div>
     <audio src="audio1.mp3"></audio>
 </div>
 <div class="carousel-item">
    <img src="img1.jpg">
      <div class="container">
       *slide 2 contents*
      </div>
   <audio src="audio2.mp3"></audio>
 </div>
</div>

Answer 1

你可能想要这样的东西：

$('#myCarousel').carousel().on('slid.bs.carousel', function (evt) {
    // find the currently displayed DOM element's audio
    var $thisAudio = $(evt.relatedTarget).find('audio');
    // find all other audio elements and pause them
    $(evt.target).find('audio').not($thisAudio).each(function(i, audio) {
        audio.pause();
    });
    // play this audio
    $thisAudio.get(0).play();
}).carousel(0); // should trigger the first slide's audio?

可能需要调试

仍然有决定，特别是：

是否应在所有音频准备播放后（稍微参与）启动旋转木马。
音频是否应循环播放 - <audio src="..." loop="true"></audio>或<audio src="..." loop="false"></audio>。
是否应该为用户提供使音频静音的选项。

在HTML幻灯片中使用jQuery触发音频播放？

1 个答案: