登录
侧边栏壁纸
博主头像
冲灵

  • 累计撰写 535 篇文章
  • 累计收到 3 条评论
精品源码

一款经典的网页版音乐播放器！

冲灵
2025-4-3 / 0 评论 / 15 阅读

一个美观大气的本地音乐播放器网页代码，具有经典易用的操作界面。

PixPin_2025-04-03_15-39-21-min.png

功能特点

  1. 美观大气的界面设计：

    • 渐变标题栏

    • 圆角卡片设计

    • 现代化的阴影效果

    • 响应式布局，适配不同屏幕尺寸

  2. 经典易用的操作：

    • 播放/暂停按钮

    • 上一首/下一首控制

    • 进度条拖拽

    • 音量调节

    • 播放列表点击选择

  3. 完整的功能实现：

    • 支持添加多个本地音乐文件

    • 自动显示音乐时长

    • 显示当前播放进度

    • 音乐结束时自动播放下一首

    • 键盘快捷键支持（空格播放/暂停，左右箭头快进快退）

  4. 用户体验优化：

    • 高亮显示当前播放曲目

        • 自定义滚动条

        • 悬停效果

        • 加载状态显示

        • <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵狐音乐播放器</title>
    <style>
        :root {
            --primary-color: #4a76a8;
            --secondary-color: #3a5f8d;
            --text-color: #333;
            --light-text: #f5f5f5;
            --background: #f9f9f9;
            --player-bg: #fff;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--background);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 900px;
            background-color: var(--player-bg);
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: var(--light-text);
            padding: 20px;
            text-align: center;
        }

        h1 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 14px;
            opacity: 0.9;
        }

        .player-container {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .now-playing {
            display: flex;
            align-items: center;
            gap: 20px;
            padding: 15px;
            background-color: rgba(74, 118, 168, 0.1);
            border-radius: 8px;
        }

        .album-art {
            width: 80px;
            height: 80px;
            background-color: #ddd;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .album-art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .music-info {
            flex: 1;
        }

        .music-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .music-artist {
            font-size: 14px;
            color: #666;
        }

        .progress-container {
            flex: 2;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .progress-bar {
            height: 6px;
            background-color: #e0e0e0;
            border-radius: 3px;
            cursor: pointer;
            overflow: hidden;
        }

        .progress {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            width: 0%;
            border-radius: 3px;
            transition: width 0.1s linear;
        }

        .time-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25px;
        }

        .control-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            outline: none;
        }

        .control-btn:hover {
            transform: scale(1.05);
            background-color: var(--secondary-color);
        }

        .control-btn i {
            font-size: 18px;
        }

        .play-btn {
            width: 50px;
            height: 50px;
        }

        .play-btn i {
            font-size: 24px;
        }

        .volume-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .volume-slider {
            width: 100px;
            cursor: pointer;
        }

        .playlist {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        .playlist-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .playlist-title {
            font-size: 18px;
            font-weight: 600;
        }

        .add-music-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .add-music-btn:hover {
            background-color: var(--secondary-color);
        }

        .music-list {
            list-style: none;
            max-height: 300px;
            overflow-y: auto;
        }

        .music-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .music-item:hover {
            background-color: rgba(74, 118, 168, 0.1);
        }

        .music-item.active {
            background-color: rgba(74, 118, 168, 0.2);
            color: var(--primary-color);
        }

        .music-item-number {
            width: 30px;
            text-align: center;
            font-size: 14px;
        }

        .music-item-info {
            flex: 1;
        }

        .music-item-title {
            font-size: 15px;
            margin-bottom: 3px;
        }

        .music-item-artist {
            font-size: 12px;
            color: #666;
        }

        .music-item-duration {
            font-size: 13px;
            color: #666;
        }

        /* 自定义滚动条 */
        .music-list::-webkit-scrollbar {
            width: 6px;
        }

        .music-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        .music-list::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .music-list::-webkit-scrollbar-thumb:hover {
            background: #aaa;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .now-playing {
                flex-direction: column;
                text-align: center;
            }

            .progress-container {
                width: 100%;
            }

            .controls {
                gap: 15px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>灵狐音乐播放器</h1>
            <div class="subtitle">享受您的本地音乐收藏</div>
        </header>

        <div class="player-container">
            <div class="now-playing">
                <div class="album-art">
                    <i class="fas fa-music" style="font-size: 30px; color: #999;"></i>
                </div>
                <div class="music-info">
                    <div class="music-title">未选择音乐</div>
                    <div class="music-artist">-</div>
                </div>
                <div class="progress-container">
                    <div class="progress-bar" id="progress-bar">
                        <div class="progress" id="progress"></div>
                    </div>
                    <div class="time-info">
                        <span id="current-time">0:00</span>
                        <span id="duration">0:00</span>
                    </div>
                </div>
            </div>

            <div class="controls">
                <button class="control-btn" id="prev-btn">
                    <i class="fas fa-step-backward"></i>
                </button>
                <button class="control-btn play-btn" id="play-btn">
                    <i class="fas fa-play" id="play-icon"></i>
                </button>
                <button class="control-btn" id="next-btn">
                    <i class="fas fa-step-forward"></i>
                </button>
                <div class="volume-container">
                    <i class="fas fa-volume-up" style="color: var(--primary-color);"></i>
                    <input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="0.7">
                </div>
            </div>

            <div class="playlist">
                <div class="playlist-header">
                    <div class="playlist-title">播放列表</div>
                    <button class="add-music-btn" id="add-music-btn">
                        <i class="fas fa-plus"></i> 添加音乐
                    </button>
                </div>
                <ul class="music-list" id="music-list">
                    <li class="music-item empty">
                        <div class="music-item-info">暂无音乐，请点击上方按钮添加</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <input type="file" id="file-input" accept="audio/*" multiple style="display: none;">

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const audio = new Audio();
            const playBtn = document.getElementById('play-btn');
            const playIcon = document.getElementById('play-icon');
            const prevBtn = document.getElementById('prev-btn');
            const nextBtn = document.getElementById('next-btn');
            const progressBar = document.getElementById('progress-bar');
            const progress = document.getElementById('progress');
            const currentTimeEl = document.getElementById('current-time');
            const durationEl = document.getElementById('duration');
            const volumeSlider = document.getElementById('volume-slider');
            const addMusicBtn = document.getElementById('add-music-btn');
            const fileInput = document.getElementById('file-input');
            const musicList = document.getElementById('music-list');
            const musicTitle = document.querySelector('.music-title');
            const musicArtist = document.querySelector('.music-artist');
            const albumArt = document.querySelector('.album-art');

            // 播放列表和当前索引
            let playlist = [];
            let currentIndex = -1;
            let isPlaying = false;

            // 添加音乐到播放列表
            addMusicBtn.addEventListener('click', function() {
                fileInput.click();
            });

            fileInput.addEventListener('change', function(e) {
                const files = Array.from(e.target.files);
                if (files.length === 0) return;

                // 清空"暂无音乐"提示
                if (musicList.querySelector('.empty')) {
                    musicList.innerHTML = '';
                }

                files.forEach((file, index) => {
                    // 创建音乐对象
                    const musicObj = {
                        file: file,
                        url: URL.createObjectURL(file),
                        title: file.name.replace(/\.[^/.]+$/, ""), // 移除扩展名
                        artist: "未知艺术家",
                        duration: "0:00"
                    };

                    // 添加到播放列表
                    playlist.push(musicObj);

                    // 创建列表项
                    const li = document.createElement('li');
                    li.className = 'music-item';
                    li.innerHTML = `
                        <div class="music-item-number">${playlist.length}</div>
                        <div class="music-item-info">
                            <div class="music-item-title">${musicObj.title}</div>
                            <div class="music-item-artist">${musicObj.artist}</div>
                        </div>
                        <div class="music-item-duration">${musicObj.duration}</div>
                    `;

                    // 点击播放
                    li.addEventListener('click', function() {
                        playMusic(playlist.length - 1);
                    });

                    musicList.appendChild(li);

                    // 获取音乐时长
                    const tempAudio = new Audio(musicObj.url);
                    tempAudio.addEventListener('loadedmetadata', function() {
                        musicObj.duration = formatTime(tempAudio.duration);
                        li.querySelector('.music-item-duration').textContent = musicObj.duration;

                        // 如果是第一个添加的音乐，自动播放
                        if (playlist.length === 1) {
                            playMusic(0);
                        }
                    });
                });

                // 重置文件输入，以便可以再次选择相同的文件
                fileInput.value = '';
            });

            // 播放音乐
            function playMusic(index) {
                if (index < 0 || index >= playlist.length) return;

                // 更新当前索引
                currentIndex = index;

                // 设置音频源
                audio.src = playlist[index].url;

                // 更新UI
                musicTitle.textContent = playlist[index].title;
                musicArtist.textContent = playlist[index].artist;

                // 高亮当前播放项
                const items = document.querySelectorAll('.music-item');
                items.forEach((item, i) => {
                    if (i === index) {
                        item.classList.add('active');
                    } else {
                        item.classList.remove('active');
                    }
                });

                // 播放
                audio.play();
                isPlaying = true;
                playIcon.className = 'fas fa-pause';
            }

            // 播放/暂停
            playBtn.addEventListener('click', function() {
                if (playlist.length === 0) return;

                if (isPlaying) {
                    audio.pause();
                    isPlaying = false;
                    playIcon.className = 'fas fa-play';
                } else {
                    if (currentIndex === -1) {
                        playMusic(0);
                    } else {
                        audio.play();
                        isPlaying = true;
                        playIcon.className = 'fas fa-pause';
                    }
                }
            });

            // 上一首
            prevBtn.addEventListener('click', function() {
                if (playlist.length === 0) return;

                let newIndex = currentIndex - 1;
                if (newIndex < 0) {
                    newIndex = playlist.length - 1;
                }
                playMusic(newIndex);
            });

            // 下一首
            nextBtn.addEventListener('click', function() {
                if (playlist.length === 0) return;

                let newIndex = currentIndex + 1;
                if (newIndex >= playlist.length) {
                    newIndex = 0;
                }
                playMusic(newIndex);
            });

            // 进度条控制
            progressBar.addEventListener('click', function(e) {
                const width = this.clientWidth;
                const clickX = e.offsetX;
                const duration = audio.duration;
                audio.currentTime = (clickX / width) * duration;
            });

            // 更新进度条
            audio.addEventListener('timeupdate', function() {
                if (audio.duration) {
                    const progressPercent = (audio.currentTime / audio.duration) * 100;
                    progress.style.width = `${progressPercent}%`;
                    currentTimeEl.textContent = formatTime(audio.currentTime);
                }
            });

            // 音乐结束时自动下一首
            audio.addEventListener('ended', function() {
                nextBtn.click();
            });

            // 音量控制
            volumeSlider.addEventListener('input', function() {
                audio.volume = this.value;
            });

            // 格式化时间
            function formatTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                const secs = Math.floor(seconds % 60);
                return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
            }

            // 键盘快捷键
            document.addEventListener('keydown', function(e) {
                if (e.code === 'Space') {
                    e.preventDefault();
                    playBtn.click();
                } else if (e.code === 'ArrowLeft') {
                    audio.currentTime = Math.max(0, audio.currentTime - 5);
                } else if (e.code === 'ArrowRight') {
                    audio.currentTime = Math.min(audio.duration, audio.currentTime + 5);
                } else if (e.code === 'ArrowUp') {
                    volumeSlider.value = Math.min(1, parseFloat(volumeSlider.value) + 0.1);
                    volumeSlider.dispatchEvent(new Event('input'));
                } else if (e.code === 'ArrowDown') {
                    volumeSlider.value = Math.max(0, parseFloat(volumeSlider.value) - 0.1);
                    volumeSlider.dispatchEvent(new Event('input'));
                }
            });
        });
        document.addEventListener('DOMContentLoaded', function() {
    // 自动更新版权年份
    document.querySelector('footer').innerHTML = 
        document.querySelector('footer').innerHTML.replace('2023', new Date().getFullYear());
});
    </script>

