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> 

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

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

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

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

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

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

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

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

  [0] 

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

尝试使用Javascript。 它为我工作

使用Javascript:

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

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

简单使用

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

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

如果其他人有上述解决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'); })} }); 

为我工作。

这是我使用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/

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

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

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

  • 使用idselect器(如果可用)。

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

这是我的解决scheme(如果你想点击页面上的另一个元素):

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

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

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