1

I want to play and stop audio when entering/leaving a scene with ScrollMagic.js. It throw 'Uncaught (in promise) DOMException' in Chrome. What is the problem?

I have html structure like below. I want to play audio automatically when entering each slides using 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);
});

When the trigger activated, the console show 'Uncaught (in promise) DOMException'in Chrome. I've tried with Edge and it's fine. How can I fix this?

Hary Kamaro
  • 121
  • 1
  • 1
  • 10

1 Answers1

0

You had the right idea, since each div will have in theory the same index of the respected audio element. Just use the index for the div loop for the playing of the audio element instead.

Example:

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>
ABC
  • 2,068
  • 1
  • 10
  • 21