要素が可視範囲に入るとaudioの停止

※html5 jquery3.3.1を使用しています。

実現したいこと

※1で再生されたaudioを※2で停止させる方法が知りたい

現状

audioの再生はできたが停止しない

"var audio = $('audio', this)[0]"の宣言の記述が間違っているのか
再生中のaudioが停止しません

html
1<body>
2
3        <p class="padding">文章1</p>
4        <p class="padding">文章2</p>           
5        <p class="padding">文章3</p>
6    
7    <!--※1 audio再生-->
8    <div class="bgmbox">
9        <p><audio src="bgm.mp3" preload="auto"></audio></p>
10        <p class="padding">文章4</p>
11        <p class="padding">文章5</p>
12
13    <!--※2 audio停止-->
14    </div>
15        <p class="padding">文章6</p>
16
17
18</body>

jQuery
1/* 可視範囲でaudio再生、可視範囲外でaudio停止 */     
2
3$(function(){
4  $(window).scroll(function (){
5    $(".bgmbox").each(function(){
6      var objectPos    = $(this).offset().top;  
7      var scroll       = $(window).scrollTop(); 
8      var windowHeight = $(window).height();   
9
10      var audio = $('audio', this)[0]
11 
12      if (scroll > objectPos - windowHeight){
13      audio.play();
14    }
15
16    else {
17    audio.pause();
18    audio.currentTime = 0;
19    }
20  });
21  });
22  });

行動規範の内容に同意します

回答1件

ベストアンサー

これで解決してなかったんですね。

繰り返しになりますが、下記URLの考え方で実装できませんか？
http://koseki.hatenablog.com/entry/20111021/range

始点2 <= 終点1 && 始点1 <= 終点2

「要素が可視範囲に入る」＝「$(this) と $(window) が重なっているとき」
に停止したいのであれば、

始点1: $(this).offset().top
終点1: $(this).offset().top + $(this).height()
始点2: $(window).scrollTop()
終点2: $(window).scrollTop() + $(window).height()

として、以下のように実装できると思います。

if (始点2 <= 終点1 && 始点1 <= 終点2) {
    // 停止
} else {
    // 再生
}

ちなみに、$(window).scroll(function (){ でイベントハンドラを2つ登録して、
それぞれで異なる条件で再生したり停止したりするとおかしなことになりますよ。

投稿2019/04/23 06:08

編集2019/04/23 06:15

wtokuno

総合スコア448

wtokuno

2019/04/23 06:39

ほぼ同じコードで質問しているユーザーがいるけど何か関係あるんだろうか。 https://teratail.com/questions/185952

rakorako

2019/04/23 18:04

ご回答ありがとうございます。ご提示いただいたコードではうまくいかないようでした。 HTMLの※1~※2の間が画面可視範囲内に入っている時だけBGMが再生されるようにしたいです。前回の質問で自分のコードを以下のように書き換えました。 if (scroll > objectPos - windowHeight && scroll <= objectPos) しかしこのコードでは<audio>が画面外に出た時にBGMが停止してしまいます。 </div>が画面外に出た時にBGMが停止するのが理想なのですが、方法がわかりましたらご教授いただけますと幸いです。

wtokuno

2019/04/23 23:37

> 前回の質問で自分のコードを以下のように書き換えました。 > if (scroll > objectPos - windowHeight && scroll <= objectPos) んーと、その条件式がどうやってでてきたのかちょっとよくわかりませんが、下記で始点1: $(this).offset().top 終点1: $(this).offset().top + $(this).height() 始点2: $(window).scrollTop() 終点2: $(window).scrollTop() + $(window).height() 下記をそのまんま置換すると if (始点2 <= 終点1 && 始点1 <= 終点2) { こうなりません？ if ($(window).scrollTop() <= ($(this).offset().top + $(this).height()) && $(this).offset().top <= ($(window).scrollTop() + $(window).height())) { そんで、定義済みの変数を活用するとこうなる。 if (scroll <= (objectPos + $(this).height()) && objectPos <= (scroll + windowHeight)) {

rakorako

2019/04/24 02:13

詳しく書いていただきありがとうございます。コピーペーストして書き込んでみましたがやはりうまくいかないようでした。ちなみに下記の結果になりました。 ※1が可視範囲に入るとBGM再生、画面上部へ出るとBGM停止。 ※2が可視範囲に入ってもBGMが停止しない。 if (scroll <= (objectPos + $(this).height()) && objectPos <= (scroll + windowHeight)) { の&&より右側の部分だけ狙いと違う動きをしているようです。

wtokuno

2019/04/24 03:16

<div class="bgmbox"> で囲まれている部分が表示されているかどうかを判定してます。 <div class="bgmstop"> のタグがその中に入ってしまっているので - HTMLを調整して、<div class="bgmstop"> が <div class="bgmbox"> の外に移動するか - 条件式を修正して、終点1を<div class="bgmstop">の位置とするなどしてください。

rakorako

2019/04/24 03:58

ややこしい質問にお付き合いいただきありがとうございます。 HTMLとjQueryを修正しました。 "ちなみに、$(window).scroll(function (){ でイベントハンドラを2つ登録して、それぞれで異なる条件で再生したり停止したりするとおかしなことになりますよ。" $(window).scroll(function (){ を1つに変更しました。 ”HTMLを調整して、<div class="bgmstop"> が <div class="bgmbox"> の外に移動する” bgmstopは使用していないようなので削除しました。試してみましたがまだうまくいきません。 </div>のところでBGMを停止したいのですが下記結果になりました。 ※1が可視範囲に入るとBGM再生、画面上部へ出るとBGM停止。 ※2(</div>)が可視範囲に入ってもBGMが停止しない。

wtokuno

2019/04/24 04:37

私の提示したコードは「$(this) と $(window) が重なっているとき」≒「文章4、文章5の部分が表示されているとき」です。 rakorako さんの意図が、「だたし、文章4、文章5が表示されていても、文書6以降の部分がちょっとでも見えたら停止」という意味でしたら、それを条件に加えてください。 if (scroll <= (objectPos + $(this).height()) && objectPos <= (scroll + windowHeight) && 文書6以降の部分が見えていない) {

rakorako

2019/04/24 07:49 編集

すみません。こちらの勘違いでした。ご提示いただいたコードを再度試したところ無事想定通りの位置でBGMを停止させることができました。長々とお付き合いいただきありがとうございました。

行動規範の内容に同意します