※html5 jquery3.3.1を使用しています。
実現したいこと
要素が可視範囲より画面上部に出た時にaudioを停止させたい
(本文45が可視範囲に入った時audio再生、本文45が可視範囲から出た時audio停止)
発生している問題・エラーメッセージ
本文4が可視範囲より画面下部に出た場合はaudioが停止するが、
本文5が画面上部に出た時はaudioが停止しない
該当のソースコード
html
1<body> 2 3 <p class="padding">文章1</p> 4 <p class="padding">文章2</p> 5 <p class="padding">文章3</p> 6 <div class="bgmbox"> 7 <p><audio src="BGM.mp3" preload="auto"></audio></p> 8 <p class="padding">文章4</p> 9 <p class="padding">文章5</p> 10 </div> 11 <p class="padding">文章6</p> 12 13 14 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 16 <script src="script.js"></script> 17 18</body>
jQuery
1$(function(){ 2 $(window).scroll(function (){ 3 $(".bgmbox").each(function(){ 4 var objectPos = $(this).offset().top; 5 var scroll = $(window).scrollTop(); 6 var windowHeight = $(window).height(); 7 8 var audio = $('audio', this)[0] 9 10 if (scroll > objectPos - windowHeight){ 11 audio.play(); 12 } 13 14 else { 15 audio.pause(); 16 audio.currentTime = 0; 17 } 18 }); 19 }); 20 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/22 09:15 編集