在前端，有一个选择框和一个音乐播放器。
这是我的 html ，在Salvo Nostrato的帮助下:
<!DOCTYPE html>
<html>
<head>
<title> Test </title>
<script src="jquery-3.2.1.min.js"> </script>
<script src="whatToPlay.js"> </script>
</head>
<body onload="onload();">
<select id="changeselection" name="change-selection">
<option id="change1" value="change1" selected>Song 1</option>
<option id="change2" value="change2">Song 2</option>
<option id="change3" value="change3">Song 3</option>
</select>
<audio id="audio1" tabindex="0" controls="" type="audio/mpeg" controls preload>
<source id="audiochange" type="audio/mp3" src="audio/default.mp3">
Sorry, your browser does not support HTML5 audio.
</audio>
</body>
</html>
和我的 whatToPlay.js 文件，并在Salvo Nostrato( jQuery )的帮助下:
$(document).ready(function() {
$("#changeselection").on("change",function(){
audio=$("#audio1");
$("#audio1").attr("src",src);
if($(this).val()=="change2"){
var src = "audio/song2.mp3";
console.log('change2');
}
else if ($(this).val()=="change3"){
var src = "audio/song3.mp3";
console.log('change3');
}
else {
var src = "audio/default.mp3";
console.log('change1');
}
audio=$("#audio1");
$("#audio1").attr("src",src);
audio[0].pause();
audio[0].load();//suspends and restores all audio element
audio[0].play();
});
});
当我选择乐曲2(id =“change2”)时，我想播放audio / song2.mp3，然后当我结束时，我要音频/song2A.mp3立即播放。如何最小化将其添加到我的代码中？
最佳答案
您必须为ended事件使用事件处理程序。
这是我输入得非常快的内容……Whithout测试了它。
但是意见应该对这个想法有所帮助。
$(document).ready(function() {
// Lookup for the audio element
var audio = $("#audio1");
// Lookup for the select element
var audioChange = $("#changeselection");
// Create an audio source array
var audioSources = [
"audio/default.mp3",
"audio/song2.mp3",
"audio/song3.mp3"
];
// Select change handler
audioChange.on("change",function(){
if($(this).val()=="change2"){
var src = audioSources[1];
console.log('change2');
}
else if ($(this).val()=="change3"){
var src = audioSources[2];
console.log('change3');
}
else {
var src = audioSources[0];
console.log('change1');
}
// Step 1 - Pause the playing audio
audio[0].pause();
// Step 2 - Change the audio source using what the above contitions determined.
audio.attr("src",src);
// Step 3 - Load this new source
audio[0].load();
// Step 4 - Play!
audio[0].play();
});
// Song ended handler
audio.on("ended", function() {
// Find what has just ended
var whichEnded = $(this).attr("src");
// Find its index in the array
var thisSrcIndex = audioSources.indexOf(whichEnded);
// If last index, set it to -1
if(thisSrcIndex==audioSources.length-1){
thisSrcIndex = -1;
}
// increment the index
thisSrcIndex++;
// Same steps as in the other handler here...
// Step 2 - Change the audio source using what the above contitions determined.
audio.attr("src",audioSources[thisSrcIndex]);
// Step 3 - Load this new source
audio[0].load();
// Step 4 - Play!
audio[0].play();
});
});
关于jquery - 如何使用JQuery播放连续的歌曲？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44606466/