前提・実現したいこと
html5・jquery3.3.1を使用しています。
html内、複数のaudio要素(音声ファルが異なる)について、
[jQuery]inview.jsを用いて、
それぞれ可視範囲に入ったとき、audioが再生、可視範囲を出たとき停止を行いたいです。
各audioをそれぞれ$(function() {});で処理を行うにはaudioの数が多く、
効率が悪そうなのですが、
まとめて処理することはできないでしょうか?
自力でやろうとしてif以降の記述をいろいろと試しましたが(下記)、どれもうまくいきません。
現状は画面崩れが起こっています。
どなたかご教授いただけませんでしょうか。
★の部分が該当箇所です。
該当のソースコード
html
1<!--★BGM1--> 2 <section class="bgmbox"> 3 <audio src="BGM1.mp3" preload="auto" ></audio></section> 4<!--画像1--> 5 <img src="画像1.jpg" width=100%></section> 6<!--テキスト1--> 7 <p>テキスト1</p></section> 8 9<!--★BGM2--> 10 <section class="bgmbox"> 11 <audio src="BGM2.mp3" preload="auto" ></audio></section> 12<!--画像2--> 13 <img src="画像2.jpg" width=100%></section> 14<!--テキスト2--> 15 <p>テキスト2</p></section> 16 17<!--★BGM3--> 18 <section class="bgmbox"> 19 <audio src="BGM3.mp3" preload="auto" ></audio></section> 20<!--画像3--> 21 <img src="画像3.jpg" width=100%></section> 22<!--テキスト3--> 23 <p>テキスト3</p></section>
JavaScript
1//inview可視範囲に入ったら音が鳴る 2$(function() { 3 $('.bgmbox').on('inview', function(event, isInView){ 4 if (isInView) { 5//★↓この部分をいろいろ試していますがどれもうまくいきません 6 $('audio').each(function(element){ 7 $(element).get(0).play(); 8 }) 9 } 10//inview可視範囲から出たら音が止まる 11 else{ $(element).get(0).pause(); 12 $('audio').get(0).currentTime = 0; 13 } 14 15 } 16 }); 17});
試したこと
★部分について、他に試してみたこと↓
例えば
html
1<!--★BGM1--> 2 <section class="bgmbox"> 3 <audio src="BGM1.mp3" preload="auto" class="bgm1" ></audio></section>
のようにそれぞれのaudio要素に別々のclassを追加し、if部分を
JavaScript
1 if (isInView) { 2 $(".bgm1, .bgm2, .bgm3").get(0).play(); 3 })
とすると、どのaudioが可視範囲に入ってきても"bgm1"のみが再生されるようになってしまいます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/04 06:09