<footer class="footer-pro">
    <div class="footer-content">
        <span class="copyright">© 2023 灵狐音乐播放器</span>
        <span class="divider">|</span>
        <span class="credit">
            设计与开发 by 
            <a href="http://linghu.rf.gd/" target="_blank" class="developer-link">
                灵/灵狐的窝
            </a>
        </span>
        <span class="divider">|</span>
        <span class="rights">保留所有权利</span>
    </div>
</footer>
</body>
</html>

      使用方法

      1. 将上述代码保存为HTML文件（如music-player.html）

      2. 在浏览器中打开该文件

      3. 点击"添加音乐"按钮选择本地音乐文件

      4. 点击播放列表中的歌曲开始播放

      您可以根据需要进一步自定义颜色、布局或添加更多功能。

    • 附件下载：index.rar
×

如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！

微信打赏

微信扫一扫

支付宝打赏

支付宝扫一扫

扫描二维码，在手机上阅读
0
音乐 源码 播放器 网页版
版权属于： 冲灵
本文链接： http://linghu.n26n.com/?post=514
文章声明： 本文版权内容属于《灵狐的窝》转载请标明出处
相关推荐
Typecho三个超好看的后台美化模板
Typecho三个超好看的后台美化模板
 Emlog顶部多彩加载条插件
Emlog顶部多彩加载条插件
 Emlog 博客程序 5.3.1 绿色优化版 V8
Emlog 博客程序 5.3.1 绿色优化版 V8
 灵狐文件管理系统 v1.1PHP源码
灵狐文件管理系统 v1.1PHP源码

评论一下？

OωO
取消