花潮音频播放器插件小集合
本帖最后由 马黑黑 于 2023-1-29 20:14 编辑 <br /><br /><style>#papa { margin: auto; padding: 10px; width: 760px; display: grid; grid-template-columns: 60px auto 340px; grid-template-rows: 30px; font: normal 1em/30px sans-serif; }
#papa > span { padding: 0 10px; }
#papa a { text-decoration: none; }
#papa a:hover { text-decoration: none; color: red; }
#papa a:visited { text-decoration: none; color: purple; }
.tit { font: bold 1.1em/30px sans-serif; background: lightblue; text-align: center; }
</style>
<h1 style="margin-bottom: 16px;font: bold 2em sans-seirf; text-align:center; color: snow; text-shadow: 2px 2px 3px #000;">花潮音频播放器目录</h1>
<div id="papa"></div>
<script>
let ar = [
['圆环播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1781811&fromuid=7130','svg播放控制器'],
['meter频谱播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1781902&fromuid=7130','meter标签进度条'],
['progres频谱播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1781906&fromuid=7130','progress标签进度条'],
['特殊文本符号按钮+progress进度条播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1781925&fromuid=7130','基于progress进度条，可自定义按钮文本符号'],
['特殊文本符号按钮+meter进度条播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1781944&fromuid=7130','基于meter进度条，可自定义按钮文本符号'],
['光盘+progress播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1782227&fromuid=7130','基于progress进度条，光盘可设置大小'],
['光盘+meter播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1782247&fromuid=7130','基于meter进度条，光盘可设置大小'],
['手链按钮+progress播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1782449&fromuid=7130','基于progress进度条'],
['手链按钮+meter播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1782458&fromuid=7130','基于meter进度条'],
['图片背景按钮+progress播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1783071&fromuid=7130','progress进度条，可用图片或渐变背景做按钮'],
['背景图片按钮+meter进度条播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1783092&fromuid=7130', 'meter进度条，可用图片或渐变背景做按钮'],
['光盘按钮+普通标签进度条（左右布局）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1784009&fromuid=7130','普通标签进度条，支持配色'],
['光盘按钮+普通标签进度条（上下布局）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1785102&fromuid=7130','同上'],
['光盘+细线进度条（上下布局）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1785266&fromuid=7130','进度条有装饰滑块'],
['图片或渐变背景按钮+普通标签进度条（一）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1785433&fromuid=7130','左右布局'],
['图片或渐变背景按钮+普通标签进度条（二）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1785434&fromuid=7130','上下布局'],
['可配置颜色进度条+频谱','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1785522&fromuid=7130','普通标签进度条'],
['进度条滑块+频谱播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1786202&fromuid=7130','滑块支持拖曳，进度条可配色'],
['进度条滑块+元素按钮播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1786665&fromuid=7130','同上'],
['月亮按钮播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1786692&fromuid=7130','进度条支持配色'],
['input range进度条美化版+月亮按钮','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1787747&fromuid=7130','range标签整容版进度条'],
['文本按钮+普通标签进度条（一）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1787772&fromuid=7130','左右布局'],
['文本按钮+普通标签进度条（二）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1787829&fromuid=7130','上下布局'],
['range进度条+普通标签按钮','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1788379&fromuid=7130','进度条支持滑块拖曳和点击'],
['progress标签易容版+光盘按钮','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1788719&fromuid=7130','上下布局'],
['进度条滑块+旋转光盘','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1789775&fromuid=7130','单元素可拖曳进度条（同18、19）'],
['进度条滑块+多叶草','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1790642&fromuid=7130','按钮默认是三叶草'],
['<span style="color: red;">极简圆环播放器（无歌词版）</span>','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1791012&fromuid=7130','适用于纯乐帖'],
['单光盘播放器（无歌词）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1791612&fromuid=7130','仅一个光盘按钮'],
['响应式圆环频谱','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1797442&fromuid=7130','缺少音频波形数据响应不准确'],
['响应式条状频谱','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1797629&fromuid=7130','同上'],
['模拟示波播放器（支持lrc同步）','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1801773&fromuid=7130','基于canvas画布，支持响应式'],
['动态示波进度条播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1803882&fromuid=7130','播放器基于canvas，动态示波随机'],
['折线频谱','/forum.php?mod=viewthread&tid=65446&extra=page%3D1','非响应式，支持歌词同步'],
['环形立体频谱','/forum.php?mod=viewthread&tid=65461&extra=page%3D1','同上'],
['3d四面体播放控制器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1824146&fromuid=7130','三菱锥，支持lrc歌词同步、全屏'],
['专辑播放器','/forum.php?mod=redirect&goto=findpost&ptid=64716&pid=1824169&fromuid=7130','基于滑块进度条，支持全屏'],
];
papa.style.setProperty('grid-template-rows', 'repeat(' + (ar.length+1) + ', 30px)');
let str = '<span class="tit">序号</span><span class="tit">播放器</span><span class="tit">备注</span>';
ar.forEach((item,key) => {
str += `<span>${key+1}</span><span><a href="${item}">${item}</a></span><span>${item}</span>`;
});
papa.innerHTML = str;
</script>
<hr>
<p><span style="color:red;font-weight:bold;">重要约定</span>：<br><br>① 帖子父元素 id="papa" ；<br><br>② audio标签 id="aud" 。<br><br><strong>HTML代码示例</strong></p>
<pre>
<div <span style="color:red;">id="papa"</span>></div>
<audio <span style="color:red;">id="aud"</span> src="音频地址" autoplay loop></audio>
</pre>
<hr> 本帖最后由 马黑黑 于 2022-11-24 19:26 编辑
十四、光盘+细线进度条（上下布局）
插件：
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {--ww: 360px;--color: snow;--track: #eee;--prog: red;position: absolute;width: var(--ww);height: 60px;font: normal 14px sans-serif;color: var(--color);z-index: 999;}#mplayer::before, #mplayer::after {position: absolute;width: 100%;height: 50%;margin: 15px 0;}#mplayer::before {content: attr(data-cur);}#mplayer::after {content: attr(data-dur);text-align: right;}#btnplay {--state: paused;position: absolute;left: calc(50% - 15px);width: 30px;height: 30px;border-radius: 50%;background: conic-gradient(red, magenta, blue, aqua, lime, yellow, red);cursor: pointer;z-index: 1001;animation: rot linear 4s infinite;animation-play-state: var(--state);}#prog {--posX: 0px;position: absolute;bottom: 10px;width: 100%;height: 1px;background: var(--track);cursor: pointer;}#prog::before,#prog::after {position: absolute;content: '';left: 0;}#prog::before {width: var(--posX);height: 1px;background: var(--prog);}#prog::after {left: var(--posX);top: calc(50% - 5px);width: 3px;height: 10px;background: var(--color);}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));z-index: 1000;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer" data-cur="00:00" data-dur="00:00"><span id="btnplay"></span><span id="prog"></span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();mplayer.onmousemove = (e) => { mplayer.style.cursor = e.offsetY > mplayer.offsetHeight / 1.5 ? 'pointer' : 'default' };mplayer.onclick =(e) => { if(e.offsetY > mplayer.offsetHeight / 1.5) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; };aud.addEventListener('timeupdate', () => {prog.style.setProperty('--posX', prog.offsetWidth * aud.currentTime / aud.duration + 'px');mplayer.dataset.cur = toMin(aud.currentTime);mplayer.dataset.dur = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
示例：
<script>
//此处为插件代码
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
/*
lrc_css: `
top: 15px;
left: 50%;
transform: translate(-50%);
--bg: linear-gradient(tan, red);
color: tan;
`,
player_css: `
bottom: 20px;
--color: snow;
--ww: 260px;
--track: snow;
--prog: purple;
`,
*/
});
</script>
这个是准备一个个做封装么{:4_204:} 本帖最后由 马黑黑 于 2022-12-22 09:14 编辑
一、圆环播放器
<script >
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 15px;',player_css: '',playerCode: `<style>#mplayer {position: absolute;left: left: calc(50% - 60px);bottom: 10px;--track: hsla(100,30%,80%,.65);--prog: hsla(100,60%,50%,.55);--color: #e9f1f6;}#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc {--motion: cover2;--tt: 1s;--state: running;--bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));position: absolute;font: bold 2.4em sans-serif;color: hsl(100, 100%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85));z-index: 900;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }</style><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none" /><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none" /><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 20px; left: calc(50% - 60px);',
lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',
});
</script>
说明：
一、暗红色的代码就是插件，它本应以独立JS文件存在，因论坛不支持引用 .js 文档，所以以全码形式放在这里。若不熟悉JS，做帖时不用理睬它，保证它的完整性即可。
二、let lrcAr = [ [ ... ]]; 是歌词同步数组，支持双语，双语时用 <br> 标签隔开两种语言，单语是不要 <br> 标签。歌词数组要求是标准的花潮格式，纯音乐或不想要歌词同步是可以只设置一个数组元素（如上例）做帖子标题用。所声明的数组，要放到 HCPlayer({ ... }); 里面。
三、HCPlayer({ ... }); 是调用插件并向插件提供数据的方式，本插件共三个参数：
参数 ① lrcAr: 值
lrcAr 接受的值是花潮lrc歌词格式的的数组，其值可事先声明，然后将变量名称放在 lrcAr: 之后，纯音乐是可以直接写数组元素。以下两种写法都可以：
方法一：不声明，直接写
HCPlayer({
lrcAr: [ , ],
});
方法二：声明数组，用变量赋值
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
});
参数 ② player_css: 值
player_css 参数接受CSS字符串描述值，用于设置播放控制器的位置（left或right、top或bottom），例如：
player_css: 'bottom: 20px; left: 20px;',
这将令播放器位于帖子的左下角。player_css 参数还预设三个可选CSS变量，分别是 --track、--prog、--color，分别用于设置圆环播放器的底轨、进度轨和按钮+文本的颜色，例如：
player_css: 'bottom: 20px; left: 20px; --track: #ccc; --prog:pink; --color: white;',
同时，还可以接受合法的其他CSS描述语句，例如：opacity: 0.95; 等等。
参数 ③ lrc_css: 值
该参数用于设置歌词颜色。位置设置与参数②一样。还可通过CSS变量 --bg: 值; 改变歌词同步的颜色。举例如下：
lrc_css: 'top: 20px; left: 20px; --bg: red;',
若需要改变歌词底色，请直接使用 color 属性：
lrc_css: 'top: 20px; left: 20px; --bg: red; color: #ddd;',
三个接口参数建议每一个占一行，需要注意的是，每一个参数赋值结束后，必须用上小角逗号（最后一个可以不用，规范要求上还是要有）。参数可以部分或全部省略，如果省略所有参数，请用下面的语句调用插件：
HCPlayer({});
最后，说明一下两个重要约定和帖子代码框架：
其一，HTML帖子代码中，父框元素 id 必须为 papa : <div di="papa">帖子内容</div>
其二，HTML代码中要有 id 为 aud 的 audio 控件标签：<audio id="歌曲地址" loop autoplay></audio>
因此，帖子的代码框架应参照下面的顺序——
<style>
#papa { ... }
/* 其他帖子内容CSS代码（不包含播放器代码）*/
</style>
<div di="papa">
帖子内容（不包含播放器代码）
</div>
<audio id="歌曲地址" loop autoplay></audio>
<script>
//插件代码（略）
HCPlayer({
//具体代码略
});
</script>
红影 发表于 2022-11-18 20:55
这个是准备一个个做封装么
第一个出来了 老师这个帖子好！各个元素自成体系，各人择件组装新帖。黑黑老师真是教学有方，无私奉献！ 相约爱晚亭 发表于 2022-11-18 21:24
老师这个帖子好！各个元素自成体系，各人择件组装新帖。黑黑老师真是教学有方，无私奉献！
感谢你的支持 马黑黑 发表于 2022-11-18 21:50
感谢你的支持
一花独秀不是春，万紫千红春满园！花潮人在老师的引领下，快乐前行！ 二、meter频谱播放器
<script >
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 0 4px;place-items: end center;font-size: 14px;--ww: 260px;--color: snow;}#cur {grid-area: cur;color: var(--color);}#dur {grid-area: dur;color: var(--color);}#btnplay {grid-area: btnplay;display: grid;grid-auto-flow: column;place-items: end center;gap: 4px;height: 60px;cursor: pointer;}#btnplay>span {background: red;width: 4px;transition: .6s;}#prog {grid-area: prog;width: var(--ww);height: 20px;opacity: .65;cursor: pointer;position: relative;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;left: 20px;top: 10px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><div id="cur">00:00</div><div id="btnplay"></div><div id="dur">00:00</div><meter id="prog" max="100" low="25" high="75" optimum="85" value="0"></meter></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;(function() {for (j = 0; j < 20; j++) {let pinpu = document.createElement('span');pinpu.className = 'pinpu';pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;btnplay.appendChild(pinpu);}})();let mKey = 0,mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);setPinpu();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};let setPinpu = () => {let eles = document.querySelectorAll('.pinpu');eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
//player_css: 'bottom: 20px; left: 20px);',
//lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',
});
</script>
lrcAr、lrc_css 属性设定请参考本帖三楼。
player_css 可接受的属性有：
① --ww: ，例如，-ww: 160px，为进度条也是播放器的宽度（暂不支持设置进度条的高度）
② --color: ，例如，--color: #ddd，为播放器文本颜色
马黑黑 发表于 2022-11-18 21:03
第一个出来了
写得非常仔细，黑黑太棒了{:4_199:} 红影 发表于 2022-11-18 22:01
写得非常仔细，黑黑太棒了
我只做了简单测试，希望各位试用后发现问题提出来 相约爱晚亭 发表于 2022-11-18 21:54
一花独秀不是春，万紫千红春满园！花潮人在老师的引领下，快乐前行！
大家学有所得、快快乐乐就好 三、progres频谱播放器
<script >(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 0 4px;place-items: end center;font-size: 14px;--ww: 260px;--color: snow;}#cur {grid-area: cur;color: var(--color);}#dur {grid-area: dur;color: var(--color);}#btnplay {grid-area: btnplay;display: grid;grid-auto-flow: column;place-items: end center;gap: 4px;height: 60px;cursor: pointer;}#btnplay>span {background: red;width: 4px;transition: .6s;}#prog {grid-area: prog;width: var(--ww);height: 20px;opacity: .65;cursor: pointer;position: relative;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;left: 20px;top: 10px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><div id="cur">00:00</div><div id="btnplay"></div><div id="dur">00:00</div><progress id="prog" max="100"></progress></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;(function() {for (j = 0; j < 20; j++) {let pinpu = document.createElement('span');pinpu.className = 'pinpu';pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;btnplay.appendChild(pinpu);}})();let mKey = 0,mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);setPinpu();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};let setPinpu = () => {let eles = document.querySelectorAll('.pinpu');eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
//player_css: 'bottom: 20px; left: 20px;',
//lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',
});
</script>
参数的设置请参考8楼
本帖最后由 马黑黑 于 2022-11-19 22:04 编辑
四、特殊文本符号按钮+progress进度条播放器
<script>
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '✿',playerCode: `<style>#mplayer {position: absolute;bottom: 20px;grid-template-columns: auto auto auto;gap: 6px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(0, 100%, 100%);}#btnplay {--state: paused;margin-right: -4px;width: 30px;height: 30px;font: bold 30px/30px serif;text-align: center;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}#prog {width: var(--ww);height: 20px;opacity: .95;cursor: pointer;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;left: 20px;top: 10px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><progress id="prog" max="100"></progress><span id="tmsg">00:00 | 00:00</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
btn_txt: '\u2741',
//player_css: 'bottom: 20px; left: 20px);',
//lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',
});
</script>
本插件多出一个参数 btn_txt: ，接受用做按钮的特殊符号，特殊符号请使用 JS 或 HTML 格式的 Unicode 字符表示，原因与本论坛的字符编码gbk有关。
其他参数的属性设置与8楼同。
本帖最后由 马黑黑 于 2022-11-19 22:05 编辑
五、特殊文本符号按钮+meter进度条播放器
<script>
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '✿',playerCode: `<style>#mplayer {position: absolute;bottom: 20px;grid-template-columns: auto auto auto;gap: 6px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(0, 100%, 100%);}#btnplay {--state: paused;margin-right: -4px;width: 30px;height: 30px;font: bold 30px/30px serif;text-align: center;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}#prog {width: var(--ww);height: 20px;opacity: .95;cursor: pointer;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6), hsla(0, 100%, 50%, .75));position: absolute;left: 20px;top: 10px;font: bold 2.4em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; } }@keyframes cover2 { from { width: 0; } to { width: 100%; } }@keyframes rot { to { transform: rotate(1turn); } }</style><div id="lrc" data-lrc="HCPlayer">HCPlayer</div><div id="mplayer"><span id="btnplay"></span><meter id="prog" max="100" low="25" high="75" optimum="85" value="0"></meter><span id="tmsg">00:00 | 00:00</span></div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {prog.value = aud.currentTime / aud.duration * 100;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60),sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;}};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [
,
];
HCPlayer({
lrcAr: lrcAr,
//btn_txt: '\u2741',
//lrc_css: 'top: 20px; left: 20px; --bg: #fcff00;',
//player_css: 'bottom: 20px; left: 200px; --color: #ccc; --ww: 180px;',
});
</script>
参数设定请参照上一个播放器
马黑黑 发表于 2022-11-18 22:02
我只做了简单测试，希望各位试用后发现问题提出来
目前刚试的一个完全没问题{:4_205:} 一个没注意，黑黑一下子做了这么多封装，太厉害了{:4_199:}{:4_199:}{:4_199:} 红影 发表于 2022-11-18 23:16
一个没注意，黑黑一下子做了这么多封装，太厉害了
没有严格测试，只是做出来了 红影 发表于 2022-11-18 23:14
目前刚试的一个完全没问题
多用用才知道有木有问题 诲人不倦，花潮里有好老师。{:4_176:} 马黑黑 发表于 2022-11-18 22:53
五、特殊文本符号按钮+meter进度条播放器
辛苦