月满西楼

马黑黑

马黑黑

1. <style>
   
2. #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; }
   
3. #mplayer { position: absolute; top: 20px; cursor: pointer; }
   
4. #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; }
   
5. </style>
   
6. 
   
7. <div id="papa">
   
8.         <canvas id="mplayer"></canvas>
   
9.         <span id="bb" title="换个地址" onclick="javascript: aud.src='https://www.kumeiwp.com/sub/filestores/2022/12/15/eff8b4893d9868dd74e0f6c21f5fd86a.mp3'"></span>
   
10.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1324441790.mp3" autoplay></audio>
    
11. </div>
    
12. 
    
13. <script>
    
14. (function() {
    
15.         //音频数据略 ypData = [78,56,...,82,68,71,22];
    
16. 
    
17.         let total = 50,  idx = 0;
    
18.         let ctx = mplayer.getContext('2d');
    
19.         let w = mplayer.width = 800, h = mplayer.height = 100;
    
20.         let slice = w / ypData.length, vmax = Math.max.apply(null, ypData);
    
21.         let colors = ['red','pink'];
    
22.         aud.loop = false;
    
23. 
    
24.         mplayer.onmousemove = (e) => { mplayer.title = e.offsetY < h * 0.8 ? toMin(aud.duration * e.offsetX / w) : '暂停/播放'; };
    
25. 
    
26.         mplayer.onclick = (e) => {
    
27.                 if(e.offsetY < h * 0.8) {
    
28.                         let ac = aud.duration * e.offsetX / w;
    
29.                         idx = Math.round(ypData.length * ac / aud.duration);
    
30.                         aud.currentTime = ac;
    
31.                 } else {
    
32.                         aud.paused ? aud.play() : aud.pause();
    
33.                 }
    
34.         }
    
35. 
    
36.         aud.addEventListener('ended', () => { idx = 0; aud.play(); });
    
37. 
    
38.         aud.addEventListener('timeupdate', () => {
    
39.                 idx = Math.round(ypData.length * aud.currentTime / aud.duration)
    
40.                 if(idx > ypData.length - 1) idx = ypData.length - 1;
    
41.                 draw();
    
42.         });
    
43. 
    
44.         let draw = () => {
    
45.                 ctx.clearRect(0,0,w,h);
    
46.                 ctx.strokeStyle = colors[0];
    
47.                 ctx.fillStyle = colors[1];
    
48.                 ctx.font = '14px sans-serif';
    
49.                 ctx.shadowOffsetX = ctx.shadowOffsetY = 1;
    
50.                 ctx.shadowBlur = 2;
    
51.                 ctx.shadowColor = '#555';
    
52.                 ctx.textAlign = 'center';
    
53.                 ctx.beginPath();
    
54.                 for(j = 0; j <= idx; j ++) {
    
55.                         ctx.lineTo(slice*j, h - ypData[j] * h / vmax);
    
56.                 }
    
57.                 ctx.stroke();
    
58.                 ctx.beginPath();
    
59.                 ctx.strokeStyle = colors[1];
    
60.                 for(j = idx + 1; j < ypData.length; j ++) {
    
61.                         ctx.lineTo(slice*j, h - ypData[j] * h / vmax);
    
62.                 }
    
63.                 ctx.stroke();
    
64.                 ctx.fillText((aud.paused ? '播放 ' : '暂停 ') + toMin(aud.currentTime) + ' / ' + toMin(aud.duration), w/2, h*0.95);
    
65.                 bb.style.top = 'calc(50% - ' + ypData[idx] + 'px)';
    
66.         };
    
67.         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;};
    
68.         draw();
    
69. })();
    
70. </script>

复制代码

代码

小辣椒

这个应该算沙发~~~我的

小辣椒

先仔细欣赏一下

小辣椒

黑黑这个播放器按钮用了是那个可以增加音乐的实例效果？

小辣椒

我点击了几次音乐一样的

小辣椒

做了换个音乐是点击小红太阳？

小辣椒

凤凰塔上大月亮出来，小红太阳下山了

小辣椒

月满西楼非常经典的一首古风音乐。特别这古筝演奏，特别喜欢

小辣椒

黑黑辛苦，每天一个新作品，也是新教程，太厉害的

小辣椒

这个音乐停止，频谱停止，就是播放器滚动条了

小辣椒

没有歌词可以秒做，晚上完成作业

马黑黑

小辣椒 发表于 2022-12-16 10:46
没有歌词可以秒做，晚上完成作业

还是要做一下那个音频数据数组

马黑黑

小辣椒 发表于 2022-12-16 10:38
我点击了几次音乐一样的

同一支曲子两个地址

马黑黑

小辣椒 发表于 2022-12-16 10:44
这个音乐停止，频谱停止，就是播放器滚动条了

示波图的上部分（80%），调节播放进度；下部分（20%），播放/暂停控制

马黑黑

小辣椒 发表于 2022-12-16 10:31
这个应该算沙发~~~我的

马黑黑

小辣椒 发表于 2022-12-16 10:31
先仔细欣赏一下

示波图还是挺好看的，随着播放进度的推进，红色示波一点点覆盖粉色的，可以看一看

小辣椒

马黑黑 发表于 2022-12-16 11:42
还是要做一下那个音频数据数组

这个纯音音频也是要做数据的

马黑黑

小辣椒 发表于 2022-12-16 10:37
黑黑这个播放器按钮用了是那个可以增加音乐的实例效果？

与音乐的一个音频律动关联

小辣椒

马黑黑 发表于 2022-12-16 11:43
同一支曲子两个地址

必须要2个地址？