Как добавить звук при достижении определенного раздела HTML-страницы

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

Используя Javascript, вы можете сделать это следующим образом:

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       console.log('H1 on the view!');
   }
});

См. Источник в этой теме: Инициировать событие при переходе пользователя к определенному элементу - с помощью jQuery

Answer 2

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