小辣椒 发表于 2024-3-25 20:30

《高原红(女生版DJ)》---再测试频谱

<style>
        #papa { margin: 130px 0 20px calc(50% - 681px); width: 1200px; height: 700px; background: url('https://xlaj.cn/bfq/20240320/01.gif ') no-repeat center/cover; box-shadow: 3px 3px 6px gray; overflow: hidden; position: relative; }
        #canv { position: absolute; width: 1200px; height: 180px; left: 0%; bottom: 4px; transform: translate(0%,0); cursor: pointer; }
        .pic { position: absolute; width: 240px; mix-blend-mode: screen; offset-path: path('M-224,150 Q1250,-20 1200,460'); offset-distance: 100%; animation: fly 20s var(--delay) infinite var(--state); --delay: 0s; }
        .pic:nth-of-type(2) { --delay: -7s; }
        .pic:nth-of-type(3) { --delay: -14s; }
        @keyframes fly { to { offset-distance: 0; } }

#dt1{ position: absolute; width:80px; height: 91px; top: 260px; left: 320px; }

</style>

<div id="papa">

<imgid="dt1"src="https://xlaj.cn/bfq/20240320/dss.gif" alt="" style="position: absolute; mix-blend-mode: multiply;rotate(360deg); " />

        <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
        <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
        <img class="pic" src="https://638183.freep.cn/638183/t22/gif/bird1.gif" alt="" />
    <canvas id="canv" width="600" height="240" title="点击播放"></canvas>
</div>

<script>
(function() {
        let aud = new Audio();
        aud.crossOrigin = '';
        aud.src = 'https://aod.cos.tx.xmcdn.com/storages/88cc-audiofreehighqps/01/41/GKwRIJIJMy3AACAAAAKAvwz5.m4a';
        aud.loop = true;
        aud.load();
        aud.play();
        let AudioContext = window.AudioContext || window.webkitAudioContext;
        let Ac = new AudioContext;
        let analyser = Ac.createAnalyser();
        analyser.fftSize = 256;
        let source = Ac.createMediaElementSource(aud);
        source.connect(analyser);
        analyser.connect(Ac.destination);
        let len = analyser.frequencyBinCount - 30;
        let output = new Uint8Array(len);
        let canvctx = canv.getContext('2d');
        let ppWidth = canv.width / len;
        let ppHeight, x1
        let gradient = canvctx.createLinearGradient(0,0,0,180);
        gradient.addColorStop(0,'rgba(240,255,240');
        gradient.addColorStop(.5,'rgba(0,255,0');
        gradient.addColorStop(1,'rgba(0,100,0');
        (function draw() {
                canvctx.clearRect(0, 0, canv.width, canv.height);
                analyser.getByteFrequencyData(output);
                x = 0.5;
                for(let i = 0; i < len; i ++) {
                        ppHeight = output[ i ] * .9 + ppWidth;
                        canvctx.fillStyle = gradient;
                        canvctx.fillRect(x, canv.height - ppHeight, ppWidth - 1, ppHeight);
                        x += ppWidth;
                }
                requestAnimationFrame(draw);
        })();
        aud.onpause = aud.onplaying = () => aud.paused ?
                (canv.title = '点击播放', papa.style.setProperty('--state', 'paused')) :
                (canv.title = '点击暂停', papa.style.setProperty('--state', 'running'));
        canv.onclick = () => aud.paused ? aud.play() : aud.pause();
        papa.onclick = () => aud.paused ? (vid.pause(),vid.pause()) : (vid.play(),vid.play());
})();
</script>

小辣椒 发表于 2024-3-25 20:32

这个换了不是自己上传空间的跨越音乐

liumang 发表于 2024-3-25 20:33

这个可以听到，频谱也是有，不过上次的频谱我也是看见的

小辣椒 发表于 2024-3-25 20:44

liumang 发表于 2024-3-25 20:33
这个可以听到，频谱也是有，不过上次的频谱我也是看见的

这个频谱是跨越音乐，上次的是加外套发帖的，其实这些很早就做过

無名 发表于 2024-3-25 21:14

这个就跟之前那个倒反，谷歌和edge秒开自动播放，火狐延迟不会自动播放，要手动点击。

小辣椒 发表于 2024-3-25 22:07

無名 发表于 2024-3-25 21:14
这个就跟之前那个倒反，谷歌和edge秒开自动播放，火狐延迟不会自动播放，要手动点击。 ...

主要是响应式频谱，就这样许多浏览器不能看见
页: [1]
查看完整版本: 《高原红(女生版DJ)》---再测试频谱