马黑黑AudioPlayer插件源码,音画教程,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

醉美水芙蓉 发表于 7 天前

马黑黑AudioPlayer插件源码

</div>
<div class="blockcode"><div id="code_DzS"><ol><li>/** audioplayer.js（2026年5月5日更新） 
<li> 
<li>    在指定父元素生成播放器+全屏按钮， 
<li>    支持添加多个自定义音频控制按钮， 
<li>    支持热键操作（F11、Alt+X/N/P/L） 
<li> 
<li>    1. 前台配置: 
<li>    let option = { 
<li>        pa: '.pa'; // 或者 '#pa' | pa 
<li>        urls: [ 
<li>            ['歌曲地址1', '曲名1'], 
<li>            ['歌曲地址2', '曲名2'], 
<li>        ], 
<li>        fs: false, // 禁用全屏按钮，缺省值 true（启用） 
<li>        btns: , // 自定义播放控制器(若需要) 
<li>    } 
<li> 
<li>    2. 实例化举例：const aud = new AudPlayer(option); 
<li> 
<li>    3. 前台CSS： 
<li>    ① 播放器： .player { width: 420px; bottom: 10px; right: 20px; color: gold; } 
<li>    ② 全屏按钮： .btnFs { top: 20px; right: 20px; color: gold; } 
<li>*/ 
<li>class AudPlayer { 
<li>    constructor(config = {}) { 
<li>        // 基础配置 
<li>        this.config = { 
<li>            pa: config.pa || document.body, 
<li>            urls: config.urls || [], 
<li>            fs: true, 
<li>            btns: config.btns, 
<li>        }; 
<li> 
<li>        // 关键DOM+核心状态 
<li>        this.pa = this.getParentElement(); 
<li>        this.aud = new Audio(); 
<li>        this.fs_btn = null; 
<li>        this.playList = [...this.config.urls]; // 原始歌单 
<li>        this.randomQueue = []; // 随机播放队列 
<li>        this.currentIndex = 0; // 当前播放索引 
<li>        this.isPlaying = false; 
<li>        this.isSingle = this.playList.length === 1; 
<li> 
<li>        // 初始化 
<li>        this.generateUI(); 
<li>        this.initRandomQueue(); 
<li>        this.placeMList(); 
<li>        this.displayPlayer(); 
<li>        this.bindAudEvents(); 
<li>        this.playFirst(); 
<li>    } 
<li> 
<li>    // 加载+播放曲目 
<li>    loadTrack(index) { 
<li>        if (index < 0 || index >= this.playList.length) return; 
<li>        this.currentIndex = index; 
<li>        const = this.playList; 
<li> 
<li>        this.aud.src = url; 
<li>        this.aud.play().catch(err => this.showError('自动播放受限，请点击播放按钮')); 
<li> 
<li>        // 歌单高亮+翻页 
<li>        if (!this.isSingle) { 
<li>            this.mlist.dataset.currentsong = '正在播放：' + title; 
<li>            const lists = this.mlist.querySelectorAll('li'); 
<li>            const curList = this.mlist.querySelector(`li`); 
<li>            lists.forEach(li => li.classList.remove('list-highlight')); 
<li>            curList.classList.add('list-highlight'); 
<li>            curList.scrollIntoView({ behavior: 'smooth'}); 
<li>            console.log(this.mlist.scrollHeight, curList.offsetTop) 
<li>        } 
<li>        this.mState(); 
<li>    } 
<li> 
<li>    // 首次播放 
<li>    playFirst() { 
<li>        const idx = Math.floor(Math.random() * this.playList.length); 
<li>        this.loadTrack(idx); 
<li>    } 
<li> 
<li>    // 手动选曲（不影响随机队列） 
<li>    selectTrack(index) { 
<li>        this.loadTrack(index); 
<li>    } 
<li> 
<li>    // 上一首 
<li>    playPrev() { 
<li>        if (this.isSingle) return; 
<li>        let prevIndex = this.currentIndex - 1; 
<li>        if (prevIndex < 0) prevIndex = this.playList.length - 1; 
<li>        this.loadTrack(prevIndex); 
<li>    } 
<li> 
<li>    // 下一首 
<li>    playNext() { 
<li>        if (this.isSingle) return; 
<li>        let nextIndex = this.currentIndex + 1; 
<li>        if (nextIndex >= this.playList.length) nextIndex = 0; 
<li>        this.loadTrack(nextIndex); 
<li>    } 
<li> 
<li>    // 切换播放/暂停 
<li>    togglePlay() { 
<li>        if (this.isPlaying) { 
<li>              this.aud.pause(); 
<li>        } else { 
<li>            this.aud.play().catch(err => this.showError('播放失败，请检查音频链接')); 
<li>        } 
<li>    } 
<li> 
<li>    // 按钮、视频等状态维护 
<li>    mState() { 
<li>        const vids = this.pa.querySelectorAll('video'); 
<li>        if (this.aud.paused) { 
<li>            this.playbtn.classList.remove('clip-pause'); 
<li>            this.playbtn.classList.add('clip-play'); 
<li>            this.pa.style.setProperty('--state', 'paused'); 
<li>            if (vids) vids.forEach(vid => vid.pause()); 
<li>        } else { 
<li>            this.playbtn.classList.remove('clip-play'); 
<li>              this.playbtn.classList.add('clip-pause'); 
<li>              this.pa.style.setProperty('--state', 'running'); 
<li>              if (vids) vids.forEach(vid => vid.play()); 
<li>        } 
<li>    } 
<li> 
<li>    // 播放结束处理 
<li>    handlePlayEnd() { 
<li>        if (this.isSingle) { 
<li>            // 单曲循环 
<li>            this.aud.currentTime = 0; 
<li>            this.aud.play(); 
<li>        } else { 
<li>            // 多曲：从随机队列取歌 
<li>            if (this.randomQueue.length === 0) { 
<li>                this.resetRandomQueue(); // 周期结束，重置随机队列 
<li>            } 
<li>            const nextTrack = this.randomQueue.shift(); 
<li>            const nextIndex = this.playList.findIndex(item => item === nextTrack); 
<li>            this.loadTrack(nextIndex); 
<li>        } 
<li>    } 
<li> 
<li>    // 初始化随机播放队列 
<li>    initRandomQueue() { 
<li>        if (this.isSingle) return; 
<li>        this.randomQueue = [...this.playList].sort(() => Math.random() - 0.5); 
<li>    } 
<li> 
<li>    // 重置随机队列（一个周期结束后） 
<li>    resetRandomQueue() { 
<li>        this.initRandomQueue(); 
<li>    } 
<li> 
<li>    // 音频事件绑定 
<li>    bindAudEvents() { 
<li>        // 时间更新 
<li>        this.aud.addEventListener('timeupdate', () => { 
<li>            const { currentTime, duration } = this.aud; 
<li>            this.prog.style.setProperty('--prog',  `${currentTime / duration * 100}%`); 
<li>            this.tmsg.textContent = `${this.s2m(currentTime)} / ${this.s2m(duration)}`; 
<li>        }); 
<li> 
<li>        // 播放结束 
<li>        this.aud.addEventListener('ended', () => { 
<li>            this.handlePlayEnd(); 
<li>        }); 
<li> 
<li>        // 播放/暂停状态同步 
<li>        this.aud.addEventListener('play', () => { 
<li>            this.isPlaying = true; 
<li>            this.mState(); 
<li>        }); 
<li> 
<li>        // 暂停 
<li>        this.aud.addEventListener('pause', () => { 
<li>            this.isPlaying = false; 
<li>            this.mState(); 
<li>        }); 
<li> 
<li>        // 出错 
<li>        this.aud.addEventListener('error', (e) => { 
<li>            this.showError(`播放失败：${this.playList}`); 
<li>            this.handlePlayEnd(); 
<li>        }); 
<li>    } 
<li> 
<li>    // 创建UI 
<li>    generateUI() { 
<li>        if (document.querySelector('#audio-player-style')) return; 
<li>        const style = document.createElement('style'); 
<li>        style.id = 'audio-player-style'; 
<li>        style.textContent = [ 
<li>            `.player { position: absolute; padding: 6px; width: 460px; height: 40px; line-height: 40px; display: flex; align-items: center; gap: 10px; transition: .75s; opacity: var(--opacity); }`, 
<li>            `.player * { box-sizing: border-box; }`, 
<li>            `.aud-btn { width: 35px; height: 35px; border: 1px solid currentColor; border-radius: 50%; cursor: pointer; position: relative; display: grid; place-items: center; }`, 
<li>            `.aud-btn:hover { background: rgba(0,0,0,.25); }`, 
<li>            `.aud-btn::before { content: ''; position: absolute; width: 50%; height: 50%; background: currentColor; clip-path: var(--clip-path); }`, 
<li>            `.aud-prog { flex-grow: 1; height: 12px; background: linear-gradient(to right, currentColor var(--prog), transparent var(--prog), transparent 0); border: 1px solid currentColor; border-radius: 12px; cursor: pointer; --prog: 0%; }`, 
<li>            `.common-btn { width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 6px; padding: 0; font: normal 16px/26px sans-serif; text-align: center; user-select: none; cursor: pointer; }`, 
<li>            `.common-btn:hover { background: rgba(0,0,0,.25); }`, 
<li>            `.music-list { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; min-height: 100%; height: 232px; border-radius: 6px; background: rgba(0,0,0,.25); box-shadow: 3px 3px 6px gray; display: none; }`, 
<li>            `.music-list::before { position: sticky; content: attr(data-currentsong); font-weight: bold; padding: 5px 15px;}`, 
<li>            `.music-list ol { height: 160px; overflow: auto; scrollbar-width: thin; scrollbar-color: currentColor transparent; }`, 
<li>            `.music-list ol li span { cursor: pointer; }`, 
<li>            `.music-list ol li span:hover { opacity: .75; }`, 
<li>            `.aud-tmsg { user-select: none; cursor: default; }`, 
<li>            `.clip-play { --clip-path: polygon(0 0, 0 100%, 100% 50%);}`, 
<li>            `.clip-pause { --clip-path: polygon(45% 0, 45% 100%, 10% 100%, 10% 0, 90% 0, 90% 100%, 55% 100%, 55% 0); }`, 
<li>            `.list-highlight { color: red; }`, 
<li>            `.btnFs { position: absolute; padding: 6px 12px; border: 3px solid currentColor; border-radius: 12px; font-size: 1.2em; color: currentColor; background: rgba(0,0,0,.25); transition: .75s; opacity: var(--opacity); user-select: none; cursor: pointer; }`, 
<li>            `.btnFs:hover { font-weight: bold; }`, 
<li>        ].join(''); 
<li>        document.head.appendChild(style); 
<li> 
<li>        // 播放器容器 
<li>        this.player = document.createElement('div'); 
<li>        this.player.classList.add('player'); 
<li> 
<li>        // 前一首按钮 
<li>        if (!this.isSingle) { 
<li>            const btnPrev = document.createElement('div'); 
<li>            btnPrev.classList.add('common-btn'); 
<li>            btnPrev.textContent = '←'; 
<li>            btnPrev.title = '前一首(Alt+P)'; 
<li>            btnPrev.addEventListener('click', () => this.playPrev()); 
<li>            this.player.appendChild(btnPrev); 
<li>        } 
<li> 
<li>        // 播放|暂停按钮 
<li>        this.playbtn = document.createElement('div'); 
<li>        this.playbtn.classList.add('aud-btn', 'clip-pause'); 
<li>        this.playbtn.title = '播放/暂停(Alt+X)'; 
<li>        this.playbtn.addEventListener('click', () => this.togglePlay()); 
<li>        this.player.appendChild(this.playbtn); 
<li> 
<li>        // 下一首按钮 
<li>        if (!this.isSingle) { 
<li>            const btnNext = document.createElement('div'); 
<li>            btnNext.classList.add('common-btn'); 
<li>            btnNext.textContent = '→'; 
<li>            btnNext.title = '下一首(Alt+N)'; 
<li>            btnNext.addEventListener('click', () => this.playNext()); 
<li>            this.player.appendChild(btnNext); 
<li>        } 
<li> 
<li>        // 进度条 
<li>        this.prog = document.createElement('div'); 
<li>        this.prog.classList.add('aud-prog'); 
<li>        this.prog.addEventListener('click', (e) => { 
<li>            const duration = this.aud.duration; 
<li>            if (isNaN(duration)) return; 
<li>            this.aud.currentTime = duration * e.offsetX / this.prog.offsetWidth; 
<li>        }); 
<li>        this.prog.addEventListener('mousemove', (e) => { 
<li>            const duration = this.aud.duration; 
<li>            this.prog.title = this.s2m(duration * e.offsetX / this.prog.offsetWidth); 
<li>        }); 
<li>        this.player.appendChild(this.prog); 
<li> 
<li>        // 数字时间 
<li>        this.tmsg = document.createElement('div'); 
<li>        this.tmsg.classList.add('aud-tmsg'); 
<li>        this.tmsg.textContent = '00:00 / 00:00'; 
<li>        this.player.appendChild(this.tmsg); 
<li> 
<li>        // 列表控制按钮 
<li>        if (!this.isSingle) { 
<li>        this.listControl = document.createElement('div'); 
<li>        this.listControl.classList.add('common-btn'); 
<li>        this.listControl.textContent = '▼'; 
<li>        this.listControl.title = '音乐列表(Alt+L)'; 
<li> 
<li>        // 列表弹出/收起+按钮箭头变换 
<li>        this.listControl.addEventListener('click', () => { 
<li>            let hide = this.mlist.style.display === 'block'; 
<li>            this.mlist.style.display = hide ? 'none' : 'block'; 
<li>            this.listControl.textContent = this.listControl.textContent === '▲' ? '▼' : '▲'; 
<li>            if (!hide) { 
<li>                this.mlist.querySelector(`li`).scrollIntoView({behavior: 'smooth'}); 
<li>            } 
<li>        }); 
<li>        this.player.appendChild(this.listControl); 
<li>        // 音乐列表 
<li>        this.mlist = document.createElement('div'); 
<li>        this.mlist.classList.add('music-list'); 
<li>        this.generateMusicList(); 
<li>        this.player.appendChild(this.mlist); 
<li>        } 
<li> 
<li>        // 全屏按钮 
<li>        if (this.config.fs) { 
<li>            this.fs_btn = document.createElement('div'); 
<li>            this.fs_btn.classList.add('btnFs'); 
<li>            this.fullScreen(this.fs_btn); 
<li>            this.pa.appendChild(this.fs_btn); 
<li>        } 
<li> 
<li>        this.pa.appendChild(this.player); 
<li> 
<li>        // 自定义添加的播放按钮（数组doms传参） 
<li>        if (this.config.btns) { 
<li>            this.config.btns.forEach(btn => { 
<li>                btn.title = '播放/暂停(Alt+X)'; 
<li>                btn.addEventListener('click', () => { 
<li>                    this.togglePlay(); 
<li>                }); 
<li>            }); 
<li>        } 
<li> 
<li>        // 热键 
<li>        document.addEventListener('keydown', (e) => { 
<li>            if(e.altKey) { 
<li>                if (e.key === 'x') this.togglePlay(); 
<li>                if (e.key === 'p') this.playPrev(); 
<li>                if (e.key === 'n') this.playNext(); 
<li>                if (e.key === 'l') this.listControl.click(); 
<li>            } 
<li>        }); 
<li>    } 
<li> 
<li>    // 列表定位+控制按钮状态 
<li>    placeMList() { 
<li>        if (this.isSingle) return; 
<li>        const style = window.getComputedStyle(this.player); 
<li>        const up = parseInt(style.getPropertyValue('bottom')) >= parseInt(style.getPropertyValue('top')); 
<li>        const ar = ['▲','▼' ]; 
<li>        this.listControl.textContent = ar[+up]; 
<li>        this.mlist.style.setProperty(`${up ? 'top' : 'bottom'}`, '100%'); 
<li>    } 
<li> 
<li>    // 生成列表 
<li>    generateMusicList() { 
<li>        const ol = document.createElement('ol'); 
<li>        this.playList.forEach((list, idx) => { 
<li>            const li = document.createElement('li'); 
<li>            li.innerHTML = `${list}`; 
<li>            li.dataset.idx = idx; 
<li>            li.onclick = () => { 
<li>                this.selectTrack(idx); 
<li>            } 
<li>            ol.appendChild(li); 
<li>        }); 
<li>        this.mlist.appendChild(ol); 
<li>    } 
<li> 
<li>    // 全屏 
<li>    fullScreen = (btn) => { 
<li>        let isFullscreen = false; 
<li>        btn.textContent = '进入全屏'; 
<li>        btn.title = 'F11'; 
<li>        btn.addEventListener('click', () => { 
<li>            isFullscreen ? document.exitFullscreen() : this.pa.requestFullscreen(); 
<li>        }); 
<li> 
<li>        document.addEventListener('fullscreenchange', () => { 
<li>            if (document.fullscreenElement !== null) { 
<li>                isFullscreen = true; 
<li>                btn.textContent = '退出全屏'; 
<li>            } else { 
<li>                isFullscreen = false; 
<li>                btn.textContent = '进入全屏'; 
<li>            } 
<li>        }); 
<li> 
<li>        document.addEventListener('keydown', (e) => { 
<li>            if (e.key === 'F11') { 
<li>                e.preventDefault(); 
<li>                isFullscreen ? document.exitFullscreen() : this.pa.requestFullscreen(); 
<li>            } 
<li>        }); 
<li>    }; 
<li> 
<li>    // 播放器+全屏隐身现身 
<li>    displayPlayer() { 
<li>        let timerId; 
<li>        this.pa.addEventListener('mousemove', () => { 
<li>        clearTimeout(timerId); 
<li>            this.pa.style.setProperty('--opacity', '1'); 
<li>            timerId = setTimeout(() => this.pa.style.setProperty('--opacity', '0'), 3000); 
<li>        }); 
<li>    } 
<li> 
<li>      // 获取元素（支持 id/class/元素实体） 
<li>      getParentElement() { 
<li>          const pa = this.config.pa; 
<li>          if (pa instanceof HTMLElement) return pa; 
<li>          return document.querySelector(pa) || document.body; 
<li>      } 
<li> 
<li>    // 错误处理 
<li>      showError(msg) { 
<li>          this.mlist.dataset.currentsong = msg; 
<li>      } 
<li> 
<li>    // 时间格式化 
<li>    s2m(seconds) { 
<li>        const min = Math.floor(seconds / 60).toString().padStart(2, '0'); 
<li>        const sec = Math.floor(seconds % 60).toString().padStart(2, '0'); 
<li>        return `${min}:${sec}`; 
<li>    } 
<li>}</ol></div>复制代码</div>

醉美水芙蓉 发表于 7 天前

5月5日更新的 AudioPlayer 插件实现在指定的元素上生成播放器+全屏机制。主要更新内容：

（一）支持热键交互

Alt + X ：播放/暂停
Alt + L ：呼出/关闭音乐列表
Alt + P ：前一首
Alt + N ：下一首

F11 ：全屏/常规模式切换
Esc ：关闭全屏

（二）支持添加多个自定义播放控制元素

使用方法：在配置中加入 btns 键，键值为数组，数组元素为 dom 实体。

【例一】假如帖子中有两个拥有 id 的元素，id="myplayer1" 和 id="myplayer2"，想让它们也能通过点击控制音频的播放、暂停，则：

var setting = {
// 其它配置
btns: ,
};

【例二】假设帖子中有一组 class="mypic" 的图片，现在想让它们能成为音频控制器，则：

var setting = {
// 其它配置
btns: document.querySelectorAll('.mypic'),
};

注意：请不要将帖子主元素加入 btns 键值中，因为这会影响其下子元素的所有点击操作。

页: [1]

纳兰音画网's Archiver

马黑黑AudioPlayer插件源码