莲的心事（学习马老师《频谱按钮+meter进度条播放器》作业）
本帖最后由 寒冬残荷 于 2022-11-22 00:03 编辑 <br /><br /><style>#papa {left: calc(50% - 81px); transform: translateX(-50%); width: 1200px; height: 750px; background: #666 url('https://pic.imgdb.cn/item/62ef805816f2c2beb18441a5.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative;}</style>
<div id="papa">
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=57693386.mp3" autoplay loop></audio>
</div>
<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;display: grid;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 0 4px;place-items: end center;font-size: 14px;--ww: 260px;--color: snow;}#cur {grid-area: cur;color: var(--color);}#dur {grid-area: dur;color: var(--color);}#btnplay {grid-area: btnplay;display: grid;grid-auto-flow: column;place-items: end center;gap: 4px;height: 60px;cursor: pointer;}#btnplay>span {background: red;width: 4px;transition: .6s;}#prog {grid-area: prog;width: var(--ww);height: 20px;opacity: .65;cursor: pointer;position: relative;}#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%; } }</style><div id="lrc" data-lrc="频谱按钮+meter进度条播放器">频谱按钮+meter进度条播放器</div><div id="mplayer"><div id="cur">00:00</div><div id="btnplay"></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;(function() {for (j = 0; j < 20; j++) {let pinpu = document.createElement('span');pinpu.className = 'pinpu';pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;btnplay.appendChild(pinpu);}})();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);setPinpu();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => lrc.style.setProperty('--state', aud.paused ? 'paused' : 'running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.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) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);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;}};let setPinpu = () => {let eles = document.querySelectorAll('.pinpu');eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);};mkPlayer.HCPlayer = playCode;})(this);
let lrcAr = [, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
HCPlayer({
lrcAr: lrcAr ,
lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%); font: bold 3.8em 楷体; --bg: linear-gradient(90deg, hsla(360,100%,50%,.35),hsla(360,100%,40%,.6)); color: hsla(120,100%,100%,.95)' ,
});
</script>
漂亮，这个做得很成功。欣赏寒冬残荷好帖{:4_187:} 很漂亮的帖子 红影 发表于 2022-11-21 23:01
漂亮，这个做得很成功。欣赏寒冬残荷好帖
谢谢红管理的鼓励。让红管理见笑了，{:5_106:}因为我没有时间慢慢构思、设计，只是照抄马老师的代码（就换了背景图和LRC歌词颜色和字体）。 欣赏音画佳作！ 马黑黑 发表于 2022-11-21 23:17
很漂亮的帖子
谢谢马老师的鼓励。让老师见笑了，因为我没有时间慢慢构思、设计，只是照抄老师的代码（就换了背景图和LRC歌词颜色和字体）。 寒冬残荷 发表于 2022-11-21 23:24
谢谢马老师的鼓励。让老师见笑了，因为我没有时间慢慢构思、设计，只是照抄老师的代码（就换了背景图和LR ...
可以的，你很有创造能力 寒冬残荷 发表于 2022-11-21 23:23
谢谢红管理的鼓励。让红管理见笑了，因为我没有时间慢慢构思、设计，只是照抄马老师的代码（就 ...
很好呢，做得非常漂亮，很成功{:4_187:} 美帖
问好朋友{:4_171:} https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftva3.sinaimg.cn%2Fbmiddle%2Fc3335c0ely1gqvzx5woaeg20c007bdki.gif&refer=http%3A%2F%2Ftva3.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671672183&t=e74c90a51f0e9b521551b8efcf512339
相约爱晚亭 发表于 2022-11-21 23:24
欣赏音画佳作！
谢谢您的欣赏！ 辫子哥哥 发表于 2022-11-22 00:11
美帖
问好朋友
您好！感谢您临贴支持和鼓励！您谬赞了，不是美贴，仅是试试马老师《频谱按钮+meter进度条播放器》的效果。{:5_117:} 醉美水芙蓉 发表于 2022-11-22 06:38
做得真漂亮！欣赏老师佳作！
芙蓉老师好！感谢您的支持与鼓励！我目前因家务事忙没有时间认真玩电脑了，这贴仅是试试马老师《频谱按钮+meter进度条播放器》的效果而已（喜欢马老师的音频播放器插件，忍不住试试）。 起个网名好难 发表于 2022-11-22 09:25
老师好！感谢您的支持与鼓励！我目前因家务事忙没有时间认真玩电脑了，这贴仅是试试马老师《频谱按钮+meter进度条播放器》的效果而已（喜欢马老师的音频播放器插件，忍不住试试），用的是以前的图片和歌词。 起个网名好难 发表于 2022-11-22 09:25
是的，马老师的音频播放器插件可以设置歌词和控制器的位置、颜色。 寒冬残荷 发表于 2022-11-22 09:57
您好！感谢您临贴支持和鼓励！您谬赞了，不是美贴，仅是试试马老师《频谱按钮+meter进度条播放器》的效果 ...
多试几个{:4_187:}
页:
[1]