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

我想在使用ScrollMagic.js进入/离开场景时播放和停止音频。它在Chrome中抛出了“未捕获的（承诺中的）DomeException”。有什么问题

我有如下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>

---

当触发器激活时，控制台在Chrome中显示“未捕获（承诺中）DomeException”。我试过用Edge，没问题。如何解决这个问题？

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

例如：

let scenes=[]；
//初始化控制器
var controller=new ScrollMagic.controller（）；
$（'.slide'）。每个（函数（索引）{
变量触发器='#滑动-'+索引+'。触发器'；
var audio='#幻灯片-'+索引+audio'；
场景[索引]=新的ScrollMagic.Scene({
触发器元素：触发器，
triggerHook:“onCenter”，
持续时间：“50%”
})
.附加指示器({
名称：触发器，
彩色端：“00FFFF”
})
.on（'enter'，function（）{
让音频=$（“音频”）
console.log（'在索引处播放音频'，索引）
音频[索引]。播放（）；
})
.on（'leave'，function（）{
console.log（'Leave'+触发器）；
})
.addTo（控制员）；
});
您的想法是正确的，因为每个div理论上都有相同的受尊重音频元素索引。只需使用div循环的索引来播放音频元素即可

例如：


let scenes=[]；
//初始化控制器
var controller=new ScrollMagic.controller（）；
$（'.slide'）。每个（函数（索引）{
变量触发器='#滑动-'+索引+'。触发器'；
var audio='#幻灯片-'+索引+audio'；
场景[索引]=新的ScrollMagic.Scene({
触发器元素：触发器，
triggerHook:“onCenter”，
持续时间：“50%”
})
.附加指示器({
名称：触发器，
彩色端：“00FFFF”
})
.on（'enter'，function（）{
让音频=$（“音频”）
console.log（'在索引处播放音频'，索引）
音频[索引]。播放（）；
})
.on（'leave'，function（）{
console.log（'Leave'+触发器）；
})
.addTo（控制员）；
});

控制台中仍显示“未捕获（承诺中）DomeException”，音频未播放。您使用的浏览器是什么？是铬的吗？导致Chrome中显示的错误。我已经尝试过使用Edge，即使在我的初始代码中也没有问题。您正在运行代码段吗？是的，我正在运行。“在索引x处播放音频”后显示的错误消息。控制台中仍然显示“未捕获（承诺中）DomeException”，并且音频未播放。您使用的浏览器是什么？是铬的吗？导致Chrome中显示的错误。我已经尝试过使用Edge，即使在我的初始代码中也没有问题。您正在运行代码段吗？是的，我正在运行。“在索引x处播放音频”后显示的错误消息。
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);
});