论坛 › 动画音画 › 生命线

马黑黑 发表于 2026-8-12 19:57

生命线

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/space.webp') no-repeat center/cover; color: orange; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; bottom: 50px; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
      <title>播放/暂停(Alt+X)</title>
      <path id="p1" d="M0 100 H400" fill="none" stroke="currentColor" stroke-width="8" stroke-dasharray="8" />
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=38019092', '生命线']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);

      aud.aud.ontimeupdate = () => {
            var tt = 20;
            var str = 'M0 100';
            Array.from({length: tt}).forEach((_,k) => {
                var x = k * (390 / tt);
                var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
                str += `L${x} ${y} `;
            });
            str = str.trim();
            path = `${str} L400 100`;
            p1.setAttribute('d', path);
      };
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-8-12 19:58

帖子代码
<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/space.webp') no-repeat center/cover; color: orange; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; bottom: 50px; width: 16vw; height: 8vw; cursor: pointer; opacity: 1; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/14/17/5e1c837dca409.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
      <title>播放/暂停(Alt+X)</title>
      <path id="p1" d="M0 100 H400" fill="none" stroke="currentColor" stroke-width="8" stroke-dasharray="8" />
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=38019092', '生命线']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', tzRun);

    function tzRun() {
      var aud = new AudPlayer(options);

      aud.aud.ontimeupdate = () => {
            var tt = 20;
            var str = 'M0 100';
            Array.from({length: tt}).forEach((_,k) => {
                var x = k * (390 / tt);
                var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
                str += `L${x} ${y} `;
            });
            str = str.trim();
            path = `${str} L400 100`;
            p1.setAttribute('d', path);
      };
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

马黑黑 发表于 2026-8-12 20:06

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

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

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

小文 发表于 2026-8-12 20:14

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

霜染枫丹 发表于 2026-8-12 20:18

马老师晚上好~~

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

红影 发表于 2026-8-12 20:25

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

梦风雨 发表于 2026-8-12 21:13

好有特色，精彩分享。

玫瑰 发表于 2026-8-12 21:24

马黑黑晚上好，好制作。

马黑黑 发表于 2026-8-13 08:05

玫瑰 发表于 2026-8-12 21:24
马黑黑晚上好，好制作。

晚上嚎

马黑黑 发表于 2026-8-13 08:05

梦风雨 发表于 2026-8-12 21:13
好有特色，精彩分享。

感谢支持，早上好

马黑黑 发表于 2026-8-13 08:05

红影 发表于 2026-8-12 20:25
好奇妙的心电图小播，和与乐曲名生命线如此奇妙地契合。
欣赏黑黑好帖

感谢支持

马黑黑 发表于 2026-8-13 08:05

霜染枫丹 发表于 2026-8-12 20:18
马老师晚上好~~

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

{:4_191:}

马黑黑 发表于 2026-8-13 08:06

小文 发表于 2026-8-12 20:14
好深远的思索，欣赏先生对生命的礼赞！

感谢

小辣椒 发表于 2026-8-13 12:57

音乐好特别，心电图的小播，确实和生命有关{:4_170:}

小辣椒 发表于 2026-8-13 12:58

欣赏黑黑好制作，感谢分享源码{:4_187:}

杨帆 发表于 2026-8-13 21:01

别致的小播，独特的画面，逼真的效果，谢谢马老师精彩示范{:4_190:}

马黑黑 发表于 2026-8-14 08:02

杨帆 发表于 2026-8-13 21:01
别致的小播，独特的画面，逼真的效果，谢谢马老师精彩示范

{:4_180:}

马黑黑 发表于 2026-8-14 08:03

小辣椒 发表于 2026-8-13 12:57
音乐好特别，心电图的小播，确实和生命有关

没关也得硬扯上关系{:4_170:}

马黑黑 发表于 2026-8-14 08:03

小辣椒 发表于 2026-8-13 12:58
欣赏黑黑好制作，感谢分享源码

{:4_176:}

小辣椒 发表于 2026-8-14 21:32

马黑黑 发表于 2026-8-14 08:03
没关也得硬扯上关系

刚看见梦江南的作业制作非常棒，小辣椒这个还没有完成的，今天做了银河轨道的作业

查看完整版本: 生命线