Question

因此，我是一个绝对的初学者，想知道如何将声音（在本例中为Bell Sound）添加到HTML页面。当我向下滚动到页面部分并到达铃声时，声音需要播放。

我的HTML：

<div class="container">
<img style="max-width: 100%" alt="" src="<?= 
enter code herebase_url('assets/bootstrap/')? 
>image/ringabox.png">
<audio autoplay="true" >
<source src="<?= base_url('assets/bootstrap/')?>image/ht1.wav" type="wav">
</audio>
</div>

我的JS：

var audio = document.getElementsByTagName("audio")[0];
audio.play();

// or with an ID

var audio = document.getElementById("mySoundClip");
audio.play();

任何帮助将不胜感激

谢谢

Answer 1

var audio = $("#mySoundClip");
var bellTop = $('#bell').offset().top;
$(window).on("scroll", function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= bellTop){
        audio.play();
    }
});

变量scrollTop具有滚动的像素量。
您还可以通过计算文档和窗口高度来计算滚动百分比。例如。

var wHeight = $(window).height();  // window Height
var dHeight = $(document).height();  // document Height
var scrollTop = $(window).scrollTop();  // pixels scrolled
var scrollable_area = dHeight - wHeight  // scrollable area
var pScrolled = Math.floor(scrollTop/trackLength * 100);  // percent scrolled

Answer 2

使用Javascript，您可以这样做：

file:///src/census-income.data

请参见该线程上的源代码：Trigger event when user scroll to specific element - with jQuery

到达HTML页面的特定部分时如何添加声音

2 个答案: