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

马黑黑

红影 发表于 2022-11-30 04:20
空了来做这个。

热切期盼

红影

马黑黑 发表于 2022-11-30 07:22
热切期盼

今天又没时间了，下午要外出。

马黑黑

红影 发表于 2022-11-30 10:40
今天又没时间了，下午要外出。

工作优先

马黑黑

二十七、进度条滑块+多叶草（默认三叶草）

插件代码：

(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 15px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 0; left: 50%; transform: translateX(-50%);',num: 3,playerCode: `<style>#mplayer {position: absolute;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 8px 2px;place-items: end center;color: var(--color);font: normal 16px sans-serif;padding-bottom: 20px;z-index: 999;--ww: 260px;--btn_size: 30px;--color: hsla(0,0%,100%,.75);--track: hsla(90,100%,95%,.65);--prog: linear-gradient(90deg,hsla(90,30%,50%,.55),hsla(280,40%,50%,.75),hsla(30,100%,50%,.65));}#cur { grid-area: cur; color: var(--color); }#dur { grid-area: dur; color: var(--color); }#btnplay {--state: paused;position: absolute;grid-area: btnplay;width: var(--btn_size);height: var(--btn_size);bottom: 6px;animation: rot linear 3s infinite;animation-play-state: var(--state);cursor: pointer;}#btnplay > span {position: absolute;width: 50%;height:50%;border-radius: 0 100%;background: var(--color);transform-origin: 100% 100%;}#prog {--xx: 0px;grid-area: prog;width: var(--ww);height: 4px;background: var(--track);position: relative;display: grid;place-items: center;border-radius: 4px;}#prog::before, #prog::after { position: absolute; content: ''; }#prog::before {left: 0;width: var(--xx);height: 100%;border-radius: 6px;background: var(--prog);border-radius: 4px;}#prog::after {left: calc(var(--xx) - 12px);opacity: .85;width: 16px;height: 16px;background: radial-gradient(transparent 2px, teal 0, black);border-radius: 50%;cursor: pointer;}#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(70, 50%, 50%, .45), hsla(190, 80%, 50%, .75));position: absolute;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));z-index: 1000;}#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><span id="prog"></span><span id="cur">00:00</span><span id="dur">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, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);if(mDrag===false) prog.style.setProperty('--xx', aud.currentTime * prog.offsetWidth / aud.duration + 'px');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());prog.onmousedown = () => mDrag = true;document.onmouseup = () => mDrag = false;mplayer.onmouseup = (e) => { if(mDrag) aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth; };mplayer.onmousemove = (e) => { if(mDrag) moveBar(e.offsetX); };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 = data.lrcAr[mKey][1];lrc.dataset.lrc = data.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 moveBar = (x) => {if(x < 0) x = 0;if(x > prog.offsetWidth - 5) x = prog.offsetWidth - 5;prog.style.setProperty('--xx', x + 'px');};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(num) {for(j = 0; j<num; j++) {let ele = document.createElement('span');ele.style.transform = `rotate(${j*360/num}deg)`;btnplay.appendChild(ele);}})(data.num);};mkPlayer.HCPlayer = playCode;})(this);

插件配置：请参阅 18号插件

要配置叶片按钮的叶片数，需要额外配置独立接口 num ，举例如下：

//其他代码

HCPlayer({
        lrcAr: lrcAr,
        lrc_css: `
                top: 15px;
                left: 50%;
                transform: translate(-50%);
                color: tan;
                --bg: linear-gradient(180deg, green, orange);
        `,
        player_css: `
                bottom: 20px;
                left: 20px;
                --color: white;
                --ww: 260px;
                --hh: 8px;
                --btn_size: 30px;
                --track: snow;
                --prog: purple;
        `,
        num: 5,
});

马黑黑

多叶草的叶片数量未做任何限制，但理论上应在 3 至 12 之间为佳，大家可以尝试

马黑黑

说是草，三四片时像，多了更像花，再多点像齿轮

红影

马黑黑 发表于 2022-11-30 13:03
多叶草的叶片数量未做任何限制，但理论上应在 3 至 12 之间为佳，大家可以尝试

这个好，加入了JS去计算，就不用自己去一个个配置旋转角度了，得到的角度值也是很精准的

红影

马黑黑 发表于 2022-11-30 13:06
说是草，三四片时像，多了更像花，再多点像齿轮

又是一个新封装，黑黑厉害

马黑黑

红影 发表于 2022-11-30 19:21
又是一个新封装，黑黑厉害

这个也是之前做过的，包装一下而已

马黑黑

红影 发表于 2022-11-30 19:20
这个好，加入了JS去计算，就不用自己去一个个配置旋转角度了，得到的角度值也是很精准的

静不精准木有关系，都是虚数

红影

马黑黑 发表于 2022-11-30 19:50
这个也是之前做过的，包装一下而已

记得你还把三叶草做在一个旗杆上

红影

马黑黑 发表于 2022-11-30 19:50
静不精准木有关系，都是虚数

还是需要这个数字的啊。

马黑黑

红影 发表于 2022-11-30 20:53
还是需要这个数字的啊。

随便给一个吧

马黑黑

红影 发表于 2022-11-30 20:47
记得你还把三叶草做在一个旗杆上

做过的吧

马黑黑

二十八、极简圆环播放器（无lrc歌词版）

插件代码：

(function(mkPlayer) {let defaults = {player_css: 'bottom: 10px; left: calc(50% - 50px);',playerCode: `<style>#mplayer { position: absolute; --track: hsla(100,30%,80%,.65); --prog: hsla(100,60%,40%,.55); }#btnwrap { display: block; fill: var(--track); opacity: .95; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }</style><svg id="mplayer" width="100" height="100"><g id="circle_wrap" transform="rotate(-90, 50, 50)" style="cursor: pointer;"><circle id="track" cx="50" cy="50" r="40" stroke-width="10" /><circle id="prog" cx="50" cy="50" r="40" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 40 40,40 60,60, 50 z"></path><path id="btnpause" d="M 42 40,42 60,47 60,47 40,42 40 z M 50 40,50 60,55 60,55 40,50 40 z" style="display: none;"></path><path d="M 47 50,50 40,50 60,47 60 z" fill="transparent" /></g></svg>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let 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;});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => aud.play());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');};mkPlayer.HCPlayer = playCode;})(this);

插件参数配置：

首先，请确保帖子的HTML拥有一个帖子父元素和一个音频播放控件，代码结构如下，红色代码必须存在：

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

其次，有两种方法配置插件：

（一）无参数配置，最简单：

<script >
//插件代码略（就是前面的插件代码）
HCPlayer({});
</script>

（二）有参数配置，也不复杂，就是设置播放器的位置、底轨颜色和进度条颜色。其中：

① top - 设置播放器垂直位置，也可以用 bottom 表示，top 基于自上而下定位，bottom 基于自下而上定位；
② left - 设置播放器水平位置，也可以用 right 表示，left 基于自左向右定位，right 基于自右向左定位；
③ --track - 设置播放器圆环底轨颜色，支持颜色表达法（如 red、#ff0000、rgb、rgba、hsl、hsla）和背景渐变表达法；
③ --prog - 设置播放器播放进度指示颜色，颜色表达同 ③

下面是配置示例：

<script >
//插件代码略（就是前面的插件代码）
HCPlayer({
    player_css: `
        top: 20px;
        left: 20px;
        --track: tan;
        --prog: green;
    `,
});
</script>


不一定每一个参数属性都配置，比如仅需定位，则这样边框：

<script >
//插件代码略（就是前面的插件代码）
HCPlayer({
    player_css: `
        top: 20px;
        left: 20px;
    `,
});
</script>

红影

马黑黑 发表于 2022-11-30 21:35
随便给一个吧

这个也可以随便的啊

红影

马黑黑 发表于 2022-12-1 07:44
二十八、极简圆环播放器（无lrc歌词版）

插件代码：

这个最方便

马黑黑

红影 发表于 2022-12-1 21:03
这个最方便

其他的也可以这样的

马黑黑

红影 发表于 2022-12-1 20:59
这个也可以随便的啊

应该可以

红影

马黑黑 发表于 2022-12-1 21:05
其他的也可以这样的

嗯，其他的也可以直接用默认的，什么都不调。