萬劍歸宗

马黑黑

马黑黑

本帖演示测试中的圆环播放器插件。若使用此插件，可以减少播放器、lrc歌词对编写代码的干扰，做帖时能更专注于帖子内容。

使用了播放器插件，你的帖子代码结构将如下所示：

<style>
#papa {
        /* css代码 */
}
/* 帖子相关的其他CSS代码 */
</style>

<div id="papa">
    <!-- 帖子内容的HTML代码 -->
</div>
<audio id="aud" src="音频地址" loop autoplay></audio>

<script>
//播放器+lrc歌词插件代码（略）

let lrcAr = [
        [1.06,"萬劍歸宗",2],
];

HCPlayer({
        lrcAr: lrcAr,
        player_css: 'bottom: 20px; left: 20px; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .85;',
        lrc_css: 'top: 20px; left: 50%; --bg: #a4e2c6;',
});
</script>


彩色部分的代码是基于播放器和lrc歌词的，发帖要操作的部分。其中：

    蓝色部分是必须的，它是调用插件功能的固定格式；
    红色部分必须给出，同步歌词所依赖的歌词数组（发纯音乐帖子时做标题用）；
    粉色部分可以不要，不要的话就是使用插件的预设样式。

马黑黑

插件代码（做帖时不用去理睬它，让它放在自己的位置就行）：
(function(mkPlayer) {let defaults = {lrcAr : [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%); --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));',player_css : 'bottom: 10px; left: calc(50% - 60px); --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,50%,.55); --color: silver;',playerCode : `<style>#mplayer { position: absolute; }#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: red; position: absolute; font: bold 2.4em sans-serif; color: hsl(100,100%,90%); white-space: nowrap;-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: nowrap; 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="花潮论坛lrc在线">花潮论坛lrc在线</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[j][0]) {if (mKey === j) showLrc(data.lrcAr[j][2]);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 = lrc.dataset.lrc = data.lrcAr[mKey][1];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[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]);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);

马黑黑

插件的调用与调配——
调用本插件语法：

HCPlayer({
        lrcAr: lrc歌词数组,
        player_css: 'CSS描述语句',
        lrc_css: 'CSS描述语句',
});


共3个接口参数，一一描述如下：

① lrcAr: lrc歌词数组

lrc歌词数组接受标准的花潮LRC在线歌词格式，例如，[[1.30,"花潮LRC在线",2], [2.36,"感谢支持",4],]，如果是做纯音乐帖，可以是这样：

HCPlayer({
        lrcAr: [1.30,"帖子标题",3],
        //player_css: 'CSS描述语句',
        //lrc_css: 'CSS描述语句',
});


如果是歌词同步帖，因为歌词数组代码量较大，可以先声明，再把数组变量赋值给 lrcAr 接口参数：

let lrcAr = [
    [1.20,"心心相印",3],
    // 其他歌词数组元素
];

HCPlayer({
        lrcAr: lrcAr,
        //player_css: 'CSS描述语句',
        //lrc_css: 'CSS描述语句',
});


② player_css: 'CSS描述语句'

这个接口接受播放器CSS样式，可以不提供，如果提供，必须包含 left（或right）、top（或bottom）、--track、--prog、--color 这5个属性，其中 --track 是底轨颜色、--prog 是进度轨颜色、--color 是文本和按钮颜色。例：

HCPlayer({
        lrcAr: [1.30,"帖子标题",3],
        //lrc_css: 'CSS描述语句',
        player_css: 'bottom: 20px; left: 50%; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd;',
});


也可以先声明字串，用变量给接口参数赋值(接口参数还可接受额外的CSS设定，看下面的粉色语句)：

let player_css = 'bottom: 20px; left: 50%; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .8';

HCPlayer({
        lrcAr: [1.30,"帖子标题",3],
        //lrc_css: 'CSS描述语句',
        player_css: player_css,
});


③ lrc_css: 'CSS描述语句'

这个接口参数接受lrc歌词同步的CSS样式，可以不提供，如果提供，则必须包含  left（或right）、top（或bottom）、--bg 共3个属性，其中 --bg 用于设定歌词同步颜色。例：

HCPlayer({
        lrcAr: [1.30,"帖子标题",3],
        lrc_css: 'top: 20px; left: 20px; --bg: #a4e2c6;',
        player_css: player_css,
});


也可以先声明字串，用变量给接口参数赋值(接口参数还可接受额外的CSS设定，看下面的粉色语句)：

let lrcCss = 'top: 20px; left: 20px; --bg: #a4e2c6; opacity: .95';
let player_css = 'bottom: 20px; left: 50%; --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .8';

HCPlayer({
        lrcAr: [1.30,"帖子标题",3],
        lrc_css: lrcCss,
        player_css: player_css,
});


三个接口参数都不是必须的，所以，调用插件功能最简单的语句是：

    HCPlayer({});


