使用CSS實現(xiàn)音樂的連續(xù)播放是一項非常有趣的技能。下面我們來了解一下怎么實現(xiàn)。

.music-container{
display: flex;
flex-wrap: wrap;
}
.music{
width: 100px;
height: 100px;
background-color: #f9f9f9;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
transition: transform 0.2s ease;
}
.music:hover{
transform: scale(1.1);
}
.music.playing{
background-color: #2196f3;
color: #fff;
}
.music.playing:before{
content: "\25b6";
font-size: 20px;
}
.music.playing:hover{
transform: scale(1);
}

上面的代碼中，我們首先定義了一個音樂列表容器，然后是每一首音樂的樣式。其中，我們?yōu)槊恳皇赘枨O(shè)置了一個play狀態(tài)，用來區(qū)別正在播放的音樂。在play狀態(tài)下，我們將音樂的背景顏色改為了藍(lán)色，并在左側(cè)添加了一個播放圖標(biāo)。

var musicList = document.querySelector('.music-container');
var musicArr = [];
for (var i = 0; i < musicList.children.length; i++) {
musicArr.push(musicList.children[i]);
}
var curIndex = 0;
var curMusic = null;
function playMusic() {
if (curMusic) {
curMusic.pause();
}
curMusic = musicArr[curIndex].querySelector('audio');
curMusic.play();
musicArr[curIndex].classList.add('playing');
}
musicList.addEventListener('click', function(e){
var index = musicArr.indexOf(e.target);
if (index !== -1) {
curIndex = index;
playMusic();
}
});
curMusic.addEventListener('ended', function(){
musicArr[curIndex].classList.remove('playing');
curIndex++;
if (curIndex >= musicArr.length) {
curIndex = 0;
}
playMusic();
});

上面的代碼中，我們通過遍歷音樂列表，將每一首音樂的節(jié)點存儲在一個數(shù)組中。然后為音樂列表添加了點擊事件，當(dāng)用戶點擊音樂時，我們會將該音樂在數(shù)組中的索引作為當(dāng)前播放的音樂，并且調(diào)用playMusic()函數(shù)播放該音樂。

在playMusic()函數(shù)中，我們首先判斷了是否有其它音樂在播放，如果有，我們先暫停它。然后找到當(dāng)前需要播放的音樂的audio節(jié)點，并調(diào)用play()函數(shù)來播放。最后，我們?yōu)楫?dāng)前播放的音樂所在的節(jié)點添加playing狀態(tài)，以標(biāo)記當(dāng)前正在播放的音樂。

最后，我們監(jiān)聽了當(dāng)前播放音樂的ended事件，當(dāng)當(dāng)前音樂播放完畢時，我們會為該音樂所在的節(jié)點移除playing狀態(tài)，并將當(dāng)前索引加一，如果當(dāng)前索引大于等于數(shù)組長度，則將當(dāng)前索引設(shè)置為0，調(diào)用playMusic()函數(shù)繼續(xù)播放下一首音樂。