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();

代码就这么多加单示列，具体美化根据自己喜欢增加