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

好吧,我不是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');
  }
});

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();