html5・jquery3.3.1を使用しています。
実現したいこと
※1で再生開始したオーディオを※2で停止させたい。
html
1<body> 2 3 <p class="padding">文章1</p> 4 <p class="padding">文章2</p> 5 <p class="padding">文章3</p> 6 7<div class="bgmbox"> 8<!--※1 音が再生開始してほしい場所--> 9 <audio src="BGM1.mp3" preload="auto"></audio> 10 <p class="padding">文章4</p> 11 <p class="padding">文章5</p> 12<!--※2 音が停止してほしい場所--> 13</div> 14 15 <p class="padding">文章6</p> 16 <p class="padding">文章7</p> 17 18 19<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 20<script src="testscript.js"></script> 21<script type="text/javascript" src="jquery.inview-master/jquery.inview.js"></script> 22 23</body>
JavaScript
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 && scroll <= objectPos){ 11 audio.play(); 12 } 13 14 else { 15 audio.pause(); 16 audio.currentTime = 0; 17 } 18 }); 19 }); 20});
「停止」(else以降)の部分で、
現状audio要素が可視範囲を出たタイミングで音が停止しますが、
補足
**var objectPos = $(this).offset().top; **
の部分が要素に対してではなく、<div>範囲に対して...というふうにできれば解決するのでは、と推測しております。
回答1件
あなたの回答
tips
プレビュー