问题
<form action="downloads_new.php" method="post">
Track Name :- <b>i run this bitch</b><br />
By :- <a href="profile.php?id=17">DJ Harsha</a><br />
<div id="22">
<button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
<audio src="memberfiles/17/i run this bitch.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
</div>
<input type="hidden" value="i run this bitch.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTcvaSBydW4gdGhpcyBiaXRjaC5tcDM=" name="link">
</form>
<br>
<form action="downloads_new.php" method="post">
Track Name :- <b>ai se eu tei pego</b><br />
By :- <a href="profile.php?id=16">DJ perera</a><br />
<div id="21">
<button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
<audio src="memberfiles/16/ai se eu tei pego.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
</div>
<input type="hidden" value="ai se eu tei pego.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvYWkgc2UgZXUgdGVpIHBlZ28ubXAz" name="link">
</form>
<br>
<form action="downloads_new.php" method="post">
Track Name :- <b>Krewella - Live for the night</b><br />
By :- <a href="profile.php?id=16">DJ perera</a><br />
<div id="20">
<button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
<audio src="memberfiles/16/Krewella - Live for the night.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
</div>
<input type="hidden" value="Krewella - Live for the night.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvS3Jld2VsbGEgLSBMaXZlIGZvciB0aGUgbmlnaHQubXAz" name="link">
</form>
<br>
<form action="downloads_new.php" method="post">
Track Name :- <b>bella vita</b><br />
By :- <a href="profile.php?id=16">DJ perera</a><br />
<div id="19">
<button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
<audio src="memberfiles/16/bella vita.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
</div>
<input type="hidden" value="bella vita.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvYmVsbGEgdml0YS5tcDM=" name="link">
</form>
<br>
This is my html which im using to let visitors to download or play/pause music . Those hidden inputs are used to download the track.
and here is my javascript to play and pause the music . i took this code from stack-overflow question and i have modified it change button text accordingly
var curPlaying;
$(function () {
$(".playback").click(function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
song.play();
$(this).html('<i class="fa fa-pause"></i> Stop');
if (curPlaying) $("audio", "#" + curPlaying)[0].pause();
} else {
song.pause();
$(this).html('<i class="fa fa-play"></i> Play');
}
curPlaying = $(this).parent()[0].id;
});
});
The above script works perfectly without any issues . it pauses any other audio tracks if user tries to play a new track . however the problem rises when a playing track is paused . it cannot be resumed unless user clicks another to play. then that track(track which was unable to resume) and be played.
however i have noticed that when i move the track id couple of line up like this it play and pauses the track but it will play multiple at the same time .
<form action="downloads_new.php" method="post">
<div id="21">
Track Name :- <b>ai se eu tei pego</b>
<br />By :- <a href="profile.php?id=16">DJ perera</a>
<br />
<button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
<audio src="memberfiles/16/ai se eu tei pego.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<input type="hidden" value="ai se eu tei pego.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvYWkgc2UgZXUgdGVpIHBlZ28ubXAz" name="link">
</div>
as i mentioned above i wrote this those according to an answer posted on Stack-overflow .im not good at javascript or jquery . so it will nice if you point me out the problem . ill greatly appreciate it
回答1:
Try something like
$(function () {
var curAudio;
$(".playback").click(function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (curAudio && song != curAudio && !curAudio.paused) {
curAudio.pause();
$(curAudio).prev().html('<i class="fa fa-play"></i> Play');
}
if (song.paused) {
song.play();
curAudio = song;
$(this).html('<i class="fa fa-pause"></i> Stop');
} else {
song.pause();
curAudio = undefined;
$(this).html('<i class="fa fa-play"></i> Play');
}
curPlaying = $(this).parent()[0].id;
});
});
回答2:
Rather than storing the id of the current playing audio element, you can simplify your logic by pausing them as a group when playing a new one:
$(function () {
$(".playback").click(function (e) {
e.preventDefault();
var $playback = $(this);
$('audio').not(this).each(function() { $(this)[0].pause(); });
var audio = $(this).next('audio')[0];
if (audio.paused) {
audio.play()
$playback.html('<i class="fa fa-pause"></i> Stop');
}
else {
audio.pause();
$playback.html('<i class="fa fa-play"></i> Play');
}
});
});
来源：https://stackoverflow.com/questions/27247144/multiple-instance-audio-play-using-jquery-javascript