探索 生命线的思考（播放器）

admin

admin

马老师的代码


<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; }
    #p1 { fill: none; stroke: currentColor; stroke-width: 8; stroke-dasharray: 8; stroke-dashoffset: 100%; animation: move linear 20s infinite; }
    @keyframes move { to { stroke-dashoffset: 0%; } }
</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" />
    </svg>
</div>

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

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

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

        aud.aud.ontimeupdate = () => {
            var tt = 15;
            var str = '';
            Array.from({length: tt}).forEach((_,k) => {
                var x = (k + 1) * (360 / tt);
                var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
                str += k === 0 ? `M0 100 H${x}` : ` L${x} ${y}`;
            });
            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>