javascript - 根据滚动位置播放不同的音频文件

Question

我有一个网站，希望在不同的滚动位置播放不同的音频片段。使用当前代码，音频会切换，但是每次我移动滚动条时，音频都会继续重新启动。我如何告诉它仅在达到特定滚动位置时才播放音频？

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() {
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 20213 && scroll_pos < 36041) { //strozzi   
                $("audio").attr("src", "audio/Strozzi.mp3");
            } 
            else if(scroll_pos > 36041 && scroll_pos < 51097){ //Leonarda
                $("audio").attr("src", "audio/Leonarda.mp3");
            }
            else {
                $("audio").attr("src", "audio/Hildegard.mp3");//Hildegard
            }
        });
    });

Answer 1

问题在于您的状况

scroll_pos > 20213 && scroll_pos < 36041

在 20213 和 36041 之间，所有值都将成为 的true。因此，当您处于这些值之间并滚动时，情况会一遍又一遍地触发。

您需要某种方式来检查连接到该滚动位置的文件是否已经在播放。

例如，您可以向自己的data标签添加<audio>属性，该标签会根据情况进行更新:

if(scroll_pos > 20213 && scroll_pos < 36041 && $("audio").data('playing') !== 'Strozzi.mp3') { // Check if the file is already playing
    $("audio")
       .attr("src", "audio/Strozzi.mp3")
       .data('playing', 'Strozzi.mp3'); // save the currently playing file in the attribute `data-playing`
}