<html>
<head>
<script type="text/javascript" src=".4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$(".audio-player")[0].play();
$(".message").text("Music started");
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
$(".message").text("Music paused");
})
$("#stop-bt").click(function(){
$(".audio-player")[0].pause();
$(".audio-player")[0].currentTime = 0;
$(".message").text("Music Stopped");
})
})
</script>
</head>
<body>
<audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio>
<audio class ="audio-player" name="" src="04-zedd-stars_e_out_(terravita_remix)" ></audio>
<div class ="message"></div>
<a id = "play-bt" href="#">Play music</a> | <a id ="pause-bt" href="#">Pause music</a> | <a id ="stop-bt" href="#">Stop music</a>
</body>
</html>
This code only plays the first audio tag, how will I be able to play the next song/track/audio tag?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#play-bt").click(function(){
$(".audio-player")[0].play();
$(".message").text("Music started");
})
$("#pause-bt").click(function(){
$("#audio-player")[0].pause();
$(".message").text("Music paused");
})
$("#stop-bt").click(function(){
$(".audio-player")[0].pause();
$(".audio-player")[0].currentTime = 0;
$(".message").text("Music Stopped");
})
})
</script>
</head>
<body>
<audio class ="audio-player" name="" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio>
<audio class ="audio-player" name="" src="04-zedd-stars_e_out_(terravita_remix)" ></audio>
<div class ="message"></div>
<a id = "play-bt" href="#">Play music</a> | <a id ="pause-bt" href="#">Pause music</a> | <a id ="stop-bt" href="#">Stop music</a>
</body>
</html>
This code only plays the first audio tag, how will I be able to play the next song/track/audio tag?
Share Improve this question asked Jul 26, 2012 at 14:53 user962206user962206 16.2k65 gold badges185 silver badges273 bronze badges 5-
You're using
$(".audio-player")[0], that gets the 1st tag. What trouble are you having with getting the other one? – gen_Eric Commented Jul 26, 2012 at 15:00 - Oh I see that's what its for btw may I ask where did Jquery got this method? .play(); ? – user962206 Commented Jul 26, 2012 at 15:10
-
That's not a jQuery method. It's a native DOM method. The
[0]gets the native DOM element from the jQuery object. – gen_Eric Commented Jul 26, 2012 at 15:11 - where can I see the library of the DOM for audio elements? – user962206 Commented Jul 26, 2012 at 15:12
- developer.mozilla/en/Using_HTML5_audio_and_video and developer.mozilla/en/DOM/HTMLMediaElement – gen_Eric Commented Jul 26, 2012 at 15:18
1 Answer
Reset to default 3All the audio elements loaded are in an array, which you can access using the methods you have. If you add a next track function you can browse through all the elements, like so:
$(document).ready(function(){
var x = $(".audio-player").length; // Count total audio players
var z = 0; // Start at first audio player
$("#play-bt").click(function(){
$(".audio-player")[z].play();
$(".message").text("Music started");
})
$("#pause-bt").click(function(){
$("#audio-player")[z].pause();
$(".message").text("Music paused");
})
$("#stop-bt").click(function(){
$(".audio-player")[z].pause();
$(".audio-player")[z].currentTime = 0;
$(".message").text("Music Stopped");
})
$("#next-bt").click(function(){
$(".audio-player")[z].pause();
z++;
if (z >= x) z = 0;
$(".audio-player")[z].play();
$(".message").text("Track: "+z);
})
})
It finds the amount of audio elements with jquery .length, and when you reach the last track it starts from the first one. Here's an example -> http://jsfiddle/8GycB/46/