跨境派

跨境派

跨境派,专注跨境行业新闻资讯、跨境电商知识分享!

当前位置:首页 > 卖家故事 > 前端 用HTML,CSS, JS 写一个简易的音乐播放器

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

时间:2024-04-28 17:55:19 来源:网络cs 作者:康由 栏目:卖家故事 阅读:

标签: 简易  音乐 
阅读本书更多章节>>>>
<!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> 

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

支持歌词显示和同步支持播放列表编辑和保存支持拖拽上传歌曲支持在线搜索歌曲支持分享和评论等社交功能

这些功能的实现需要涉及到不同的技术和工具,如 AJAX、WebSocket、React、Node.js 等。如果你想要深入学习和掌握 Web 开发技术,可以选择相应的学习路径和教程进行学习。

阅读本书更多章节>>>>

本文链接:https://www.kjpai.cn/gushi/2024-04-28/163307.html,文章来源:网络cs,作者:康由,版权归作者所有,如需转载请注明来源和作者,否则将追究法律责任!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。

文章评论