Question

这是我想要实现的CodePen：

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

这是一个位于右下角的小音频错误。当用户滚动浏览页面上的某个元素时，public static void setButtonTint(Button button, ColorStateList tint) { if (Build.VERSION.SDK_INT == Build.VERSION_CODES.LOLLIPOP && button instanceof AppCompatButton) { ((AppCompatButton) button).setSupportBackgroundTintList(tint); } else { ViewCompat.setBackgroundTintList(button, tint); } }会发生变化。这是jQuery：

<audio src="">

它的功能与我的预期相同，只是一旦你开始滚动，即使没有达到下一个断点，音频也会停止。我的理解是，// 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); } });会在滚动活动的任何时候触发。因此，如果函数不断检查以查看应该使用哪个文件，我可以看到这会破坏播放的位置。

有没有办法防止这种情况发生。我已经看到了一些AJAXy的东西，看起来它们可能是正确的想法，但我太吵了，还没想到它。

我尝试了.scroll()似乎没有帮助。

（我知道悬停有点不稳定 - 不用担心）

Answer 1

在滚动期间不断设置src属性时，浏览器将终止当前音频并开始加载“新”源（即使它是相同的）。

这是一个可以解决此特定问题的简单方法，以检查当前源是否与要检查的源不相等：

$(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);
    }
}

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

2 个答案: