近年來Web前端技術(shù)飛速發(fā)展，jQuery作為一款優(yōu)秀的JavaScript庫，在前端開發(fā)中得到了廣泛應(yīng)用。下面我們將介紹一款基于jQuery的酷狗音樂實例。

$(function(){
// 定義變量
var audio = document.getElementById('myaudio'); // 音頻對象
var currentTrack = 0; // 默認播放第一首歌
var numOfTracks = $('ol li').length; // 音頻數(shù)量
// 初始化
$('ol li').eq(currentTrack).addClass('active'); // 高亮顯示當前歌曲
$('#trackname').text($('ol li').eq(currentTrack).text()); // 顯示歌曲名
$('#myaudio source').attr('src', $('ol li').eq(currentTrack).attr('songurl')); // 加載音樂文件
audio.load(); // 加載音頻
// 監(jiān)聽播放完畢事件
$(audio).on('ended',function(){
currentTrack ++;
if(currentTrack == numOfTracks){ // 播放完畢，回到第一首歌
currentTrack = 0;
}
$('ol li').removeClass('active'); // 取消高亮當前歌曲
$('ol li').eq(currentTrack).addClass('active'); // 高亮下一首歌曲
$('#trackname').text($('ol li').eq(currentTrack).text()); // 顯示歌曲名
$('#myaudio source').attr('src', $('ol li').eq(currentTrack).attr('songurl')); // 加載下一首音樂文件
audio.load(); // 加載音頻
audio.play(); // 播放下一首歌曲
});
// 監(jiān)聽播放按鈕點擊事件
$('#playbtn').on('click',function(){
if(audio.paused){ // 當前暫停狀態(tài)，播放音樂
audio.play();
}else{ // 當前播放狀態(tài)，暫停音樂
audio.pause();
}
});
// 監(jiān)聽上一曲按鈕點擊事件
$('#prevbtn').on('click',function(){
currentTrack --;
if(currentTrack < 0){ // 已經(jīng)是第一首歌了，播放最后一首歌
currentTrack = numOfTracks - 1;
}
$('ol li').removeClass('active'); // 取消高亮當前歌曲
$('ol li').eq(currentTrack).addClass('active'); // 高亮上一首歌曲
$('#trackname').text($('ol li').eq(currentTrack).text()); // 顯示歌曲名
$('#myaudio source').attr('src', $('ol li').eq(currentTrack).attr('songurl')); // 加載上一首音樂文件
audio.load(); // 加載音頻
audio.play(); // 播放上一首歌曲
});
// 監(jiān)聽下一曲按鈕點擊事件
$('#nextbtn').on('click',function(){
currentTrack ++;
if(currentTrack == numOfTracks){ // 已經(jīng)是最后一首歌了，播放第一首歌
currentTrack = 0;
}
$('ol li').removeClass('active'); // 取消高亮當前歌曲
$('ol li').eq(currentTrack).addClass('active'); // 高亮下一首歌曲
$('#trackname').text($('ol li').eq(currentTrack).text()); // 顯示歌曲名
$('#myaudio source').attr('src', $('ol li').eq(currentTrack).attr('songurl')); // 加載下一首音樂文件
audio.load(); // 加載音頻
audio.play(); // 播放下一首歌曲
});
});

通過以上代碼，我們可以實現(xiàn)簡單的音樂播放器功能，包括播放、暫停、上一曲、下一曲、循環(huán)播放等操作。同時，我們也學習到了如何使用jQuery操作DOM、獲取元素屬性、監(jiān)聽事件等常用技巧。