让花潮播放器用起来更简单一些

马黑黑 · 发表于 2022-11-17 22:31

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-11-17 23:58 编辑

花潮播放器可以封装成JS插件，这样用起来就会更简单。假设我们已经将圆环播放器封装成了插件，放在根目录下，则可以这样调用插件：

<script src="/hcplayer.js"></script>

其中，hcplayer.js 就是放在根目录下的播放器插件，它其实是一个 JS 文档，将播放器代码按一定格式封装了起来，代码的核心和我们的播放器代码差不多。插件需要使用者提供少量参数，比如本帖要演示的代码，最少只需要一个参数：

<script>
HCPlayer({
      lrcAr : [1.06,"纯音乐 - 温柔的晚风",2],
});
</script>

这就能驱动帖子的 id="aud" 的 audio 音频控件播放音乐并显示同步歌词。是不是很奇妙？

不过别高兴太早：discuz! 论坛不支持发帖引用任何JS文档，也就是，<script src="/hcplayer.js"></script> 根本就不能启用播放器插件！

不过也别高兴不起来，我们有应对办法：将原始插件代码全部引入，然后照着上面调用插件——

<script>
//插件代码（一整行）

HCPlayer({
      lrcAr : [1.06,"纯音乐 - 温柔的晚风",2],
});
</script>

这也很酷，两个 <script> 标签变成了一个，而且，使用者不用管弄成了一行的插件代码，只需给出足够的参数便可。

如果使用插件做帖子，帖子代码样式将会是酱紫，彩色部分的代码是使用者自己要做的，代码的后面我还会给出一些解释：

<style>
#papa {
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 600px;
      background: gray;
      box-shadow: 3px 3px 20px #000;
      position: relative;
}
</style>

<div id="papa"></div>
<audio id="aud" src="音频地址" autoplay loop></audio>

<script>
//插件代码（写成一行）

let lrcAr = [
      [1.06,"纯音乐 - 温柔的晚风",2],
];
HCPlayer({
      lrcAr : lrcAr,
});
</script>

一些解释：

一、暗红色的代码。帖子的CSS设定，只和帖子相关，没有播放器的任何代码在里面。但我们约定，装载帖子内容的父元素，#papa 选择器是必须的！

二、蓝色代码是HTML代码。第一行是帖子父元素，我们约定，id="papa" 是必须的！帖子的其他内容自己制作并放在 <div id="papa"> 和 </div> 之间；第二行是播放器代码，自动播放、循环播放，我们还约定，audio 代码中，id="aud" 是必须的！

三、关于JS代码。插件代码不用理睬，到时候将代码替换掉注释部分即可，作为使用不用修改任何地方。要修改的是调用插件的代码：

HCPlayer({
      lrcAr : [1.06,"纯音乐 - 温柔的晚风",2],
});

HCPlayer 是花潮播放器的调用命令，({ ... }) 里， ... 是插件接口，通过相关接口给插件提供数据，插件则将数据处理结果返回渲染页面；接口使用的是对象表达方式，对象子项目之间可以分行，末尾要有小角逗号。上面示例的红色部分，是向插件提供歌词数组数据。

我预设的接口参数目前有三个（注意大小写）：

① lrcAr :

必须是数组，即标准的花潮lrc歌词数组，可以只是一个数组元素，比如上面示例的纯音乐标题。歌词数组可以在 HCPlayer({}) 的前面声明，然后将变量放在 lrcAr : 之后。

② player_css :

这是针对播放控制器的参数。如果提供此参数数据，则需要完整的两样东东，即 top(或bottom）和left（或right），还必须配套提供基于 CSS 变量的参数共三个，--track、--prog、--color，分别定义圆环底轨、进度轨道和按钮+文本颜色。看例子理解：

HCPlayer({
      lrcAr : [1.06,"纯音乐 - 温柔的晚风",2],
      player_css : ' bottom: 10px; left: 10px; --track: #ccc; --prog: red; --color: silver;',
});

③ lrc_css :

这是歌词相关样式设置。如果提供此参数，和第 ② 个参数一样，top(或bottom）和left（或right）必须同时提供，此外也必须同时提供基于 CSS 变量的参数一个，--bg，用于定义lrc歌词颜色。看例子：

HCPlayer({
      lrcAr : [1.06,"纯音乐 - 温柔的晚风",2],
      player_css : 'bottom: 10px; left: 10px; --track: #ccc; --prog: red; --color: silver;',
      lrc_css: 'bottom: 10px; left: 10px; --bg: green',
});

插件的参数不是必须的！但至少要有这一句，HCPlayer({}); ，插件才能工作。如果不提供任何参数，播放器将以插件默认的设置生成播放器；如果需要提供参数，② player_css 和 ③ lrc_css 必须提供 left（或right）和 top（或bottom）以及 --... 的 css 变量和值，--track 之类的名称是固定的，不能有拼写错误。参数②和③，正如其名称 _css 所暗示的那样，它们的值是CSS描述语句，但头尾要有小角引号，单引号、双引号、反引号均可，但要统一。

上面的介绍，可能会觉得不好懂，没关系，看二楼的演示，再看后面的完整代码，慢慢就能理解，然后按本帖的介绍去做，使用者会发现，做帖时无需去弄太多的基于播放器的代码，给出几个参数便可，从而可以把精力更多地放在帖子内容之上。

马黑黑 · 发表于 2022-11-17 22:32

马黑黑 · 发表于 2022-11-17 22:32

二楼代码

<style>
#papa {
left: 50%;
transform: translateX(-50%);
width: 900px;
height: 600px;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
}
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1990770877.mp3" autoplay loop></audio>
<script>
(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);
let lrcAr = [
[1.06,"纯音乐 - 温柔的晚风",2],
];
HCPlayer({
lrcAr : lrcAr,
});
</script>