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

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`
}