HTML+CSS+script音乐播放器带歌词头像代码
这个代码示例创建了一个简单的音乐播放器，包括歌曲信息
更多样式根据CSS美化
HTML部分
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MP3播放器</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <audio id="audio" preload="metadata"> <source src="https://www.nly3355.cn/mp3/MTk5NjQ4NjYxNyZ3eW1wMw==.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放。 </audio> <div> <img id="cover" src="https://www.cnzv.cc/zb_users/upload/2024/02/20240211090525170761352592844.jpeg" alt="封面图片"> <div> <p id="current-line"></p> </div> <div> <button id="play-pause">播放</button> </div> <div> <input id="progress" type="range" min="0" max="100" value="0" step="1"> </div> </div> </div> <script src="script.js"></script> </body> </html>
CSS部分
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
#cover {
width: 200px;
height: 200px;
object-fit: cover;
border-radius: 50%;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.lrc-container {
width: 100%;
text-align: center;
}
#lrc {
font-size: 18px;
line-height: 1.5;
}
.controls {
display: flex;
justify-content: space-around;
width: 100%;
margin-top: 20px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
input[type=range] {
width: 100%;
margin-top: 20px;
}script 部分
const audio = document.getElementById('audio');
const cover = document.getElementById('cover');
const playPauseBtn = document.getElementById('play-pause');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
const progress = document.getElementById('progress');
const currentLine = document.getElementById('current-line');
function updateProgress() {
const percentage = (audio.currentTime / audio.duration) * 100;
progress.style.width = percentage + '%';
}
function togglePlayPause() {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '暂停';
} else {
audio.pause();
playPauseBtn.textContent = '播放';
}
}
function updateLyrics() {
const lyrics = [
{ text: '这是第一行歌词', timestamp: 0 },
{ text: '这是第二行歌词', timestamp: 10 },
{ text: '这是第三行歌词', timestamp: 20 },
// ...
];
let currentLineIndex = 0;
function updateLine() {
currentLine.textContent = lyrics[currentLineIndex].text;
currentLineIndex++;
if (currentLineIndex >= lyrics.length) {
currentLineIndex = 0;
}
}
updateLine();
setInterval(updateLine, lyrics[currentLineIndex].timestamp * 1000);
}
audio.addEventListener('timeupdate', updateProgress);
playPauseBtn.addEventListener('click', togglePlayPause);
updateLyrics();代码就这么多 加单示列，具体美化根据自己喜欢增加
以上内容仅代表作者观点，甚至可能并非原创，如遇未经考证信息需持审慎态度。若有疑问，可联系本站处理。
0
您需要 登录账户 后才能发表评论