JavaScript 实现拖动进度条快进音乐播放器 - 简单易懂教程 - 常规

<!DOCTYPE html>
<html>
<head>
<title>音乐播放器</title>
<style>
.progress-bar {
width: 300px;
height: 10px;
background-color: #ccc;
position: relative;
cursor: pointer;
}
.progress-bar .progress {
width: 0;
height: 100%;
background-color: #00f;
}
</style>
</head>
<body>
<audio id="audio" src="your_music_file.mp3"></audio>
<div class="progress-bar" id="progress-bar">
<div class="progress"></div>
</div>
<script src="your_script.js"></script>
</body>
</html>
<p>window.onload = function() {
var audio = document.getElementById('audio');
var progressBar = document.getElementById('progress-bar');
var progress = document.querySelector('.progress');</p>
<p>// 监听音乐播放进度
audio.addEventListener('timeupdate', function() {
var progressPercent = (audio.currentTime / audio.duration) * 100;
progress.style.width = progressPercent + '%';
});</p>
<p>// 拖动进度条快进音乐
progressBar.addEventListener('click', function(e) {
var progressWidth = progressBar.clientWidth;
var clickX = e.offsetX;
var duration = audio.duration;
var newTime = (clickX / progressWidth) * duration;
audio.currentTime = newTime;
});
};</p>