|
|

楼主 |
发表于 2022-12-16 09:15
|
显示全部楼层
- <style>
- #papa { margin: 0 0 0 calc(50% - 459px); width: 1080px; height: 699px; background: gray url('https://638183.freep.cn/638183/t22/webp/ymxl.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
- #mplayer { position: absolute; top: 20px; cursor: pointer; }
- #bb { position: absolute; left: 140px; width: 60px; height: 80px; background: linear-gradient(15deg,tan,red); border-radius: 50%; transform: skew(5deg); cursor: pointer; opacity: .85; transition: .25s; }
- </style>
- <div id="papa">
- <canvas id="mplayer"></canvas>
- <span id="bb" title="换个地址" onclick="javascript: aud.src='https://www.kumeiwp.com/sub/filestores/2022/12/15/eff8b4893d9868dd74e0f6c21f5fd86a.mp3'"></span>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1324441790.mp3" autoplay></audio>
- </div>
- <script>
- (function() {
- //音频数据略 ypData = [78,56,...,82,68,71,22];
- let total = 50, idx = 0;
- let ctx = mplayer.getContext('2d');
- let w = mplayer.width = 800, h = mplayer.height = 100;
- let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
- let colors = ['red','pink'];
- aud.loop = false;
- 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(ypData.length * ac / aud.duration);
- aud.currentTime = ac;
- } else {
- aud.paused ? aud.play() : aud.pause();
- }
- }
- aud.addEventListener('ended', () => { idx = 0; aud.play(); });
- aud.addEventListener('timeupdate', () => {
- idx = Math.round(ypData.length * aud.currentTime / aud.duration)
- if(idx > ypData.length - 1) idx = ypData.length - 1;
- draw();
- });
- let draw = () => {
- ctx.clearRect(0,0,w,h);
- ctx.strokeStyle = colors[0];
- ctx.fillStyle = colors[1];
- 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 - ypData[j] * h / vmax);
- }
- ctx.stroke();
- ctx.beginPath();
- ctx.strokeStyle = colors[1];
- for(j = idx + 1; j < ypData.length; j ++) {
- ctx.lineTo(slice*j, h - ypData[j] * h / vmax);
- }
- ctx.stroke();
- ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
- bb.style.top = 'calc(50% - ' + ypData[idx] + '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;};
- draw();
- })();
- </script>
复制代码
代码
|
|