一楼完整代码- <style>
- #papa { margin: auto; width: 760px; height: 460px; background: gray; box-shadow: 3px 3px 20px #000; position: relative; }
- </style>
- <div id="papa"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1324441790.mp3" autoplay loop></audio>
- <script>
- (function() {
- (function(mkPlayer) {let defaults = {ypData: new Array(600).fill(0).map((v, k) => Math.floor(Math.random() * 200) + 10),player_css: 'bottom: 15px; left: 50%; transform: translate(-50%); ',playerCode: `<style>#mplayer { --color1: red; --color2: pink; --ww: 200; --hh: 80; position: absolute; cursor: pointer; }</style><canvas id="mplayer"></canvas>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let ctx = mplayer.getContext('2d');let getCssVal = (e,v) => getComputedStyle(e).getPropertyValue(v);let w = mplayer.width = getCssVal(mplayer,'--ww').replace(/[^0-9]/ig,''), h = mplayer.height = getCssVal(mplayer,'--hh').replace(/[^0-9]/ig,''), idx = 0;let slice = w / data.ypData.length, vmax = Math.max.apply(null, data.ypData);mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };mplayer.onclick = (e) => {if(e.offsetY < h * 0.8) {let ac = aud.duration * e.offsetX / w;idx = Math.round(data.ypData.length * ac / aud.duration);aud.currentTime = ac;} else {aud.paused ? aud.play() : aud.pause();}};aud.addEventListener('timeupdate', () => {idx = Math.round(data.ypData.length * aud.currentTime / aud.duration);if(idx > data.ypData.length - 1) idx = data.ypData.length - 1;draw();});let draw = () => {ctx.clearRect(0,0,w,h);ctx.strokeStyle = getCssVal(mplayer,'--color1');ctx.fillStyle = getCssVal(mplayer,'--color2');ctx.font = '14px sans-serif';ctx.shadowOffsetX = ctx.shadowOffsetY = 1;ctx.shadowBlur = 2;ctx.shadowColor = '#555';ctx.textAlign = 'center';ctx.beginPath();for(j = 0; j <= idx; j ++) {ctx.lineTo(slice*j, h - data.ypData[j] * h / vmax);}ctx.stroke();ctx.beginPath();ctx.strokeStyle = getCssVal(mplayer,'--color2');for(j = idx; j < data.ypData.length; j ++) {ctx.lineTo(slice*j, h - data.ypData[j] * h / vmax);}ctx.stroke();ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);};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;};draw();};mkPlayer.HCPlayer = playCode;})(this);
- ypData = [78,56,130,109,112,96,91,104,98,91,93,95,92,108,101,121,107,133,116,122,132,130,143,141,114,59,77,80,79,63,84,112,69,52,99,102,113,99,74,104,93,71,91,95,97,102,110,112,111,116,117,132,97,126,101,121,129,136,144,142,108,82,78,84,84,71,99,97,104,101,94,102,94,84,73,74,82,81,101,92,109,106,101,107,112,104,151,113,137,129,106,135,119,143,132,118,94,84,86,79,69,105,85,88,94,104,91,88,75,97,115,86,95,106,116,109,115,109,105,100,132,99,130,131,114,138,121,144,125,124,93,102,98,89,70,116,102,93,91,86,85,82,80,77,82,92,101,98,105,109,104,101,120,99,108,88,118,115,83,64,79,114,100,130,84,118,117,140,100,68,124,93,109,95,103,124,98,90,111,89,97,89,71,72,67,124,118,145,103,70,84,92,102,108,100,116,100,94,90,84,101,91,62,93,81,96,92,75,83,68,122,95,86,88,93,125,109,99,104,84,104,103,95,109,86,101,118,100,105,124,79,113,131,103,97,109,93,102,96,112,75,125,103,120,123,92,113,130,123,105,103,88,107,103,110,117,121,119,115,119,84,101,95,71,137,69,72,103,128,121,97,90,98,101,109,101,92,104,88,100,108,96,106,87,92,96,88,113,111,85,94,88,112,78,88,107,111,122,92,115,119,101,89,94,93,129,128,124,116,102,101,115,102,96,92,84,112,117,119,123,121,81,130,139,138,144,117,122,104,93,87,120,137,122,125,128,140,147,118,94,108,88,75,69,86,88,98,99,113,139,137,144,99,140,101,99,86,128,112,80,113,113,106,136,101,139,103,94,106,117,129,117,105,118,122,113,131,108,104,133,127,134,115,107,128,139,73,83,110,116,130,117,115,97,125,113,92,77,83,99,85,80,114,128,140,103,76,100,95,114,132,126,97,130,115,110,114,87,92,103,98,103,103,120,114,82,99,128,110,89,114,108,117,103,124,124,103,113,64,84,64,143,106,132,97,81,86,84,102,94,92,81,102,120,114,131,121,61,100,91,85,94,87,82,71,62,96,96,74,97,107,86,126,55,74,88,113,130,109,74,81,80,92,72,74,88,73,92,69,82,101,110,93,104,102,110,114,117,98,101,107,91,89,89,86,101,112,119,109,73,85,71,74,68,103,113,134,125,98,77,89,53,86,84,81,72,77,100,93,74,109,80,90,97,95,115,120,117,105,84,111,94,92,105,109,116,100,144,102,97,114,108,91,116,102,105,94,92,103,80,87,95,67,83,82,114,119,119,134,82,71,92,109,104,106,91,100,116,98,98,104,91,90,101,84,111,122,100,84,80,89,95,77,95,106,108,115,98,81,92,77,104,85,56,95,99,100,115,91,119,120,82,132,126,112,104,110,99,100,115,124,80,140,107,115,119,71,110,140,120,137,101,110,96,113,113,117,106,97,86,111,98,108,120,110,96,96,81,122,119,111,86,78,85,116,104,108,109,108,107,102,81,103,89,74,91,77,97,99,69,69,73,119,88,88,109,109,94,119,117,124,90,95,102,104,107,121,132,89,89,98,74,71,81,104,99,108,95,126,132,120,108,91,115,129,116,137,124,141,97,76,101,131,117,109,123,112,131,133,100,97,92,98,118,81,106,93,98,107,103,137,109,133,109,107,119,94,88,133,121,106,134,94,114,121,142,124,131,98,109,105,109,118,115,126,124,106,113,115,91,121,126,113,121,137,94,128,116,85,86,106,117,127,116,110,88,81,105,74,80,81,90,110,108,109,125,114,144,95,99,94,77,101,140,106,86,102,112,103,96,78,101,116,114,120,126,114,117,90,100,124,104,117,112,112,114,111,79,135,127,122,100,69,68,83,139,94,66,84,64,86,76,92,98,98,97,124,109,108,119,115,102,96,94,75,93,97,138,102,71,77,97,89,98,112,91,125,71,75,98,126,123,116,87,73,65,93,72,69,86,95,122,97,86,103,108,106,105,105,120,126,121,106,83,116,102,73,86,86,88,95,107,123,78,77,94,58,89,61,125,141,110,102,112,82,109,100,115,86,65,63,67,91,90,80,97,90,114,121,88,124,127,101,104,108,90,87,108,107,103,115,92,94,128,135,102,82,105,102,100,130,125,113,116,129,140,113,97,132,129,128,125,103,103,123,91,86,104,111,123,107,118,93,117,118,99,64,84,70,120,102,106,120,122,148,118,96,91,85,111,133,113,106,106,120,97,112,90,102,91,108,117,121,100,112,121,105,103,112,102,126,130,112,105,93,83,108,120,116,85,66,89,134,106,104,137,129,110,116,92,97,101,108,103,107,118,118,121,117,112,97,113,124,117,124,119,98,114,126,125,102,103,124,116,139,144,129,129,114,131,140,116,120,104,122,126,111,115,105,110,112,100,103,94,93,99,82,98,112,100,111,102,115,99,93,99,110,102,114,95,96,107,95,132,93,112,124,119,127,143,129,142,139,103,96,96,106,102,112,107,116,112,114,102,123,116,106,106,123,112,105,93,107,92,112,101,103,83,105,93,138,104,137,142,123,122,117,129,108,114,129,109,95,90,85,92,99,58,93,109,99,85,79,78,80,88,65,67,64,72,91,101,89,98,91,81,78,78,69,85,80,81,60,64,82,68,71,22];
- HCPlayer({
- ypData: ypData,
- player_css: '--color1: purple; --color2: snow; --ww: 280px; --hh: 80px; left: calc(50% - 140px); bottom: 20px; ',
- });
- })();
- </script>
|
发表于 2022-12-16 17:50
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2022-12-16 20:31
发表于 2022-12-16 20:59
