欢迎评分（测试插件播放器评分后正常运行）
<style>#papa {
margin: auto;
width: 740px;
height: 500px;
display: grid;
place-items: center;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
</style>
<div id="papa"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/21/643a94bf79472c834963eb68ee8a42ed.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 10px; left: calc(50% - 60px);',playerCode: `<style>#mplayer {position: absolute;--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 = 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,
player_css: 'bottom: 20px; left: calc(50% - 60px);',
lrc_css: 'top: 20px;',
});
})();
</script>
代码
<style>
#papa {
margin: auto;
width: 740px;
height: 500px;
display: grid;
place-items: center;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
</style>
<div id="papa"></div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/03/21/643a94bf79472c834963eb68ee8a42ed.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 10px; left: calc(50% - 60px);',playerCode: `<style>#mplayer {position: absolute;--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 = 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,
player_css: 'bottom: 20px; left: calc(50% - 60px);',
lrc_css: 'top: 20px;',
});
})();
</script>
测试结果：评分后，音乐继续播放，歌词照走，播放控制器正常工作 本帖最后由 山人 于 2022-11-21 13:04 编辑
封装播放器发帖代码其实非常简单，这里给出代码结构：
<script>
(function() {
//此处是插件代码
//此处是歌词数组代码
//下面是插件配置
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 20px; left: calc(50% - 60px);',
lrc_css: 'top: 20px;',
});
})();
</script>
代码中，有背景色的部分是外套，给帖子JS代码套件外套之后，它将被视为一个整体，评分时出现的局部刷新就不会被遗漏。
越弄越好了，特地跑那个播放器插件集中营里去比较一下，是的，之前没有外套。
现在那里的都可以加个外套了吧{:4_173:} 山人 发表于 2022-11-21 13:01
封装播放器发帖代码其实非常简单，这里给出代码结构：
想出来了，看着简单，真要去找到办法绝对不是简单的事。这个真棒{:4_199:} 我虽然不懂得代码，但黑黑朋友的超人技艺令我赞叹。 梦油 发表于 2022-11-21 15:06
我虽然不懂得代码，但黑黑朋友的超人技艺令我赞叹。
{:4_191:}
感谢支持 红影 发表于 2022-11-21 14:52
越弄越好了，特地跑那个播放器插件集中营里去比较一下，是的，之前没有外套。
现在那里的都可以加个外套了 ...
都可以的 红影 发表于 2022-11-21 15:01
想出来了，看着简单，真要去找到办法绝对不是简单的事。这个真棒
这个办法，我拖了两回地板才想出来 马黑黑 发表于 2022-11-21 18:51
都可以的
嗯嗯，太好了，这样评分后仍然可以继续播放{:4_187:} 马黑黑 发表于 2022-11-21 18:51
这个办法，我拖了两回地板才想出来
方法想出来了，地板也干净了，完美{:4_205:} 红影 发表于 2022-11-21 19:17
方法想出来了，地板也干净了，完美
{:4_196:} 红影 发表于 2022-11-21 19:17
嗯嗯，太好了，这样评分后仍然可以继续播放
细节我不还太清楚，因为我不能给自己评分 这个就是外套啊，才看见，黑黑威武{:4_178:} 小辣椒 发表于 2022-11-21 20:22
这个就是外套啊，才看见，黑黑威武
{:5_109:} 确实，评分后音乐照旧在播放，原来越完善了{:4_199:} 小辣椒 发表于 2022-11-21 20:24
确实，评分后音乐照旧在播放，原来越完善了
这个问题一直很纠结的 马黑黑 发表于 2022-11-21 20:05
解决的办法居然只有这么点代码就行了，太厉害了。 红影 发表于 2022-11-21 20:42
解决的办法居然只有这么点代码就行了，太厉害了。
这是意外收获吧