效果图
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.audio-container{
width:343px;
height:44px;
border-radius:22px;
border:1px solid rgba(224,225,239,1);
display: flex;
align-items: center;
padding: 0 12px;
}
.play-pause{
width: 24px;
height: 24px;
cursor: pointer;
}
.progress-container{
flex: 1;
display: flex;
align-items: center;
}
.progress-box{
flex: 1;
height:2px;
background:rgba(241,241,241,1);
border-radius:5px;
}
.progress-bar{
width: 0;
height:2px;
background:rgba(115,164,255,1);
border-radius:5px;
position: relative;
}
.progress-dragger{
width: 14px;
height: 14px;
background: url('./circle.png') no-repeat;
background-size: 100%;
position: absolute;
top: 50%;
right: -9px;
transform: translateY(-50%);
cursor: pointer;
}
.time{
min-width: 43px;
padding: 0 5px;
}
</style>
</head>
<body>
<div class="audio-container">
<audio src="https://mv.xesimg.com/test_library/audio/2017/07/03/t_791698_17181920.mp3?1499050517"></audio>
<img class="play-pause" src="./play.png" alt="">
<div class="progress-container">
<span class="time current-time">00:00</span>
<div class="progress-box">
<div class="progress-bar">
<div class="progress-dragger"></div>
</div>
</div>
<span class="time duration">00:00</span>
</div>
</div>
<div class="audio-container">
<audio src="https://mv.xesimg.com/test_library/audio/2017/07/03/t_791698_17181920.mp3?1499050517"></audio>
<img class="play-pause" src="./play.png" alt="">
<div class="progress-container">
<span class="time current-time">00:00</span>
<div class="progress-box">
<div class="progress-bar">
<div class="progress-dragger"></div>
</div>
</div>
<span class="time duration">00:00</span>
</div>
</div>
<script>
// 时间转换
const secondsToMS = (seconds) => {
const mm = (parseInt(seconds/60) + '').padStart(2, '0')
const ss = (parseInt(seconds % 60) + '').padStart(2, '0')
return `${mm}:${ss}`
}
const audioArr = document.querySelectorAll('audio')
audioArr.forEach((audio) => {
const duration = audio.parentNode.querySelector('.duration')
let totalTime = 0
audio.addEventListener('canplay', function() {
totalTime = this.duration
duration.innerText = secondsToMS(totalTime)
})
const currentDuration = audio.parentNode.querySelector('.current-time')
const progressBar = audio.parentNode.querySelector('.progress-bar')
audio.addEventListener('timeupdate', function(){
const currentTime = this.currentTime
currentDuration.innerText = secondsToMS(currentTime)
progressBar.style.width = (currentTime / totalTime * 100) + '%'
})
const img = audio.parentNode.querySelector('.play-pause')
audio.addEventListener('ended', function() {
img.src = './play.png'
})
})
// 点击播放/暂停音频
document.addEventListener('click', (e) => {
const target = e.target
if (target.tagName.toLowerCase() !== 'img') return
const currentAudio = target.parentNode.querySelector('audio')
if (!currentAudio || currentAudio.tagName.toLowerCase() !== 'audio') return
if (!currentAudio.paused) {
target.src = './play.png'
currentAudio.pause()
} else {
audioArr.forEach((audio) => {
const img = audio.parentNode.querySelector('.play-pause')
img.src = './play.png'
audio.pause()
})
target.src = './pause.png'
currentAudio.play()
}
})
let progressBar,progress,currentAudio
// 拖动音频
document.addEventListener('mousedown', (e) => {
if (e.target.className.includes('progress-dragger')) {
progressBar = e.target.parentNode
progress = progressBar.parentNode
currentAudio = progress.parentNode.parentNode.querySelector('audio')
document.addEventListener('mousemove', dragHandler)
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', dragHandler)
})
}
})
const dragHandler = (e) => {
const progressClinetW = progress.clientWidth
const startPos = progress.getBoundingClientRect().left
const endPos = progress.getBoundingClientRect().right
const pageX = e.pageX
const width = Math.max(startPos, Math.min(pageX, endPos)) - startPos
progressBar.style.width = width + 'px'
const currentTime = width / progressClinetW * currentAudio.duration
currentAudio.currentTime = currentTime
}
</script>
</body>
</html>
circle.png
pause.png
play.png