前端用HTML，CSS, JS 写一个简易的音乐播放器

这篇具有很好参考价值的文章主要介绍了前端用HTML，CSS, JS 写一个简易的音乐播放器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Music Player</title>
    <style>
        /* 样式可自行修改 */
        .container {
            width: 600px;
            margin: 0 auto;
        }
        h2 {
            text-align: center;
        }
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .progress {
            width: 400px;
            height: 10px;
            background-color: #ccc;
        }
        .progress-bar {
            height: 10px;
            background-color: #6cb0ff;
        }
        .info {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }
        .song-info {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
        }
        .song-info span {
            margin-bottom: 5px;
        }
        .song-list {
            list-style: none;
            padding: 0;
        }
        .song-list li {
            margin-bottom: 5px;
            cursor: pointer;
        }
        .song-list li.active {
            color: #6cb0ff;
        }
        .play-mode {
            display: flex;
            align-items: center;
        }
        .play-mode span {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Music Player</h2>
        <div class="controls">
            <button id="prev">上一首</button>
            <button id="play">播放</button>
            <button id="next">下一首</button>
            <div class="progress">
                <div class="progress-bar"></div>
            </div>
            <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
        </div>
        <div class="info">
            <img src="" alt="" id="cover">
            <div class="song-info">
                <span id="song-name">歌曲名称</span>
                <span id="artist">歌手</span>
            </div>
        </div>
        <ul class="song-list">
            <li data-src="./music/song1.mp3">歌曲1</li>
            <li data-src="./music/song2.mp3">歌曲2</li>
            <li data-src="./music/song3.mp3">歌曲3</li>
        </ul>
        <div class="play-mode">
            <span>播放模式：</span>
            <button id="loop">循环</button>
            <button id="random">随机</button>
            <button id="single">单曲</button>
        </div>
    </div>
    <script>
        const audio = new Audio(); // 创建音乐播放器对象
        const songList = document.querySelectorAll('.song-list li');
        const prevBtn = document.querySelector('#prev');
        const playBtn = document.querySelector('#play');
        const nextBtn = document.querySelector('#next');
        const volumeSlider = document.querySelector('#volume');
        const progressBar = document.querySelector('.progress-bar');
        const coverImg = document.querySelector('#cover');
        const songName = document.querySelector('#song-name');
        const artistName = document.querySelector('#artist');
        const loopBtn = document.querySelector('#loop');
        const randomBtn = document.querySelector('#random');
        const singleBtn = document.querySelector('#single');
        let currentIndex = 0;
        let isPlaying = false;
        let playMode = 'loop'; // 默认播放模式为循环

        function playSong(index) {
            const song = songList[index];
            audio.src = song.dataset.src;
            audio.play();
            isPlaying = true;
            playBtn.textContent = '暂停';
            coverImg.src = `./images/cover${index+1}.jpg`;
            songName.textContent = song.textContent;
            artistName.textContent = '歌手名称';
            songList.forEach((item) => {
                item.classList.remove('active');
            });
            song.classList.add('active');
        }

        function getNextIndex() {
            let nextIndex;
            switch(playMode) {
                case 'loop':
                    nextIndex = currentIndex + 1;
                    if (nextIndex >= songList.length) {
                        nextIndex = 0;
                    }
                    break;
                case 'random':
                    nextIndex = Math.floor(Math.random() * songList.length);
                    break;
                case 'single':
                    nextIndex = currentIndex;
                    break;
            }
            return nextIndex;
        }

        function updateProgress() {
            const progress = audio.currentTime / audio.duration * 100;
            progressBar.style.width = `${progress}%`;
        }

        function init() {
            playSong(currentIndex);
        }

        init();

        prevBtn.addEventListener('click', () => {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = songList.length - 1;
            }
            playSong(currentIndex);
        });

        nextBtn.addEventListener('click', () => {
            currentIndex = getNextIndex();
            playSong(currentIndex);
        });

        playBtn.addEventListener('click', () => {
            if (isPlaying) {
                audio.pause();
                isPlaying = false;
                playBtn.textContent = '播放';
            } else {
                audio.play();
                isPlaying = true;
                playBtn.textContent = '暂停';
            }
        });

        volumeSlider.addEventListener('input', () => {
            audio.volume = volumeSlider.value;
        });

        audio.addEventListener('timeupdate', updateProgress);

        progressBar.addEventListener('click', (e) => {
            const width = progressBar.clientWidth;
            const clickX = e.offsetX;
            const duration = audio.duration;
            audio.currentTime = clickX / width * duration;
        });

        songList.forEach((song, index) => {
            song.addEventListener('click', () => {
                currentIndex = index;
                playSong(currentIndex);
            });
        });

        loopBtn.addEventListener('click', () => {
            playMode = 'loop';
        });

        randomBtn.addEventListener('click', () => {
            playMode = 'random';
        });

        singleBtn.addEventListener('click', () => {
            playMode = 'single';
        });

        audio.addEventListener('ended', () => {
            currentIndex = getNextIndex();
            playSong(currentIndex);
        });
    </script>
</body>
</html>

这个实现了基本的播放/暂停、歌曲切换、音量控制、进度条控制和显示歌曲信息等功能，同时还支持播放模式切换和歌曲列表操作。不过这只是一个简单的示例，实际上还有很多功能需要进一步完善和优化，例如：