html5 音频播放器 - jquery 切换点击播放/暂停？答案

【问题标题】：html5 audio player - jquery toggle click play/pause?html5 音频播放器 - jquery 切换点击播放/暂停？
【发布时间】：2011-02-28 14:31:03
【问题描述】：

我想知道我做错了什么？

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

知道我做错了什么或者我必须做什么才能让它工作吗？

【问题讨论】：

标签： jquery audio html

【解决方案1】：

简单添加此代码

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

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

【讨论】：

【解决方案2】：

如果你想玩，你应该使用

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

如果你想阻止它，你应该使用

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

我不知道为什么，但它有效！

【讨论】：

【解决方案3】：

在一行代码中切换可能会很好：

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

【讨论】：

【解决方案4】：

您可以在 jQuery 中通过触发器调用原生方法。只需这样做：

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

暂停也一样：$('.play').trigger("pause");

编辑：正如 F... 在 cmets 中指出的那样，您可以执行类似于访问属性的操作：$('.play').prop("paused");

【讨论】：

也许你知道如何在外部（例如使用 $('.play')）检查玩家是在播放还是暂停？
您可以通过 jQuery.get 访问元素的方法和属性，例如$('.play').get(0) 或 $('.play)[0] 然后你可以使用 play() 或 plause() 方法和 paused 属性来检查视频是否暂停。 $('.play').get(0).paused 是布尔值 - 如果暂停则为 true，否则为 false。
它可能很旧，但您可以使用 $('.play').prop("paused"); 访问暂停的属性
如果您需要将播放时间设置为 0 也很有帮助：$(".audioDemo").prop("currentTime",0);

【解决方案5】：

简单使用

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

【讨论】：

【解决方案6】：

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

【讨论】：

知道为什么我的 audio_player 中的简单 mp3 在 firefox 3.6 中不起作用吗？它只显示一个黑色矩形。 chrome 和 safari 完全没有问题！
正如 MadBrain 指出的那样，Firefox 不喜欢 MP3。请改用 Ogg Vorbis。标准化不是很好吗？
您可以使用通过绑定传递的事件变量到单击时包含的函数来获取当前目标，即 DOMElement function(event){ event.currentTarget.play(); } 而不是依赖关键字 this
由于某些原因，音频在 Firefox 中没有暂停。
它现在不工作了。我尝试但浏览器上没有任何警报

【解决方案7】：

尝试使用 Javascript。它对我有用

Javascript：

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

【讨论】：

您应该考虑更新您的答案以匹配问题中的代码 - 该问题未提及名为 audioTag1 的元素。

【解决方案8】：

这是我的解决方案（如果你想点击页面上的另一个元素）：

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

【讨论】：

【解决方案9】：

你的尝试没有成功的原因是，你使用了一个类选择器，它返回一个元素集合，而不是一个（=一个!) 元素，您需要访问播放器的属性和方法。为了让它发挥作用，基本上有三种方法，已经提到过，但只是为了概述：

通过...获取元素——不是集合——

遍历集合并使用this 获取元素（就像在接受的答案中一样）。
使用 id 选择器（如果可用）。
通过将[0]附加到选择器来获取集合的元素，通过它在集合中的位置来获取它，这将返回集合的第一个元素。

【讨论】：

【解决方案10】：

这是我使用 jQuery 的解决方案

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

还有工作演示

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

【讨论】：

【解决方案11】：

这个thread 很有帮助。需要告知 jQuery 选择器以下代码适用于哪些选定元素。最简单的方法是添加一个

[0]

比如

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

【讨论】：

完美运行，通过 js 可以随时“播放”和“暂停”。
这是正确的答案。提取元素并不难——简单的 JQuery 基础知识。

【解决方案12】：

如果其他人对上述解决方案有疑问，我最终只是参加了活动：

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

为我工作。

【讨论】：

【解决方案13】：

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

【讨论】：

您可以像这样使用 jQuery，而不是 getElementById：$('#player').get(0).play() 或 $("#player")[0].play()。

【解决方案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();
        });

    });

【讨论】：

【解决方案15】：

因为 Firefox 不支持 mp3 格式。要在 Firefox 中使用此功能，您应该使用 ogg 格式。

【讨论】：

这应该是对问题帖子的评论，而不是单独的答案。