东方神韵精选（一） 转自马黑黑的播客 附代码

admin

马黑黑博客：https://mahei.ccccocccc.cc/art/?st=0&id=1780892100

admin

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/dfuy.jpg') no-repeat center/cover; color: yellow; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { opacity: 1; mix-blend-mode: screen; mask: linear-gradient(180deg, transparent 80%, red); -webkit-mask: linear-gradient(180deg, transparent 60%, red); }
    #lrc { top: 4%; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 10%; transition: .75s; opacity: 1; }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/01/35/5b417f2f00d28.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
        <title>播放/暂停(Alt+X)</title>
        <defs>
                    <linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
                            <stop offset="0%" stop-color="yellow"></stop>
                            <stop offset="50%" stop-color="orange"></stop>
                            <stop offset="100" stop-color="teal"></stop>
                    </linearGradient>
            </defs>
            <g id="g1" class="rotate"></g>
    </svg>
</div>

<script>
    var options = {
        pa: '.pa',
        urls: [
            ['https://music.163.com/song/media/outer/url?id=5275046', '深山幽谷-中音笙/二胡'],
            ['https://music.163.com/song/media/outer/url?id=5275047', '小桥流水-古筝/琵琶'],
            ['https://music.163.com/song/media/outer/url?id=5275048', '静与动-洞箫/二胡'],
            ['https://music.163.com/song/media/outer/url?id=5275049', '天上人间-排萧'],
            ['https://music.163.com/song/media/outer/url?id=5275050', '春风又回头-二胡/中音笙'],
            ['https://music.163.com/song/media/outer/url?id=5275051', '云彩浮半空-女声/中音笙'],
            ['https://music.163.com/song/media/outer/url?id=5275052', '潺潺流水-古筝/竹笛'],
            ['https://music.163.com/song/media/outer/url?id=5275053', '牵引-二胡/扬琴'],
            ['https://music.163.com/song/media/outer/url?id=5275054', '听音-中音笙/琵琶'],
            ['https://music.163.com/song/media/outer/url?id=5275055', '秋水如梦-二胡/扬琴']
        ],
        btns: [msvg]
    };

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

    function tzRun() {
        var aud = new AudPlayer(options);
        var dr = _dr(msvg);
        dr.path('M-40 -190 A90 300, 0 0 0, 40 -190 L0 0Z', 'url(#grd)', 'lightgreen', 4).addTo(g1).rotates(8);
    }

    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>