音控频谱
本帖最后由 亚伦影音工作室 于 2025-2-13 19:39 编辑 <br /><br /><audio src="https://s2.ananas.chaoxing.com/sv-w8/audio/75/36/22/d2c783fc88063f4cd0e823b4d7514e99/audio.mp3" id="aud" autoplay crossOrigin="anonymous"></audio><div class="customaudioplayer">
<button class="playbtn" onclick="playAudio()">播放</button>
<button class="pausebtn" onclick="pauseAudio()">暂停</button>
<input type="range" id="volume" min="0" max="1" step="0.01"value="0.6" oninput="changeVolume(this.value)">
</div>
<canvas id="canvas" width="760" height="300"></canvas>
<script>
function playAudio() {
aud.play();
}
function pauseAudio() {
document.getElementById('aud').pause();
}
function changeVolume(value) {
const audio = document.getElementById('aud');
audio.volume = value;
}
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=1800;
//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>
<style>
.customaudioplayer {
width: 250px;
background: #000000;
border: 1px solid #ff0;
padding: 10px;
}
.customaudioplayer button {
margintop: 10px;
}
.customaudioplayer input {
margintop: 10px;
}
.playbtn, .pausebtn {
background: #000;
color: white;
fontsize: 18px;
padding: 5px 10px;
border: none;
cursor: pointer;
}
.playbtn {
background: green;
}
.pausebtn {
background: green;
}
#canvas{display: block; width:760px;height:300px; filter:hue-rotate(260deg)contrast(150%)brightness(280%);}
</style>
这个还是响应式频谱呢，真漂亮{:4_199:} 让音乐变可见，这个真好{:4_187:} 去试了一下，音量还能决定频谱的幅度呢，真神奇。 暂停就变直线了，要是暂停能停在频谱的瞬间就好了。
还有就是这个不能直接重放，还需要点一下才能重新播放呢{:4_204:} 收藏学习了！谢谢{:4_204:} 辛苦制作 ，收藏用了
页:
[1]