<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>
这是我用来让访问者下载或播放/暂停音乐的html。这些隐藏的输入用于下载轨道。
这是我的Javascript来播放和暂停音乐。我从堆栈溢出问题中获取了此代码,并且我对其进行了修改,并相应地更改了按钮文本
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;
});
});
上面的脚本可以完美地工作,没有任何问题。如果用户尝试播放新曲目,它会暂停其他音频曲目。但是,当暂停播放曲目时,问题就会出现。除非用户单击另一个播放,否则无法恢复。然后播放该曲目(无法恢复的曲目)。
但是我注意到,当我像这样移动音轨ID时,它会播放并暂停音轨,但是它将同时播放多个。
<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>
正如我上面提到的,我是根据Stack-overflow .im上发布的答案写的那些,我不擅长javascript或jquery。所以如果您向我指出问题会很好。我不胜感激
最佳答案
尝试类似
$(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;
});
});