时间戳

首页 > 解决方案 > 使用 ScrollMagic.js 滚动时播放音频元素

javascript - 使用 ScrollMagic.js 滚动时播放音频元素

问题描述

我想在使用 ScrollMagic.js 进入/离开场景时播放和停止音频。它在 Chrome 中抛出“Uncaught (in promise) DOMException”。问题是什么？

我有如下的html结构。我想在使用 ScrollMagic.js 输入每张幻灯片时自动播放音频。

<div class="slide" id="slide-0">
    <div class="trigger"></div>
    <audio class="audio" src="audio/audio01.mp3" preload="auto"></audio>
</div>
<div class="slide" id="slide-1">
    <div class="trigger"></div>
    <audio class="audio" src="audio/audio02.mp3" preload="auto"></audio>
</div>
<div class="slide" id="slide-3">
    <div class="trigger"></div>
    <audio class="audio" src="audio/audio03.mp3" preload="auto"></audio>
</div>

var controller = new ScrollMagic.Controller();

var scenes = [];

$('.slide').each(function(index) {
  var trigger = '#slide-' + index + ' .trigger';
  var audio = '#slide-' + index + ' audio';

  scenes[index] = new ScrollMagic.Scene({
                      triggerElement: trigger,
                      triggerHook: 'onCenter',
                      duration: '50%' })
                  .addIndicators({name: trigger, colorEnd: "#00FFFF"})
                  .on('enter', function() {
                       console.log('Enter' + trigger);
                       $(audio).get(0).play();})
                  .on('leave', function() {
                        console.log('Leave' + trigger); })
                  .addTo(controller);
});

当触发器激活时，控制台会在 Chrome 中显示“Uncaught (in promise) DOMException”。我用Edge试过了，没问题。我怎样才能解决这个问题？

标签： javascriptjqueryhtmlscrollmagic

解决方案

您的想法是正确的，因为理论上每个 div 都将具有受尊敬的音频元素的相同索引。只需使用 div 循环的索引来播放音频元素。

例子：

let scenes = [];

// init controller
var controller = new ScrollMagic.Controller();

$('.slide').each(function(index) {
  var trigger = '#slide-' + index + ' .trigger';
  var audio = '#slide-' + index + ' audio';


  scenes[index] = new ScrollMagic.Scene({
      triggerElement: trigger,
      triggerHook: 'onCenter',
      duration: '50%'
    })
    .addIndicators({
      name: trigger,
      colorEnd: "#00FFFF"
    })

    .on('enter', function() {
      let audio = $('audio')
      console.log('Playing audio at index', index)
      audio[index].play();
    })
    .on('leave', function() {
      console.log('Leave' + trigger);
    })
    .addTo(controller);

});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

<div class="slide" id="slide-1">
    <div class="trigger"></div>
    <audio class="audio" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" preload="auto"></audio>
</div>
<div class="slide" id="slide-2">
    <div class="trigger"></div>
    <audio class="audio" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" preload="auto"></audio>
</div>
<div class="slide" id="slide-3">
    <div class="trigger"></div>
    <audio class="audio" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" preload="auto"></audio>
</div>

推荐阅读