JS制作简易音乐播放器教程

  
我的音乐播放器
  

上一曲
播放
下一曲
当前歌曲：song1.mp3

const audio = document.getElementById('audio');
const playBtn = document.getElementById('playBtn');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const songName = document.getElementById('songName');
// 歌曲列表
const songs = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentSongIndex = 0;
// 更新歌曲名和音频源
function loadSong(index) {
const song = songs[index];
audio.src = 'music/' + song;
songName.textContent = song;
}
// 播放或暂停
playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playBtn.textContent = '暂停';
} else {
audio.pause();
playBtn.textContent = '播放';
}
});
// 上一曲
prevBtn.addEventListener('click', () => {
currentSongIndex--;
if (currentSongIndex < 0) {
currentSongIndex = songs.length - 1; // 循环到最后一首
}
loadSong(currentSongIndex);
audio.play();
playBtn.textContent = '暂停';
});
// 下一曲
nextBtn.addEventListener('click', () => {
currentSongIndex++;
if (currentSongIndex >= songs.length) {
currentSongIndex = 0; // 回到第一首
}
loadSong(currentSongIndex);
audio.play();
playBtn.textContent = '暂停';
});
// 页面加载时加载第一首歌
loadSong(currentSongIndex);

// 进度条元素（在HTML中添加）
// 
const progress = document.getElementById('progress');
// 更新进度条
audio.addEventListener('timeupdate', () => {
const percent = (audio.currentTime / audio.duration) * 100;
progress.value = percent || 0;
});
// 拖动进度条跳转
progress.addEventListener('input', () => {
const seekTime = (progress.value / 100) * audio.duration;
audio.currentTime = seekTime;
});