但帖子总不能只显示“花潮论坛lrc在线”字样，所以建议至少是这样调用插件：

HCPlayer({ lrcAr: [1.30,"帖子标题",3], });


或写成分行的：

HCPlayer({
        lrcAr: [1.30,"帖子标题",3],
});


要弄清楚的是，lrc_css 和 player_css 这两个接口参数，如果需要提供，则要求必须包含的参数一个不能少。

马黑黑

一楼帖子完整代码：

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 681px);
   
4.         width: 1200px;
   
5.         height: 750px;
   
6.         background: #666 url('https://638183.freep.cn/638183/t22/webp/wjgz.webp') no-repeat center/cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9. }
   
10. #papa::before, #papa::after {
    
11.         --delay: 0s;
    
12.         position: absolute;
    
13.         content: url('https://638183.freep.cn/638183/t22/webp/jm.webp');
    
14.         opacity: 1;
    
15.         animation: change 2s var(--delay) infinite alternate;
    
16. }
    
17. #papa::after { --delay: 1s; top: 40px; right: 40px; transform: rotate(45deg); }
    
18. @keyframes change { to {opacity: .15; } }
    
19. </style>
    
20. 
    
21. <div id="papa"></div>
    
22. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1453326535" loop autoplay></audio>
    
23. 
    
24. <script>
    
25. (function(mkPlayer) {let defaults = {lrcAr : [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%); --bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));',player_css : 'bottom: 10px; left: calc(50% - 60px); --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,50%,.55); --color: silver;',playerCode : `<style>#mplayer { position: absolute; }#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: red; position: absolute; font: bold 2.4em sans-serif; color: hsl(100,100%,90%); white-space: nowrap;-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: nowrap; 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="花潮论坛lrc在线">花潮论坛lrc在线</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[j][0]) {if (mKey === j) showLrc(data.lrcAr[j][2]);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 = lrc.dataset.lrc = data.lrcAr[mKey][1];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[j][0]) {mKey = j - 1;break;}}if(mKey <0) mKey = 0;if(mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr[mKey][2] - (aud.currentTime - data.lrcAr[mKey][0]);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);
    
26. let lrcAr = [
    
27.         [1.06,"萬劍歸宗",2],
    
28. ];
    
29. HCPlayer({
    
30.         lrcAr: lrcAr,
    
31.         player_css: 'bottom: 20px; left: calc(50% - 60px); --track: #bacac6; --prog: #2edfa3; --color: #e3f9fd; opacity: .85;',
    
32.         lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%); --bg: #a4e2c6;',
    
33. });
    
34. </script>
    

复制代码

马黑黑

重要：插件约定，帖子父框的id必须是 papa，所以，帖子HTML代码必须是这样的结构：

<div id="papa">...</div>

红影

这个太方便了。那两侧的两把小剑也设计得精巧，这个是JS封装的具体应用，黑黑太棒了

马黑黑

红影 发表于 2022-11-18 12:56
这个太方便了。那两侧的两把小剑也设计得精巧，这个是JS封装的具体应用，黑黑太棒了

还不够方便，还需要改进一下接口参数。现在差不多调整好了，晚上发出来

梦油

欣赏佳作，问候黑黑。

红影

马黑黑 发表于 2022-11-18 13:00
还不够方便，还需要改进一下接口参数。现在差不多调整好了，晚上发出来

太好了，黑黑辛苦了。替花潮人谢谢你

马黑黑

红影 发表于 2022-11-18 15:57
太好了，黑黑辛苦了。替花潮人谢谢你

先整理几个，其余的有空再做

马黑黑

梦油 发表于 2022-11-18 15:22
欣赏佳作，问候黑黑。

感谢支持

梦油

马黑黑 发表于 2022-11-18 17:58
感谢支持

黑黑朋友别客气。

红影

马黑黑 发表于 2022-11-18 17:54
先整理几个，其余的有空再做

把应该css做的事，除了必须的，都封装起来了，这样真方便

马黑黑

红影 发表于 2022-11-18 20:36
把应该css做的事，除了必须的，都封装起来了，这样真方便

基于播放控制器和歌词的CSS也被封装在里面了

马黑黑

梦油 发表于 2022-11-18 20:18
黑黑朋友别客气。

泡沫

厉害了黑黑，问好

马黑黑

泡沫 发表于 2022-11-18 21:34
厉害了黑黑，问好

红影

马黑黑 发表于 2022-11-18 21:09
基于播放控制器和歌词的CSS也被封装在里面了

真的太好了，省得看得晕了，下回直接套用封装的，也可以防止不小心就出错了

马黑黑

红影 发表于 2022-11-18 23:10
真的太好了，省得看得晕了，下回直接套用封装的，也可以防止不小心就出错了

插件的好处多多，即使插件像现在这个样子应用