音乐播放控制进度条js实现

以下是一个使用JavaScript实现音乐播放控制进度条的示例代码：

HTML部分：

<audio id="audioPlayer" src="music.mp3"></audio>
<input type="range" id="progressBar" min="0" max="100" value="0">

<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>

JavaScript部分：

var audioPlayer = document.getElementById('audioPlayer');
var progressBar = document.getElementById('progressBar');

function play() {
  audioPlayer.play();
  progressBar.max = audioPlayer.duration;
  updateProgressBar();
}

function pause() {
  audioPlayer.pause();
}

function updateProgressBar() {
  progressBar.value = audioPlayer.currentTime;
  setTimeout(updateProgressBar, 1000);
}

progressBar.addEventListener('change', function() {
  audioPlayer.currentTime = progressBar.value;
});

在这个示例中，我们使用<audio>元素来播放音乐，并使用<input type="range">元素作为进度条。通过JavaScript代码，我们可以控制音乐的播放和暂停，并实时更新进度条的值。play()函数用于开始播放音乐，它设置了进度条的最大值为音乐的总时长，并调用了updateProgressBar()函数来实时更新进度条的值。pause()函数用于暂停音乐的播放。updateProgressBar()函数用于更新进度条的值，它每隔1秒更新一次。最后，我们使用addEventListener方法来监听进度条值的改变，当进度条的值改变时，将音乐的当前播放时间设置为进度条的值