小辣椒 发表于 2025-2-15 22:12

该死的温柔. 套一个亚纶的频谱代码


<style type="text/css">
#papa{ margin: 130px 0 20px calc(50% - 721px);width:1280px;position: relative; height:720px; border-radius:0px; border:0px solid #333;overflow: hidden; align-items: center; background:linear-gradient(0deg, #000 2%,#0004%,rgba(2, 2, 2, 0) 10%,rgba(52, 152, 219, 0) 100%,rgba(2, 2, 2, 0) 100%,black 100%),url('https://i.mp3.wf/223239831.jpg ') no-repeat center/cover;position: relative;}
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 1;
background:url(https://pic1.imgdb.cn/item/67b04254d0e0a243d4ff927c.png)no-repeat center/100% 100%; border-radius: 0px;
bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;bottom: 0;background:url(https://pic1.imgdb.cn/item/67aefd3fd0e0a243d4ff2222.png)no-repeat center/100% 100%;}
#bnt{left: 0px;bottom: 6px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;height: 50px;border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom:16px; cursor: pointer;right:1%;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }


#sjd {left: 4%;z-index: 8;width: 70%; height: 25px; transform:scale(1);bottom: 12px;
             position: absolute;overflow: hidden; align-items: center;border-radius: 10px;}
#percentage{margin: 6px 35px;
            position: relative;
         width: 85%; height: 5px;border-radius: 20px;
filter:invert(20%)hue-rotate(290deg);
             }
#duration{margin: 0px 0px;color: #eee;font: 400 14px sans-serif;position: absolute;
             }
#currentTime{margin: 0px -20px;color: #eee;font: 400 14px sans-serif;position: absolute;
            }
#yink {left: 70%;bottom: 4px;width: 40%;height: 50px;z-index: 8; transform:scale(1);
             position: absolute;overflow: hidden; align-items: center; background:#0000; border-radius: 10px;}

#volumeSlider{margin: 22px 42px;
             position: absolute;z-index: 40;
         width: 55%; height: 5px;border-radius: 20px;
filter:invert(20%)hue-rotate(290deg);
}

#swithimg{margin: 8px 10px;filter:invert(90%)hue-rotate(0deg);z-index: 41;
             position: absolute;}
#canvas {left: 0%;bottom: 4px;width: 100%;height: 250px;z-index: 1; filter:invert(90%)drop-shadow(#00ff00 0px 2px 25px)drop-shadow(#00ff00 0px 2px 25px);
             position: absolute;align-items: center; }
</style>
<div id="papa">
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="sjd">
    <span id="duration"></span> <input type="range" min="0" max6="100" step="0.01" value="0" onchange="seek(this.value)"id="percentage"><span id="currentTime"></span>
</div>
<div id="yink">
<img src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png" height="30" width="30" id="swithimg">
<inputtype="range" min="0" max="1" step="0.1" value="0.6" id="volumeSlider">
</div>
<canvas id="canvas" width="1186" height="250"></canvas>

<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>

<audio src="https://s2.ananas.chaoxing.com/sv-w9/audio/6e/d9/9b/0325acf51f3b27417aff05cffa5cef65/audio.mp3" id="aud" loop autoplay crossOrigin="anonymous"></audio>

<script>
var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
var aud= document.getElementById("aud");
   function muteAudio() {
            aud.muted= true;
      }
   function unmuteAudio() {
            aud.muted= false;
      }
   window.onload = function(){
      var swithimg = document.getElementById("swithimg");
      var mm = true;
      swithimg.onclick= function(){
            if (mm == true) { muteAudio();volumeSlider.value=0;
                swithimg.src="https://pic1.imgdb.cn/item/67a8b6afd0e0a243d4fd95f3.png";
                return mm=false;
            }else{unmuteAudio(); volumeSlider.value=0.6;
                swithimg.src="https://pic1.imgdb.cn/item/67a8b6a2d0e0a243d4fd95f1.png";
                return mm=true;
            }   
      };      
    };
class AudioPlayer {
      constructor(audioElement) {
      this.audio = audioElement;
      }
   getTime() {
      const currentTime = this.audio.currentTime; // 当前时长
      const duration = this.audio.duration; // 总时长
      const percentage = duration ? (currentTime / duration) * 100 : 0;
      return {
          currentTime: currentTime,
          duration: duration,
          percentage: percentage
      };
      }
    }
let audio = document.getElementById('aud');
    let player = new AudioPlayer(audio);
// 回显播放时间
    function updateTime() {
      const time = player.getTime();
      document.getElementById('currentTime').innerHTML = formatTime(time.currentTime);
      document.getElementById('duration').innerHTML = formatTime(time.duration);
      document.querySelector('input').value = time.percentage;
    }
// 格式化播放时间
    function formatTime(time) {
      const minutes = Math.floor(time / 60);
      const seconds = Math.floor(time % 60);
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
// 步进器控制播放进度
    function seek(percentage) {
      const duration = player.getTime().duration;
      player.audio.currentTime = duration * (percentage / 100);
    }
   setInterval(updateTime, 1000);
// 按钮全控
bnt.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '1') : (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '1',ppm.style.opacity = '0');
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
//全屏
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//创建节点

var media=context.createMediaElementSource(aud);
var filter=context.createBiquadFilter();
var analyser=context.createAnalyser();
//只允许小于800的频率通过
filter.type=filter.LOWPASS;
filter.frequency.value=2800;
//Canvas初始化
var width=canvas.width,height=canvas.height;
var g=canvas.getContext("2d");
g.translate(0.5,height/2+0.5);
//连接：media → filter → analyser → destination
media.connect(filter);
filter.connect(analyser);
analyser.connect(context.destination);
//以fftSize为长度创建一个字节数组作为数据缓冲区
var output=new Uint8Array(analyser.fftSize);
//播放帧
(function callee(e){
analyser.getByteTimeDomainData(output);
//将缓冲区的数据绘制到Canvas上
g.clearRect(-0.5,-height/2-0.5,width,height);
g.beginPath();
for(var i=0;i<width;i++)
    g.lineTo(i,height*(output/256-0.5));
g.stroke();
//请求下一帧
requestAnimationFrame(callee);
})();

</script>

liumang 发表于 2025-2-15 22:28

漂亮的频谱，感谢小辣椒分享

liumang 发表于 2025-2-16 12:46

{:5_128:}{:5_128:}{:5_128:}

liumang 发表于 2025-2-16 12:46

{:5_150:}{:5_150:}{:5_150:}
页: [1]
查看完整版本: 该死的温柔. 套一个亚纶的频谱代码