花潮音频播放器插件小集合

马黑黑

红影 发表于 2022-11-19 20:21
这个还是头一次听说

你看论坛搜索框的右边

红影

马黑黑 发表于 2022-11-19 16:29
倒着装，丢了

洒脱点呗，丢了就丢了

红影

马黑黑 发表于 2022-11-19 16:30
今天有时间，测试一下，就发现问题了

你不但能做出来，还能测试，而且完全不耽误回帖。我手脚并用都回不完，真是人比人，气死人啊

红影

马黑黑 发表于 2022-11-19 20:22
你看论坛搜索框的右边

右边有什么？

马黑黑

红影 发表于 2022-11-19 21:19
右边有什么？

有放大镜

马黑黑

红影 发表于 2022-11-19 20:53
你不但能做出来，还能测试，而且完全不耽误回帖。我手脚并用都回不完，真是人比人，气死人啊

放大镜的功劳

马黑黑

红影 发表于 2022-11-19 20:51
洒脱点呗，丢了就丢了

只能如此

红影

马黑黑 发表于 2022-11-19 21:52
有放大镜

哦哦，看到了，那个图标也代表了搜索。原来放大镜几个字是这么来的

红影

马黑黑 发表于 2022-11-19 21:55
放大镜的功劳

手脚快和放大镜没关系吧

红影

马黑黑 发表于 2022-11-19 21:55
只能如此

好像很不甘的样子

马黑黑

十、背景图片按钮+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%);',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%);--btn_img: linear-gradient(teal 0%, tan 100%);--btn_size: 35px;}#btnplay {--state: paused;width: var(--btn_size);height: var(--btn_size);background: var(--btn_img);border-radius: 50%;opacity: .9;cursor: pointer;animation: rot 3s 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;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[j][0]) {cKey = j;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 ? (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[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].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[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.26,"花潮LRC在线",3],
];

HCPlayer({
        lrcAr: lrcAr,
        lrc_css: 'top: 5px; left: 50%; transform: translate(-50%); --bg: linear-gradient(hsla(100,70%,50%,.35),hsla(120,40%,40%,.6)); color: hsla(120,100%,95%,.95)',
        player_css: 'bottom: 20px; --color: #ddd; --ww: 200px; --btn_size: 40px; --btn_img: url("https://638183.freep.cn/638183/t22/btn/g2.png") no-repeat center/cover;',
});

</script>


参数说明：

① lrcAr 歌词数组

② lrc_css 歌词CSS相关设定，可设置 top（或 bottom）和 left（或right） 等值，另外，接受1个CSS变量变量 ：--bg（同步歌词盒子背景色）；

③ player_css 播放控制器相关CSS设置，可设置 top（或 bottom）和 left（或right） 等值，还接受4个CSS变量：--ww（进度条长度）、--color（播放时间信息文本颜色）、--btn_img（按钮图片或渐变背景）、--bnt_size（按钮大小）。

参数 ③ player_css 预留的CSS变量较多，这是图片按钮必须的，新增加的变量有二：

其一，--btn_img，上面已经解释，赋值是要注意的是，由于论坛会对图片进行解析，所以必须将图片地址用小角双引号将其包裹起来、且最好给出 no-repeat center/cover 设置，这样按钮图片偏大时也能较好显示；其二，--bnt_size 设置按钮大小，40px上下是比较合适的。具体设置请参考示例中的红色部分。

马黑黑

红影 发表于 2022-11-19 22:15
好像很不甘的样子

也没问题

马黑黑

红影 发表于 2022-11-19 22:12
手脚快和放大镜没关系吧

关系大了：放大镜明晰一切

马黑黑

红影 发表于 2022-11-19 22:12
哦哦，看到了，那个图标也代表了搜索。原来放大镜几个字是这么来的

你用了这么长时间才能明白

红影

马黑黑 发表于 2022-11-19 22:35
也没问题

转眼已经到第十个封装效果了，黑黑太厉害了。

马黑黑

十一、背景图片按钮+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;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%);--btn_img: linear-gradient(teal 0%, tan 100%);--btn_size: 35px;}#btnplay {--state: paused;width: var(--btn_size);height: var(--btn_size);background: var(--btn_img);border-radius: 50%;opacity: .9;cursor: pointer;animation: rot 3s 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;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[j][0]) {cKey = j;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 ? (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[mKey][1];lrc.dataset.lrc = lrcAr[mKey][1].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[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.26,"花潮LRC在线",3],
];

HCPlayer({
        lrcAr: lrcAr,
        lrc_css: `
                top: 5px;
                left: 50%;
                transform: translate(-50%);
                --bg: linear-gradient(hsla(100,70%,50%,.35),hsla(120,40%,40%,.6));
                color: hsla(120,100%,95%,.95)
        `,
        player_css: `
                bottom: 20px;
                --color: #ddd;
                --ww: 200px;
                --btn_size: 40px;
                --btn_img: url("https://638183.freep.cn/638183/t22/btn/g2.png") no-repeat center/cover;
        `,
});

</script>


可以像上面那样使用反引号 `` 给参数赋值，这时图片地址用小角双引号或小角单引号都可以。其他细节请参照播放器十。

马黑黑

红影 发表于 2022-11-19 22:44
转眼已经到第十个封装效果了，黑黑太厉害了。

做的有些匆忙，主要是明天没空，赶在 23 点前做完图片按钮。做了简单测试，应该没什么大问题。

红影

马黑黑 发表于 2022-11-19 22:36
关系大了：放大镜明晰一切

被你说得，好像放大镜是万能的

红影

马黑黑 发表于 2022-11-19 22:36
你用了这么长时间才能明白

只把它当特定图标了，没去想它形状的含义

红影

马黑黑 发表于 2022-11-19 22:49
做的有些匆忙，主要是明天没空，赶在 23 点前做完图片按钮。做了简单测试，应该没什么大问题。

十一个了，这个帖子太好，囊括了所有花潮播放器的封装效果