生命线

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/space.webp') no-repeat center/cover; color: orange; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     #msvg { position: absolute; bottom: 50px; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
   
7. </style>
   
8. 
   
9. <div id="pa" class="pa">
   
10.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
    
11.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
    
12.         <title>播放/暂停(Alt+X)</title>
    
13.         <path id="p1" d="M0 100 H400" fill="none" stroke="currentColor" stroke-width="8" stroke-dasharray="8" />
    
14.     </svg>
    
15. </div>
    
16. 
    
17. <script>
    
18.     var options = {
    
19.         pa: '.pa',
    
20.         urls: [['https://music.163.com/song/media/outer/url?id=38019092', '生命线']],
    
21.         btns: [msvg],
    
22.     };
    
23. 
    
24.     loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);
    
25. 
    
26.     function tzRun() {
    
27.         var aud = new AudPlayer(options);
    
28. 
    
29.         aud.aud.ontimeupdate = () => {
    
30.             var tt = 20;
    
31.             var str = 'M0 100';
    
32.             Array.from({length: tt}).forEach((_,k) => {
    
33.                 var x = k * (390 / tt);
    
34.                 var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
    
35.                 str += `L${x} ${y} `;
    
36.             });
    
37.             str = str.trim();
    
38.             path = `${str} L400 100`;
    
39.             p1.setAttribute('d', path);
    
40.         };
    
41.     }
    
42. 
    
43.     function loadJs(url, callback) {
    
44.         var script = document.createElement('script');
    
45.         script.charset = 'utf-8';
    
46.         script.src = url;
    
47.         script.onload = function() {
    
48.             if (callback) callback();
    
49.         };
    
50.         document.head.appendChild(script);
    
51.     }
    
52. </script>

复制代码

马黑黑

帖子中的辅助小播，使用svg path 标签简单模拟心电图，也可以视作波峰示意图。实现原理：

借助 audio 控件的 ontimeupdate 事件，每一次播放时间的变更都动态改变 path 标签的 d 属性值。path 路径由 L 指令拼凑路线，点坐标序号被 2 整除时 y 坐标在 viewBox 的中央以确保水平线总方向，不被 2 整除的则模拟波峰。

这只是简单模拟，如果确实需要逼真的心电图形态，算法会更复杂。

小文

好深远的思索，欣赏先生对生命的礼赞！

霜染枫丹

马老师晚上好~~

这个作品展开很宏大！滴滴声音乐起到了点睛的作用，带起了律动，很喜欢！一会儿就套用一个，谢谢您的分享！

红影

好奇妙的心电图小播，和与乐曲名生命线如此奇妙地契合。
欣赏黑黑好帖

梦风雨

好有特色，精彩分享。

玫瑰

马黑黑晚上好，好制作。