以下是一个简洁的网页音乐播放器实现代码,包含基础播放功能和样式设计(约800字):
html
以下是一个简洁的网页音乐播放器实现代码,包含基础播放功能和样式设计(约800字):
html
constaudio=document.getElementById('audio');
constplayBtn=document.getElementById('playBtn');
constprogress=document.getElementById('progress');
constvolume=document.getElementById('volume');
constplaylistItems=document.querySelectorAll('.playlistli');
//播放/暂停控制
playBtn.addEventListener('click',()=>{
if(audio.paused){
audio.play();
playBtn.textContent='?';
}else{
audio.pause();
playBtn.textContent='?';
}
});
//更新进度条
audio.addEventListener('timeupdate',()=>{
constprogressPercent=(audio.currentTime/audio.duration)100;
progress.style.width=`${progressPercent}%`;
document.getElementById('currentTime').textContent=
formatTime(audio.currentTime);
});
//音量控制
volume.addEventListener('input',(e)=>{
audio.volume=e.target.value;
});
//点击进度条跳转
document.querySelector('.progress-container').addEventListener('click',(e)=>{
constrect=e.target.getBoundingClientRect();
constseekTime=(e.clientX-rect.left)/rect.widthaudio.duration;
audio.currentTime=seekTime;
});
//播放列表点击
playlistItems.forEach(item=>{
item.addEventListener('click',()=>{
constsrc=item.dataset.src;
audio.src=src;
audio.play();
playBtn.textContent='?';
playlistItems.forEach(i=>i.classList.remove('playing'));
item.classList.add('playing');
});
});
//时间格式化
functionformatTime(seconds){
constmin=Math.floor(seconds/60);
constsec=Math.floor(seconds%60);
return`${min}:${sec.toString().padStart(2,'0')}`;
}
//初始化首首歌
playlistItems[0].click();