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

马黑黑

红影 发表于 2022-11-19 11:42
黑黑这份功底，我是赤了脚也追不上了

我功底也差的，全靠有放大镜

马黑黑

醉美水芙蓉 发表于 2022-11-19 11:41
黑黑老师速度好快！制作辛苦了！

马黑黑

八、手链按钮+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_size: '40px',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 2px 6px;place-items: end center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(0, 100%, 100%);}#btnplay {grid-area: btnplay;--state: paused;width: 40px;height: 40px;cursor: pointer;display: grid;place-items: center;animation: rot linear 3s infinite;position: relative;animation: rot 3s linear infinite;animation-play-state: var(--state);}#btnplay > span {position: absolute;width: 10px;height: 10px;border-radius: 50%;background: linear-gradient(tan,red);}#prog {grid-area: prog;width: var(--ww);height: 20px;opacity: .95;cursor: pointer;}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(200,50%,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"><div id="cur">00:00</div><div id="btnplay"><span></span></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;btnplay.style.width = btnplay.style.height = data.btn_size || '40px';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);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;};(function mkSpan() {[...Array(10).keys()].forEach((ele, key) => {ele = document.createElement('span');ele.style.cssText += `background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});transform: rotate(${key*36}deg) translate(18px)`;btnplay.appendChild(ele);});})();};mkPlayer.HCPlayer = playCode;})(this);

let lrcAr = [
        [2.6, "HCPlayer - 花潮LRC在线", 3],
];

HCPlayer({
        lrcAr: lrcAr,
        //lrc_css: 'top: 20px; left: 20px; --bg: #fcff00;',
        //player_css: 'bottom: 20px; left: 200px; --color: #ccc; --ww: 180px;',
});

</script>


参数设置请参照其他同类播放器，放长条形进度条都有 --ww 长度设置接口。

马黑黑

九、手链按钮+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_size: '40px',playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 2px 6px;place-items: end center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--ww: 260px;--color: hsl(0, 100%, 100%);}#btnplay {grid-area: btnplay;--state: paused;width: 40px;height: 40px;cursor: pointer;display: grid;place-items: center;animation: rot linear 3s infinite;position: relative;animation: rot 3s linear infinite;animation-play-state: var(--state);}#btnplay > span {position: absolute;width: 10px;height: 10px;border-radius: 50%;background: linear-gradient(tan,red);}#prog {grid-area: prog;width: var(--ww);height: 20px;opacity: .95;cursor: pointer;}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(200,50%,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"><div id="cur">00:00</div><div id="btnplay"><span></span></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;btnplay.style.width = btnplay.style.height = data.btn_size || '40px';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);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;};(function mkSpan() {[...Array(10).keys()].forEach((ele, key) => {ele = document.createElement('span');ele.style.cssText += `background: linear-gradient(135deg, #${Math.random().toString(16).substr(-6)}, #${Math.random().toString(16).substr(-6)});transform: rotate(${key*36}deg) translate(18px)`;btnplay.appendChild(ele);});})();};mkPlayer.HCPlayer = playCode;})(this);

let lrcAr = [
        [2.6, "HCPlayer - 花潮LRC在线", 3],
];

HCPlayer({
        lrcAr: lrcAr,
        //lrc_css: 'top: 20px; left: 20px; --bg: #fcff00;',
        //player_css: 'bottom: 20px; left: 200px; --color: #ccc; --ww: 180px;',
});

</script>


参数设置参照上一个播放器

红影

马黑黑 发表于 2022-11-19 12:01
又做了两个，此间还去逛了一下超市

我哪都没去还没回复完

红影

马黑黑 发表于 2022-11-19 12:02
发现你没返现

错，是返现你没发现

马黑黑

红影 发表于 2022-11-19 13:20
我哪都没去还没回复完

不过这次封装的后四个，都有bug，我刚发现，现在修复了。期待新的bug

红影

马黑黑 发表于 2022-11-19 12:02
我功底也差的，全靠有放大镜

哦？你说的放大镜到底是什么啊，感觉很牛的样子

马黑黑

红影 发表于 2022-11-19 13:20
错，是返现你没发现

我认真看了兜里，啥都木有，怎么发现

马黑黑

红影 发表于 2022-11-19 13:21
哦？你说的放大镜到底是什么啊，感觉很牛的样子

就是搜索，搜索引擎不就一个放大镜？不会的、忘记的，查查资料，问题不就解决了？

红影

马黑黑 发表于 2022-11-19 13:21
不过这次封装的后四个，都有bug，我刚发现，现在修复了。期待新的bug

哇，还是你自己发现的。都还没来得及去做呢，BUG就被消灭于无形了

红影

马黑黑 发表于 2022-11-19 13:21
我认真看了兜里，啥都木有，怎么发现

只不过是发现和返现的倒装而已

红影

马黑黑 发表于 2022-11-19 13:22
就是搜索，搜索引擎不就一个放大镜？不会的、忘记的，查查资料，问题不就解决了？

哦，是搜索引擎啊，这个叫法真新奇

马黑黑

红影 发表于 2022-11-19 15:00
哦，是搜索引擎啊，这个叫法真新奇

也不新奇。搜索图标很多就是放大镜

马黑黑

红影 发表于 2022-11-19 15:00
只不过是发现和返现的倒装而已

倒着装，丢了

马黑黑

红影 发表于 2022-11-19 14:59
哇，还是你自己发现的。都还没来得及去做呢，BUG就被消灭于无形了

今天有时间，测试一下，就发现问题了

马黑黑

醉美水芙蓉 发表于 2022-11-19 19:49
黑黑老师最后两个最喜欢的播放器学生试不出来？

谢谢反馈。我修正了，你重新复制一下两个手链播放器的代码再试

红影

马黑黑 发表于 2022-11-19 16:29
也不新奇。搜索图标很多就是放大镜

这个还是头一次听说