我正在研究音乐播放器的前后，如果.attr('song');将在同一currentTime播放声音。是一样的，但是如果.attr('song');更改后，应将currentTime重置为0。它可用于同时播放声音，但如果attr不同，则不会重置。如果用户单击“before”或“after”按钮，并且两首歌曲.attr('song')==摇滚，它都不应将currentTime重置为0，但如果他们单击按钮和.attr('song');是不同的，应该将currentTime设置为0
JSFiddle:
https://jsfiddle.net/jeffd/z7uymp23/
HTML:
<div class="songtype">Rock <br> <div class="smallerthang"><strong>Steve Godsley</strong> by Boontango</div></div>
<div class="beforebutton player" key="rockbefore.mp3" song="rock"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> Before</div>
<div class="afterbutton player" key="rockafter.mp3" song="rock"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> After</div>
<div class="songtype">Rap <br> <div class="smallerthang"><strong>Million or More</strong> by China Fox, Superhype Mic, Warren 'Thir13een' Young, Nicolas BONNEYRAT</div></div>
<div class="beforebutton player" key="rapbefore.mp3" song="rap"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> Before</div>
<div class="afterbutton player" key="rapafter.mp3" song="rap"><span class="symbol"><i class="material-icons playbuttonyo">play_circle_filled</i></span> After</div>
JQuery
window.nowplay=$(".player");
$(".player").on('click', function () {
var key = $(this).attr('key');
var song = $(this).attr('song');
window.nowplay = $(this);
window.nowplay2 = $(this);
EvalSound(this, key);
$(".player").not(this).removeClass("pause");
$(".player").not(this).children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");
nowplay.addClass("pause");
});
var thissound = new Audio();
var currentKey;
function EvalSound(el, key) {
thissound.addEventListener('ended', function () {
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
});
thissound.addEventListener('pause', function () {
nowplay.removeClass("pause");
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
});
thissound.addEventListener('loadstart', function () {
});
thissound.addEventListener('playing', function () {
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");
});
var timenow = thissound.currentTime;
if (currentKey !== key) thissound.src = key;
currentKey = key;
//currentSong = song;
thissound.currentTime = timenow;
//if (song !== currentSong) thissound.currentTime = 0;
if (thissound.paused) thissound.play();
else thissound.pause();
currentPlayer = thissound;
}
最佳答案
我要做的是在之前添加一个全局变量'oldsong'window.oldsong = nowplay.attr('song');，，将全局变量nowplay更改为$(this)，然后在播放新歌曲时检查其是否匹配，thissound.currentTime = timenow;
if (nowplay.attr('song') !== oldsong) thissound.currentTime = 0;
这是附加的工作代码和js小提琴:
JSFiddle
https://jsfiddle.net/jeffd/z7uymp23/1/
jQuery window.nowplay=$(".player");
$(".player").on('click', function () {
var key = $(this).attr('key');
var song = $(this).attr('song');
window.oldsong = nowplay.attr('song');
window.nowplay = $(this);
window.nowplay2 = $(this);
EvalSound(this, key);
$(".player").not(this).removeClass("pause");
$(".player").not(this).children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");
nowplay.addClass("pause");
});
var thissound = new Audio();
var currentKey;
function EvalSound(el, key) {
thissound.addEventListener('ended', function () {
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
});
thissound.addEventListener('pause', function () {
nowplay.removeClass("pause");
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>play_circle_filled</i>");
});
thissound.addEventListener('loadstart', function () {
});
thissound.addEventListener('playing', function () {
nowplay.children('.symbol').html("<i class='material-icons playbuttonyo'>pause_circle_filled</i>");
});
var timenow = thissound.currentTime;
if (currentKey !== key) thissound.src = key;
currentKey = key;
//currentSong = song;
thissound.currentTime = timenow;
if (nowplay.attr('song') !== oldsong) thissound.currentTime = 0;
if (thissound.paused) thissound.play();
else thissound.pause();
currentPlayer = thissound;
}
</script>
关于jquery - 如果歌曲attr不匹配，请将currentTime重置为0，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41646719/