html5音頻播放器 - jquery切換點擊播放/暫停？

Question

我想知道我做錯了什么？

    $('.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>

我知道我做錯了什么或者我要做些什么才能讓它發揮作用？

Answer 1

您可以通過jQuery中的觸發器調用本機方法。 這樣做：

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

暫停時也是如此： $('.play').trigger("pause");

編輯：作為F ...在評論中指出，你可以做類似於訪問屬性： $('.play').prop("paused");

Answer 2

好吧，我不是百分百肯定，但我不認為jQuery擴展/解析那些函數和屬性（ .paused ， .pause() .play() ）。

嘗試通過DOM元素訪問那些，例如：

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

Answer 3

我不知道為什么，但我需要使用舊的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/

Answer 4

這個帖子非常有幫助。 需要告訴jQuery選擇器以下代碼適用於哪個選定元素。 最簡單的方法是附加一個

    [0]

如

    $(".test")[0].play();

Answer 5

在一行代碼中切換可能很好：

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

Answer 6

嘗試使用Javascript。 它為我工作

使用Javascript：

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

Answer 7

因為Firefox不支持mp3格式。 要使用此功能，您應該使用ogg格式。

Answer 8

簡單地使用

$('audio').trigger('pause');

Answer 9

簡單添加此代碼

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

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

Answer 10

如果其他人對上述解決方案有疑問，我最終只是為了這個活動：

$("#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');
    })}
});

適合我。

Answer 11

這是我使用jQuery的解決方案

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

和工作演示

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

Answer 12

你的嘗試沒有成功的原因是你使用了一個類選擇器，它返回一個元素集合，而不是一個 （= one！）元素，你需要訪問這些元素和方法。 為了使其工作，基本上有三種方法，已經提到過，但只是為了概述：

通過...獲取元素 - 而不是集合

• 遍歷colllection並獲取與元素this （如在接受的答案）。

• 使用id-selector（如果可用）。

• 通過將[0]附加到選擇器（通過返回集合的第一個元素）來獲取集合的元素，方法是通過它在集合中的位置獲取它。

Answer 13

這是我的解決方案（如果你想點擊頁面上的另一個元素）：

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

Answer 14

我在一個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();
        });

    });

Answer 15

如果你想玩它，你應該使用

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

如果你想停止它，你應該使用

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

我不知道為什么，但它的確有效！