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

Posted 2023-02-25

【中文标题】根据滚动位置播放不同的音频文件

【英文标题】：Playing Different Audio Files based on Scroll Position

【发布时间】：2020-05-08 14:26:24

【问题描述】：

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

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

【参考方案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`
 

【讨论】：

这是有道理的！这就是我认为发生的事情。向我的音频标签添加数据属性是什么意思？那会是什么样子？

什么意思？我在答案.data('playing', 'Strozzi.mp3');

中写了该代码