CSS3极简mp3播放器
作者：庄泽峰 / 2023-12-16 15:48
<!DOCTYPE html>
<html>
<head>
<title>极简mp3播放器</title>
<style>
.player {
width: 200px;
margin: 20px auto;
}
.controls {
display: flex;
align-items: center;
}
.play {
width: 40px;
height: 40px;
border: none;
outline: none;
cursor: pointer;
font-size: 24px;
color: #000; /* 替换为你想要的图标颜色 */
}
.play::before {
content: "▶"; /* 替换为你想要的播放图标 */
}
.playing::before {
content: "⏸"; /* 替换为你想要的暂停图标 */
}
.progress {
width: 100%;
height: 4px;
background-color: #ccc;
margin-left: 10px;
}
.bar {
height: 100%;
background-color: #ff6600;
width: 0;
transition: width 0.2s ease-in-out;
}
</style>
</head>
<body>
<div class="player">
<audio id="audio" src="song.mp3"></audio>
<div class="controls">
<button id="playpausebtn" class="play"></button>
<div class="progress">
<div id="progressbar" class="bar"></div>
</div>
</div>
</div>
<script>
var audio = document.getElementById('audio');
var playpausebtn = document.getElementById('playpausebtn');
var progressbar = document.getElementById('progressbar');
playpausebtn.addEventListener('click', function() {
if (audio.paused || audio.ended) {
audio.play();
playpausebtn.classList.add('playing');
} else {
audio.pause();
playpausebtn.classList.remove('playing');
}
});
audio.addEventListener('timeupdate', function() {
var progress = (audio.currentTime / audio.duration) * 100;
progressbar.style.width = progress + '%';
});
</script>
</body>
</html>
