html音乐播放器的js文件代码

以下是一个简单的 HTML 音乐播放器的 JavaScript 代码：

// 获取音频元素
const audio = document.querySelector('audio');
// 获取播放按钮元素
const playBtn = document.querySelector('.play-btn');
// 获取暂停按钮元素
const pauseBtn = document.querySelector('.pause-btn');
// 获取停止按钮元素
const stopBtn = document.querySelector('.stop-btn');
// 获取进度条元素
const progress = document.querySelector('.progress');

// 播放音乐
function playAudio() {
  audio.play();
}

// 暂停音乐
function pauseAudio() {
  audio.pause();
}

// 停止音乐
function stopAudio() {
  audio.pause();
  audio.currentTime = 0;
}

// 更新进度条
function updateProgress() {
  const progressPercentage = (audio.currentTime / audio.duration) * 100;
  progress.style.width = `${progressPercentage}%`;
}

// 添加事件监听
audio.addEventListener('timeupdate', updateProgress);
playBtn.addEventListener('click', playAudio);
pauseBtn.addEventListener('click', pauseAudio);
stopBtn.addEventListener('click', stopAudio);

以上代码假设 HTML 页面中有一个 `audio` 元素用于播放音乐，三个按钮元素 `play-btn`、`pause-btn`、`stop-btn` 用于控制音乐的播放、暂停和停止，以及一个进度条元素 `progress` 用于显示音乐的播放进度。