web-dev-qa-db-ja.com

html5オーディオプレーヤー-jqueryトグルクリック再生/一時停止？

私は何を間違っているのだろうか？

    $('.player_audio').click(function() {
    if ($('.player_audio').paused == false) {
        $('.player_audio').pause();
        alert('music paused');
    } else {
        $('.player_audio').play();
        alert('music playing');
    }
});

「player_audio」タグを押すと、オーディオトラックを開始できないようです。

<div class='thumb audio'><audio class='player_audio' src='$path/$value'></audio></div>

何が間違っているのか、それを機能させるために何をしなければならないのか？

jqueryaudiohtml5
49
matt

まあ、100％確信はありませんが、jQueryはこれらの関数と属性（_.paused_、.pause()、.play()）を拡張/解析するとは思いません。

次のように、DOM要素を介してこれらにアクセスしてください。

_$('.player_audio').click(function() {
  if (this.paused == false) {
      this.pause();
      alert('music paused');
  } else {
      this.play();
      alert('music playing');
  }
});
_
68
jAndy

JQueryでトリガーを介してネイティブメソッドを呼び出すことができます。これを行うだけです：

_$('.play').trigger("play");
_

一時停止についても同じ：$('.play').trigger("pause");

編集：コメントでF ...が指摘したように、プロパティにアクセスするのと同様のことができます：$('.play').prop("paused");

99
Thash

理由はわかりませんが、古いskool document.getElementById（）;を使用する必要がありました。

<audio id="player" src="http://audio.micronemez.com:8000/micronemez-radio.ogg"> </audio>
<a id="button" title="button">play sound</a>

そしてJS：

$(document).ready(function() {
  var playing = false;

  $('a#button').click(function() {
      $(this).toggleClass("down");

      if (playing == false) {
          document.getElementById('player').play();
          playing = true;
          $(this).text("stop sound");

      } else {
        document.getElementById('player').pause();
        playing = false;
        $(this).text("restart sound");
      }

  });
});

例を確認してください： http://jsfiddle.net/HY9ns/1/

17
edwardsharp

この thread は非常に役に立ちました。 jQueryセレクターには、次のコードが選択された要素のどれに適用されるかを知らせる必要があります。最も簡単な方法は、

    [0]

といった

    $(".test")[0].play();
16
David Sinclair

1行のコードでトグルするのもいいかもしれません。

let video = $('video')[0];
video[video.paused ? 'play' : 'pause']();
3
Roey

Javascriptを使用してみてください。私のために働く

Javascript：

var myAudioTag = document.getElementById('player_video');
myAudioTag.play();
2
Muhammad Muneer

このコードを簡単に追加

        var status = "play"; // Declare global variable

        if (status == 'pause') {
            status='play';                
        } else {
            status = 'pause';     
        }
        $("#audio").trigger(status);
1
Mantu

Firefoxはmp3形式をサポートしていないためです。これをFirefoxで機能させるには、ogg形式を使用する必要があります。

1
MadBrain

単に使用する

$('audio').trigger('pause');
1
Deepak swain

ここに私の解決策があります（ページ上の別の要素をクリックする場合）：

$("#button").click(function() {
        var bool = $("#player").prop("muted");
        $("#player").prop("muted",!bool);
        if (bool) {
            $("#player").prop("currentTime",0);
        }
});
0
Halpo

あなたがそれをプレイしたい場合は、使用する必要があります

$("#audio")[0].play();

停止したい場合は、使用する必要があります

$("#audio").stop();

理由はわかりませんが、うまくいきます！

0
Velade

reason試行がうまくいかなかった理由は、an（= one！）要素ではなく、要素のコレクションを返すクラスセレクタを使用したためです、プレーヤーのプロパティとメソッドにアクセスする必要があります。それを機能させるために、基本的に3つの方法がありますが、それらは言及されていますが、概要のためだけです：

コレクションではなく要素を取得する方法.

  • コレクションを反復処理し、the要素をthisで取得します（受け入れられた回答のように）。

  • 可能な場合、IDセレクターを使用します。

  • コレクションの最初の要素を返すセレクタに[0]を追加することで、コレクション内の位置を介して、コレクションの要素を取得して取得します。

0
Ida Ebkes

他の誰かが上記のソリューションに問題がある場合、私はイベントに行きました：

$("#jquery_audioPlayer").jPlayer({
    ready:function () {
        $(this).jPlayer("setMedia", {
            mp3:"media/song.mp3"
        })
        ...
    pause: function () {
      $('#yoursoundcontrol').click(function () {
            $("#jquery_audioPlayer").jPlayer('play');
      })
    },
    play: function () {
    $('#yoursoundcontrol').click(function () {
            $("#jquery_audioPlayer").jPlayer('pause');
    })}
});

私のために働く。

0
yogee

JQueryアコーディオンの内部でそれを行いました。

$(function() {
        /*video controls*/
            $("#player_video").click(function() {
              if (this.paused == false) {
                  this.pause();
              }
            });
        /*end video controls*/

        var stop = false;
        $("#accordion h3").click(function(event) {
            if (stop) {
                event.stopImmediatePropagation();
                event.preventDefault();
                stop = false;
            }
            $("#player_video").click();
        });

    });
0
kelly

ここにjQueryを使用した私のソリューションがあります

<script type="text/javascript">
    $('#mtoogle').toggle(
        function () {
            document.getElementById('playTune').pause();
        },
        function () {
            document.getElementById('playTune').play();
        }
    );
</script>

そして、作業デモ

http://demo.ftutorials.com/html5-audio/

0
webtech