HTML5audio播放器 – 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> 

任何想法我做错了什么，或者我必须做什么来得到它的工作？

Answer 1

好吧，我不是100％确定，但我不认为jQuery扩展/parsing这些函数和属性（ .paused ， .pause() .play() ）。

尝试访问那些DOM元素，如：

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

Answer 2

你可以在jQuery中调用本地方法。 只要这样做：

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

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

编辑：作为F …在评论中指出，你可以做一些类似的访问属性： $('.play').prop("paused");

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

这个线程是相当有帮助的。 jQueryselect器需要被告知下列代码适用于哪个选定的元素。 最简单的方法是追加一个

  [0] 

如

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

Answer 5

尝试使用Javascript。 它为我工作

使用Javascript：

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

Answer 6

由于Firefox不支持MP3格式。 为了使这个工作与Firefox，你应该使用ogg格式。

Answer 7

简单使用

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

Answer 8

我是在一个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 9

如果其他人有上述解决scheme的问题，我结束了刚刚去的事件：

 $("#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 10

这是我使用jQuery的解决scheme

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

和工作演示

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

Answer 11

你的尝试没有解决的原因是，你使用了一个类select器，它返回一个元素集合，而不是一个 （= one！）元素，你需要访问玩家属性和方法。 为了使其工作，基本上有三种方法，已经提到，但只是一个概述：

获取元素 – 不是一个集合 – 通过…

• 遍历colllection并用this获取元素（就像在接受的答案中一样）。

• 使用idselect器（如果可用）。

• 获取集合的元素，通过在集合中的位置获取，通过在select器上附加[0]来返回集合的第一个元素。

Answer 12

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

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

Answer 13

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

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