山里人 发表于 2024-6-1 11:19

你来与不来我都在等你

<style>
        #papa { margin: 5px 0 20px calc(50% - 681px); width: 1200px; height: 640px; background:url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/1.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; }
        .vid { position: absolute;width: 40%;height: 100%;right:-50px;object-fit: cover; pointer-events: none; z-index: 2;}
        .vid:nth-of-type(2) { height: 100%; height: calc(100% + 70px);left: -50;top: -70px; mix-blend-mode: screen; opacity: .39; z-index: 3;}
        .star { position: absolute; left: 30px; bottom: 40px; cursor: pointer; animation: ani 1.5s linear infinite alternate var(--state); z-index: 6;mix-blend-mode: screen;opacity: .6;}
        .star:nth-of-type(2) { left: 180px; bottom: 160px; animation-delay: -.5s; mix-blend-mode: screen;opacity: .3;}
        .star:nth-of-type(3) { left: 600px; bottom: 10px; animation-delay: -1s; mix-blend-mode: screen;opacity: .1;}
        @keyframes ani { from { transform: rotate(-10deg) scale(.8); opacity: .2; } to { transform: rotate(10deg) scale(1.5);} }
</style>

<div id="papa">
        <audio id="aud" src="https://shanlr.s3-us-east-1.ossfiles.com/yu/%E5%B0%8F%E9%A9%AC%E6%AD%8C-%E4%BD%A0%E6%9D%A5%E4%B8%8E%E4%B8%8D%E6%9D%A5%E6%88%91%E9%83%BD%E5%9C%A8%E7%AD%89%E4%BD%A0%E3%80%90%E5%B0%8F%E9%A9%AC%E6%AD%8C%E3%80%91.mp3" loop="loop" autoplay="autoplay"crossOrigin="anonymous"></audio>
<canvas id='canvas' width="1200" height="240"style="position: absolute; left:100px; top: 410px;"></canvas>
        <video class="vid" src="" loop muted></video>
        <video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/18/05/5ed870ed14fc5.mp4" loop muted></video>
        <img class="star" alt="" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/star.webp" />
        <img class="star" alt="" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/star.webp" />
        <img class="star" alt="" src="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/star.webp" />
</div>

<script>


/* * */
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

window.onload = function() {
    var audio = document.getElementById('audio');
    var ctx = new AudioContext();
    var analyser = ctx.createAnalyser();
    var audioSrc = ctx.createMediaElementSource(aud);

    audioSrc.connect(analyser);
    analyser.connect(ctx.destination);
   
    var frequencyData = new Uint8Array(analyser.frequencyBinCount);

    var canvas = document.getElementById('canvas'),
      cwidth = canvas.width,
      cheight = canvas.height - 2.2,
      meterWidth = 10, //width of the meters in the spectrum
      gap = 2.2, //gap between meters
      capHeight = 2.2,
      capStyle = '#fff',
      meterNum = 1200 / (10 + 2.2), //count of the meters
      capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
    ctx = canvas.getContext('2d'),
    gradient = ctx.createLinearGradient(0, 22, 0, 300);
    gradient.addColorStop(1, '#0f0');
    gradient.addColorStop(0.4, '#ff0');
    gradient.addColorStop(0, '#f00');

// loop
    function renderFrame() {
      var array = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(array);
      var step = Math.round(array.length / meterNum); //sample limited data from the total array
      ctx.clearRect(0, 0, cwidth, cheight);
      for (var i = 0; i < meterNum; i++) {
            var value = array;
            if (capYPositionArray.length < Math.round(meterNum)) {
                capYPositionArray.push(value);
            };
            ctx.fillStyle = capStyle;
            //draw the cap, with transition effect
            if (value < capYPositionArray) {
                ctx.fillRect(i * 12, cheight - (--capYPositionArray), meterWidth, capHeight);
            } else {
                ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
                capYPositionArray = value;
            };
            ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
            ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
      }
      requestAnimationFrame(renderFrame);
    }
    renderFrame();
    audio.play();
};



(function() {
        const vids = document.querySelectorAll('.vid'), stars = document.querySelectorAll('.star');
        aud.onplaying = aud.onpause = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                vids.forEach( vid => aud.paused ? vid.pause() : vid.play());
                stars.forEach(star => star.title = aud.paused ? '点击播放' : '点击暂停');
        };
        stars.forEach(star => star.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/html/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);

sFile.onload = () => {
        LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '.star',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
        });
};
let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
        ];
</script>

梦油 发表于 2024-6-1 11:24

欣赏佳作，问候山里人。

起个网名好难 发表于 2024-6-1 12:43

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

红影 发表于 2024-6-1 15:05

这个三星效果用得漂亮。欣赏山里人好帖{:4_199:}

红影 发表于 2024-6-1 15:05

这个评分后要刷新才能再看到频谱呢{:4_204:}
页: [1]
查看完整版本: 你来与不来我都在等你