假频谱假响应播放器（测试）

马黑黑

马黑黑

代码

1. <style>
   
2. #papa { margin: auto; width: 760px; height: 460px; background: linear-gradient(to right bottom,navy,lightblue); box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
   
3. </style>
   
4. 
   
5. <div id="papa"></div>
   
6. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1990700249.mp3" loop autoplay></audio>
   
7. 
   
8. <script>
   
9. (function() {
   
10.         (function(mkPlayer) { let defaults = { lrcAr: [[2, "花潮LRC在线", 3]], player_css: '', lrc_css: '', playerCode: ` <style> #mplayer { --color1: snow; --color2: navy; position: absolute; left: calc(50% - 60px); bottom: 10px; width: 120px; height: 120px; border-radius: 50%; background: repeating-conic-gradient(var(--color1) 0deg, var(--color2) 0.18deg); border: 6px solid var(--color1); cursor: pointer; display: grid; place-items: center center; box-shadow: 1px 2px 4px #000; } #mplayer::before { position: absolute; content: attr(data-tt); color: var(--color2); text-shadow: 1px 1px 2px var(--color1); opacity: .95; } #lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75)); position: absolute; top: 20px; 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%;}} </style> <div id="mplayer" data-tt="0"></div> <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; mplayer.onclick = () => aud.paused ? aud.play() : aud.pause(); aud.loop = false; let mKey = 0, coe = 0, mFlag = true;  aud.addEventListener('pause', () => mState()); aud.addEventListener('playing', () => mState()); aud.addEventListener('ended', () => { mKey = 0; aud.play(); }); aud.addEventListener('timeupdate', () => { mplayer.dataset.tt = '-' + toMin(aud.duration - aud.currentTime); coe = Math.random() * 2.5; update(); 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; } } });  let update = () => { let step = coe + Math.random() * coe; mplayer.style.background = `repeating-conic-gradient(var(--color1) 0deg, var(--color2) ${step}deg)`; };  let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.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 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);
    
11.         let lrcAr = [[2.6,"纯音乐 - 河流",6]];
    
12.         HCPlayer({
    
13.                 lrcAr: lrcAr,
    
14.                 lrc_css: '',
    
15.                 player_css: '--color1: navy; --color2: snow;',
    
16.         });
    
17. })();
    
18. </script>

复制代码

【说明】

最简单的配就一个语句，HCPlayer({}); ，但还是建议至少给一个帖子标题：

        HCPlayer({
                lrcAr: [[2,"纯音乐 - 猪猪之歌",3]],
        });

更多的参数，让你的帖子与众不同：

lrc_css : 用于设置lrc歌词颜色，color: 颜色; 设置歌词底色，--bg: 颜色或渐变颜色; 用于设置同步颜色。例如：

                lrc_css: 'color: #ccc; --bg: red;',

player_css : 用于设置播放器定位和颜色。left 或 right 、 top 或 bottom 交叉配对可快速定位播放器与帖子中；--color1 用于设置播放器边框颜色和加频谱颜色一，--color2 用于设置播放器的频谱色二和文本色。例如：

                player_css: '--color1: navy; --color2: snow;',

基本上就酱了。

梦缘

新的频谱，感谢老师的代码分享！

马黑黑

梦缘 发表于 2022-12-11 19:44
新的频谱，感谢老师的代码分享！

假的

红影

这样的频谱也有意思，不管是不是响应式的，也多了一份灵动，暂停还能欣赏美丽的花纹呢

马黑黑

红影 发表于 2022-12-11 20:21
这样的频谱也有意思，不管是不是响应式的，也多了一份灵动，暂停还能欣赏美丽的花纹呢

冷门渐变其实也挺好的

红影

马黑黑 发表于 2022-12-11 20:52
冷门渐变其实也挺好的

黑黑脑袋灵光，能给你想出这么多实现方式

马黑黑

红影 发表于 2022-12-11 21:41
黑黑脑袋灵光，能给你想出这么多实现方式

repeating-xx-gradient 还有两个，不过感觉做按钮不太好弄

红影

马黑黑 发表于 2022-12-11 21:53
repeating-xx-gradient 还有两个，不过感觉做按钮不太好弄

不一定每个都弄啊，关键是这种创新思路

马黑黑

醉美水芙蓉 发表于 2022-12-11 22:36
黑黑老师创新很多，跟着学做都跟不上了！

马黑黑

红影 发表于 2022-12-11 22:06
不一定每个都弄啊，关键是这种创新思路

那是那是

红影

马黑黑 发表于 2022-12-11 23:11
那是那是

新思路才是源头，其他跟着弄的不过是照葫芦画瓢

马黑黑

红影 发表于 2022-12-12 16:13
新思路才是源头，其他跟着弄的不过是照葫芦画瓢

都不错

红影

马黑黑 发表于 2022-12-12 17:16
都不错

源头最重要

马黑黑

红影 发表于 2022-12-12 19:49
源头最重要

源头是基础，但源头不是一切。好比孩子生出来了，这太重要了，但生孩子不是孩子的一切，孩子的发展还得依靠诸多的因素。

红影

马黑黑 发表于 2022-12-12 19:54
源头是基础，但源头不是一切。好比孩子生出来了，这太重要了，但生孩子不是孩子的一切，孩子的发展还得依 ...

首先还是需要有这个孩子的存在，一切才有可能

马黑黑

红影 发表于 2022-12-12 20:52
首先还是需要有这个孩子的存在，一切才有可能

但出生他的事情，不是一切的事情

红影

马黑黑 发表于 2022-12-12 20:54
但出生他的事情，不是一切的事情

成长是后面的事

马黑黑

红影 发表于 2022-12-12 21:51
成长是后面的事

那当然，不可能成长后才出生