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

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

ただいまの
回答率

88.03%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 914

score 16

前提・実現したいこと

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

html内、複数のaudio要素(音声ファルが異なる)について、
[jQuery]inview.jsを用いて、
それぞれ可視範囲に入ったとき、audioが再生、可視範囲を出たとき停止を行いたいです。

各audioをそれぞれ$(function() {});で処理を行うにはaudioの数が多く、
効率が悪そうなのですが、
まとめて処理することはできないでしょうか?

自力でやろうとしてif以降の記述をいろいろと試しましたが(下記)、どれもうまくいきません。
現状は画面崩れが起こっています。

どなたかご教授いただけませんでしょうか。

★の部分が該当箇所です。

該当のソースコード

<!--★BGM1--> 
    <section class="bgmbox">
            <audio src="BGM1.mp3" preload="auto" ></audio></section>
<!--画像1-->                                         
            <img src="画像1.jpg" width=100%></section>  
<!--テキスト1-->                                          
            <p>テキスト1</p></section>    

<!--★BGM2--> 
    <section class="bgmbox">
            <audio src="BGM2.mp3" preload="auto" ></audio></section>    
<!--画像2--> 
            <img src="画像2.jpg" width=100%></section>
<!--テキスト2--> 
            <p>テキスト2</p></section>    

<!--★BGM3--> 
    <section class="bgmbox">
            <audio src="BGM3.mp3" preload="auto" ></audio></section>    
<!--画像3--> 
            <img src="画像3.jpg" width=100%></section>
<!--テキスト3--> 
            <p>テキスト3</p></section>   
//inview可視範囲に入ったら音が鳴る
$(function() {
  $('.bgmbox').on('inview', function(event, isInView){ 
      if (isInView) {
//★↓この部分をいろいろ試していますがどれもうまくいきません
        $('audio').each(function(element){
        $(element).get(0).play();
            })
    }
//inview可視範囲から出たら音が止まる
    else{ $(element).get(0).pause();
          $('audio').get(0).currentTime = 0;
      }   

     } 
  });
});

試したこと

★部分について、他に試してみたこと↓
例えば

<!--★BGM1--> 
  <section class="bgmbox">
      <audio src="BGM1.mp3" preload="auto" class="bgm1" ></audio></section>


のようにそれぞれのaudio要素に別々のclassを追加し、if部分を

      if (isInView) {
        $(".bgm1, .bgm2, .bgm3").get(0).play();
            })


とすると、どのaudioが可視範囲に入ってきても"bgm1"のみが再生されるようになってしまいます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

  $('.bgmbox').on('inview', function(event, isInView) {
    var audio = $('audio', this)[0];
    if (isInView) {
      audio.play();
    } else {
      audio.pause();
      audio.currentTime = 0;
    }
  });


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/04 15:09

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

    その他の部分にも言及ありがとうございます。

    キャンセル

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

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る