javascript - 为什么滚动时音频停止播放？

Question

这是我想要实现的目标的 CodePen:

http://codepen.io/golfecholima/pen/GJqEOm

这是一个位于右下角的小音频错误。当用户滚动经过页面上的某个元素时，<audio src="">变化。这是 jQuery:

// BRING IN YOUR AUDIO FILES HERE

var audioOne = 'https://d63kb4t2ifcex.cloudfront.net/201505horton/mp3/Horton_ImNotThisPicture.mp3';  // replace these with your audio files 
var audioTwo = 'https://d63kb4t2ifcex.cloudfront.net/201505horton/mp3/Horton_WeHadBackThen.mp3';  // replace these with your audio files
var audioThree = 'https://d63kb4t2ifcex.cloudfront.net/201505horton/mp3/Horton_IveNeverBeen.mp3';  // replace these with your audio files
var audioFour = 'https://d63kb4t2ifcex.cloudfront.net/201505horton/mp3/Dukakis_OneOfTheValuesofFurlough.mp3';  // replace these with your audio files

// SET YOUR SCROLL BREAKPOINTS HERE 

var breakOne = 0;
var breakTwo = $('.audio-two').offset().top - $(window).height();
var breakThree = $('.audio-three').offset().top - $(window).height();
var breakFour = $('.audio-four').offset().top - $(window).height();


// SET YOUR AUDIO FILE TITLES

var titleOne = 'LISTEN: The first audio file';
var titleTwo = 'LISTEN: The second audio file';
var titleThree = 'LISTEN: The third audio file';
var titleFour = 'LISTEN: The fourth audio file';

// DO THE STUFF

var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', audioOne);
    audioElement.setAttribute('preload', 'auto');
    //audioElement.load()
    $.get();
    audioElement.addEventListener("load", function() {
    audioElement.play();
    }, true);

    // controls the playing of the audio

    $('.audioBug').click(function() {

        if ($(this).hasClass('playing')) {
            audioElement.pause();
            $(this).removeClass('playing');
        } else {
            audioElement.play();
            $(this).addClass('playing');
        }
    });

    // collapses the bug 5 seconds after loading

    function removeBumper() {
        setTimeout(function() {
            $('.audioBug > h6').fadeOut(500, function() {
                $('.audioBug').animate({width: '4rem'}, 'fast');
            });
        }, 5000);
    }

    //hovering over the bug expands it to reveal the audio title. 

    $('.audioBug').hover(function() {
        $(this).animate({width: '28rem'}, 'fast');
        $('.audioBug > h6').fadeIn('slow');
    }, function() {
        setTimeout(function() {
            $('.audioBug > h6').fadeOut(500, function() {
                $('.audioBug').animate({width: '4rem'}, 'slow');
            });
        }, 1000);
    });

    //page loads, audio bug expands to reveal title, then collapses again
    setTimeout(function previewBug() {
        $('.audioBug').animate({width: '28rem'}, 'fast');
    }, 1000);
    setTimeout(function() {
        $('.audioBug > h6').fadeIn(300, function() {
            removeBumper();
        });
    }, 2700);

    //scrolling through set ranges changes the audio file/title and expands the bug anew

    $(window).scroll(function() {
        if ($(this).scrollTop() > breakOne && $(this).scrollTop() < breakTwo) {
            audioElement.setAttribute('src', audioOne);
            $('.audioBug > h6').text(titleOne);
        } 
        else if ($(this).scrollTop() > breakTwo && $(this).scrollTop() < breakThree) {
            audioElement.setAttribute('src', audioTwo);
            $('.audioBug > h6').text(titleTwo);
        } 
        else if ($(this).scrollTop() > breakThree && $(this).scrollTop() < breakFour) {
            audioElement.setAttribute('src', audioThree);
            $('.audioBug > h6').text(titleThree);
        } 
        else if ($(this).scrollTop() > breakFour) {
            audioElement.setAttribute('src', audioFour);
            $('.audioBug > h6').text(titleFour);
        }
    });

它的功能符合我的预期，只是一旦开始滚动，即使尚未到达下一个断点，音频也会停止。我的理解是.scroll()每当有滚动事件时都会触发。因此，如果该函数不断检查哪个文件应该就位，我可以看到这会在哪里中断播放。

有什么办法可以避免这种情况发生吗？我见过一些 AJAXy 的东西，看起来它们可能是正确的想法，但我太菜鸟了，还没有弄清楚这一点。

我已经尝试过setTimeout这似乎没有帮助。

(我知道悬停有点不稳定 - 不担心)

Answer 1

当在滚动过程中不断设置 src 属性时，浏览器将终止当前音频并开始加载"new"源(即使它是相同的)。

这是一个可以解决此特定问题的简单方法，用于检查当前源是否与正在检查的源不同:

$(window).scroll(function() {

  if ($(this).scrollTop() > breakOne && $(this).scrollTop() < breakTwo &&
     audioElement.src !== audioOne) {  // CHECK that it's not the same as current source

    audioElement.setAttribute('src', audioOne);
    $('.audioBug > h6').text(titleOne);
  } else if ($(this).scrollTop() > breakTwo && $(this).scrollTop() < breakThree && audioElement.src !== audioTwo) {
    audioElement.setAttribute('src', audioTwo);
    $('.audioBug > h6').text(titleTwo);
  } else if ($(this).scrollTop() > breakThree && $(this).scrollTop() < breakFour  && audioElement.src !== audioThree) {
    audioElement.setAttribute('src', audioThree);
    $('.audioBug > h6').text(titleThree);
  } else if ($(this).scrollTop() > breakFour  && audioElement.src !== audioFour) {
    audioElement.setAttribute('src', audioFour);
    $('.audioBug > h6').text(titleFour);
  }
});

<强> Modified CodePen

虽然代码中还存在其他问题，但这应该有助于解决由于不断重新加载新源而导致的音频停止问题。