html5 音频播放器 - jquery 切换点击播放/暂停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2988050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 audio player - jquery toggle click play/pause?
提问by matt
i wonder what i'm doing wrong?
我想知道我做错了什么？
$('.player_audio').click(function() {
if ($('.player_audio').paused == false) {
$('.player_audio').pause();
alert('music paused');
} else {
$('.player_audio').play();
alert('music playing');
}
});
i can't seem to start the audio track if i hit the "player_audio" tag.
如果我点击“player_audio”标签，我似乎无法启动音轨。
<div class='thumb audio'><audio class='player_audio' src='$path/$value'></audio></div>
any idea what i'm doing wrong or what i have to do to get it working?
知道我做错了什么或我必须做什么才能让它工作吗？
回答by Thash
You can call native methods trough trigger in jQuery. Just do this:
您可以在 jQuery 中通过触发器调用本机方法。只需这样做：
$('.play').trigger("play");
And the same for pause: $('.play').trigger("pause");
暂停也是如此： $('.play').trigger("pause");
EDIT: as F... pointed out in the comments, you can do something similar to access properties: $('.play').prop("paused");
编辑：正如 F... 在评论中指出的那样，您可以执行类似于访问属性的操作： $('.play').prop("paused");
回答by jAndy
Well, I'm not 100% sure, but I don't think jQuery extends/parses those functions and attributes (.paused, .pause(), .play()).
好吧，我不是 100% 确定，但我认为 jQuery 不会扩展/解析这些函数和属性 ( .paused, .pause(), .play())。
try to access those over the DOM element, like:
尝试通过 DOM 元素访问它们，例如：
$('.player_audio').click(function() {
if (this.paused == false) {
this.pause();
alert('music paused');
} else {
this.play();
alert('music playing');
}
});
回答by edwardsharp
I'm not sure why, but I needed to use the old skool document.getElementById();
我不知道为什么，但我需要使用旧的 skool document.getElementById();
<audio id="player" src="http://audio.micronemez.com:8000/micronemez-radio.ogg"> </audio>
<a id="button" title="button">play sound</a>
and the JS:
和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");
}
});
});
Check out an example: http://jsfiddle.net/HY9ns/1/
查看一个例子：http: //jsfiddle.net/HY9ns/1/
回答by David Sinclair
回答by Roey
it might be nice toggling in one line of code:
在一行代码中切换可能会很好：
let video = $('video')[0];
video[video.paused ? 'play' : 'pause']();回答by Muhammad Muneer
Try using Javascript. Its working for me
尝试使用 Javascript。它为我工作
Javascript:
Javascript：
var myAudioTag = document.getElementById('player_video');
myAudioTag.play();
回答by Mantu
Simple Add this Code
简单添加此代码
var status = "play"; // Declare global variable
if (status == 'pause') {
status='play';
} else {
status = 'pause';
}
$("#audio").trigger(status);
回答by webtech
Here is my solution using jQuery
这是我使用 jQuery 的解决方案
<script type="text/javascript">
$('#mtoogle').toggle(
function () {
document.getElementById('playTune').pause();
},
function () {
document.getElementById('playTune').play();
}
);
</script>
And the working demo
和工作演示
回答by MadBrain
Because Firefox does not support mp3 format. To make this work with Firefox, you should use the ogg format.
因为 Firefox 不支持 mp3 格式。要在 Firefox 中使用它，您应该使用 ogg 格式。
回答by kelly
I did it inside of a jQuery accordion.
我是在 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();
});
});
