html5 audio player - jquery toggle click play/pause?
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.
<div class='thumb audio'><audio class='player_audio' src='$path/$value'></audio></di开发者_运维问答v>
any idea what i'm doing wrong or what i have to do to get it working?
You can call native methods trough trigger in jQuery. Just do this:
$('.play').trigger("play");
And the same for pause: $('.play').trigger("pause");
EDIT: as F... pointed out in the comments, you can do something similar to access properties: $('.play').prop("paused");
Well, I'm not 100% sure, but I don't think jQuery extends/parses those functions and attributes (.paused
, .pause()
, .play()
).
try to access those over the DOM element, like:
$('.player_audio').click(function() {
if (this.paused == false) {
this.pause();
alert('music paused');
} else {
this.play();
alert('music playing');
}
});
I'm not sure why, but I needed to use the old 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:
$(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/
This thread was quite helpful. The jQuery selector need to be told which of the selected elements the following code applies to. The easiest way is to append a
[0]
such as
$(".test")[0].play();
it might be nice toggling in one line of code:
let video = $('video')[0];
video[video.paused ? 'play' : 'pause']();
Try using Javascript. Its working for me
Javascript:
var myAudioTag = document.getElementById('player_video');
myAudioTag.play();
Simple Add this Code
var status = "play"; // Declare global variable
if (status == 'pause') {
status='play';
} else {
status = 'pause';
}
$("#audio").trigger(status);
Because Firefox does not support mp3 format. To make this work with Firefox, you should use the ogg format.
Here is my solution using jQuery
<script type="text/javascript">
$('#mtoogle').toggle(
function () {
document.getElementById('playTune').pause();
},
function () {
document.getElementById('playTune').play();
}
);
</script>
And the working demo
http://demo.ftutorials.com/html5-audio/
I did it inside of a jQuery accordion.
$(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();
});
});
if anyone else has problem with the above mentioned solutions, I ended up just going for the event:
$("#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');
})}
});
works for me.
The reason why your attempt didn't work out is, that you have used a class-selector, which returns a collection of elements, not an (=one!) element, which you need to access the players properties and methods. To make it work there's basically three ways, which have been mentioned, but just for an overview:
Get the element – not a collection – by...
Iterating over the colllection and fetching the element with
this
(like in the accepted answer).Using an id-selector, if available.
Getting the element of a collection, by fetching it, via its position in the collection by appending
[0]
to the selector, which returns the first element of the collection.
Here is my solution (if you want to click another element on the page):
$("#button").click(function() {
var bool = $("#player").prop("muted");
$("#player").prop("muted",!bool);
if (bool) {
$("#player").prop("currentTime",0);
}
});
Simply Use
$('audio').trigger('pause');
If you want to play it, you should use
$("#audio")[0].play();
If you want to stop it, you should use
$("#audio").stop();
I don't know why, but it works!
精彩评论