为什么音频停止在滚动条上播放？

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() 会在滚动 activity 时触发。因此，如果该功能不断检查以查看应该放置哪个文件，我可以看到这会在何处中断播放。

有什么办法可以防止这种情况发生。我见过一些 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

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

Answer 2

一种无需过多更改的方法是在您的滚动事件中添加一个 switch_audio 函数，该函数将被调用而不是您的 setAttribute。在该函数中，您验证是否需要更改音频，如果需要，则进行更改。像这样：

 if ($(this).scrollTop() > breakOne && $(this).scrollTop() < breakTwo) {
    set_audio(audioOne, titleOne);           
  }

你的函数：

function set_audio(which_audio, which_title){
    if(audioElement.src != which_audio){
        audioElement.setAttribute('src', which_audio);
        $('.audioBug > h6').text(which_title);
    }
}

为什么音频停止在滚动条上播放？

Why does audio stop playing on scroll?

javascript

jquery

ajax

audio-player