質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2093閲覧

複数のaudioの個別再生をinview.jsで制御したい

uzurazura

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/02 06:49

前提・実現したいこと

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"のみが再生されるようになってしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

inview.jsは複数ありますが、これが使われているものとして回答します。
https://github.com/protonet/jquery.inview

jQuery

1 $('.bgmbox').on('inview', function(event, isInView) { 2 var audio = $('audio', this)[0]; 3 if (isInView) { 4 audio.play(); 5 } else { 6 audio.pause(); 7 audio.currentTime = 0; 8 } 9 });

対象の audio 要素を取得するため、 context を指定してください。
https://api.jquery.com/jQuery/#jQuery1

また、</section>が多いので確認してください。

投稿2019/04/04 05:30

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uzurazura

2019/04/04 06:09

ご回答有り難うございます! うまくいきました!! class指定など不要なのですね。 thisなど初歩的な部分の知識が足りておらず踏み入ったことのない手法でした。 こんなにシンプルに扱えて、スッキリです! その他の部分にも言及ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問