HTML/JS 音乐播放列表脚本



我是JS的新手,我被要求创建一个可以用完单个HTML文件的音乐播放器。 音乐托管在Google云端硬盘上,因为它必须能够在假期/季节等进行更改

经过大量的拼凑代码以及测试和故障排除,我设法让播放列表非常一致地运行和循环,但我遇到了播放列表随机冻结在歌曲上的问题。 通常是在它至少循环一次之后,我能收集到的唯一解释是连接断开或由于某种原因脚本无法连接到音乐文件。

有没有办法检测歌曲是否播放失败,通过将 localstorage.songposition 增加一个并播放下一个来跳过它?你可以看到我正在尝试使用 try and catch 块来尝试这个,但我想它不会在 JS 中生成错误,因为这不起作用。

在下面的代码中,我删除了指向我们文件的链接,但它应该可以很好地播放第一个链接,第二个链接故意断开,并且它应该检测到它无法播放 #2 并跳到第三个。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Audio Player</title>
<style>
body { background-color: rgba(0,0,0,0); }
#playlist{
list-style: none;
}
#playlist li a{
color:#322f31;
text-decoration: none;
-webkit-text-stroke: 1px #232022;
font-size: 28px;
font-weight:bold;
}
#playlist .current-song a{
color:#ee273c;
font-weight:bold;
-webkit-text-stroke: 1.5px #9a1723;
font-size: 32px;
}
</style>
</head>
<body>
<!-- -->
<!--Audio Player--> 
<audio src="" controls id="audioPlayer" hidden> <!---->
Sorry, your browser doesn't support html5!
</audio>
<!-- List of songs -->
<ul id="playlist"> 
<!--Set 1, Song 1 --><li class="current-song"><a href="Link_here">It Goes Like This</a></li>
<!--Set 2, Song 1 --><li><a href="Broken LInk">Testing Link</a></li>
<!--Set 3, Song 1 --><li><a href="Link_here">Destination Unknown</a></li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script language="javascript">
function audioPlayer(){
var currentSong = 0;
try{
//If the locally stored position doesn't exist yet, set it to currentSong, otherwise increment it by one
if (localStorage.songPosition === "NaN"){
localStorage.songPosition = currentSong
}
else{
localStorage.songPosition++
}
//If the stored song position is greater than the length of the song index, reset it.
if(localStorage.songPosition > $("#playlist li a").length-1){
localStorage.songPosition = 0;
currentSong = 0;
}
//Play the song at the locally stored position
$("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition];
$("#audioPlayer")[0].play();
//Removes the class from the last song and adds the current-song class to the playing song to color it blue
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+localStorage.songPosition+")").addClass("current-song");
//Allows you to click titles to change songs, this is mostly for an actual web page and not necessary for an automatic system.
$("#playlist li a").click(function(e){
e.preventDefault(); 
//Play next song
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
//Move current-song class to next song
$("#playlist li").removeClass("current-song");
currentSong = $(localStorage.songPosition).parent().index();
$(this).parent().addClass("current-song");
});
//Check for the end of the current song, increment the current song counter and play the next one.
$("#audioPlayer")[0].addEventListener("ended", function(){
currentSong++;
localStorage.songPosition = currentSong;
if(localStorage.songPosition > $("#playlist li a").length-1){
currentSong = 0;
localStorage.songPosition = 0;
}
//Move the current-song class to the next song
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
//Play next song
$("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition].href;
$("#audioPlayer")[0].play();                
});
}
catch(err) {
alert("catch")
localStorage.songPosition++
$("#audioPlayer")[0].src = $("#playlist li a")[localStorage.songPosition];
$("#audioPlayer")[0].play();
}
}
</script>
<script>
// loads the audio player
audioPlayer();
</script>
</body>
</html>

这就是我在 javascript 中所做的,只是将脚本放在它周围<>我不认为它会像你一样在一首歌上暂停

document.onkeydown = keydown;
var paused = false;
function keydown(evt) {
if (!evt) evt = event;
if (evt.keyCode == 39) {
// right arrow key
evt.preventDefault();
x.currentTime += 10;
}
if (evt.keyCode == 37) {
//left arrow key
evt.preventDefault();
x.currentTime -= 10;
}
if (evt.keyCode == 119) {
//enter
evt.preventDefault();
x.currentTime = x.duration;
}
if (evt.keyCode == 32) {
//space
evt.preventDefault();
if(paused == false){
x.pause();
paused = true;
}
else{
x.play();
paused = false;
}
}
}
var songList = [
//links to songs
//song1,
//song2
];
function randomChoice(choices) {
var index = Math.floor(Math.random() * choices.length);
return choices[index];
}
function error(){
play()
}
function playAudio() {
try{x.pause();}catch(err){
//pass}finally{
x = randomChoice(songList);
x = new Audio(x);
x.id = 'x';
x.play();
//autoplay
x.addEventListener("ended", function playNextS() {playAudio()})
}};
function pauseAudio() {
x.pause();
}

然后就把

或但如果你愿意,你可以做一些类似的事情

var current = 0; setInterval(function(){oldTime = current; current = x.currentTime; if(currentTime == oldTime && x.paused == false){play()}elif(x.nodeType != 1){play}, 10000)

每 x 秒检查一次歌曲是否仍在播放

最新更新