js实现声音文件播放频谱频率高低可视化效果代码
代码语言:html
所属分类:其他
代码描述:js实现声音文件播放频谱频率高低可视化效果代码
代码标签: js 声音 文件 播放 频谱 频率 高低 可视化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> </style> </head> <body> <script type="text/javascript"> var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); // 新建分析仪 const analyser = audioCtx.createAnalyser(); // 根据 频率分辨率建立个 Uint8Array 数组备用 const frequencyData = new Uint8Array(analyser.frequencyBinCount); // 取音频文件成 arraybuffer const request = new XMLHttpRequest(); request.open('GET', '//repo.bfw.wiki/bfwrepo/sound/64520031ded7f.mp3', true); request.responseType = 'arraybuffer'; request.onload = ()=>{ const audioData = request.response; audioCtx.decodeAudioData(audioData, function(buffer) { // 新建 Buffer 源 const source = audioCtx.createBufferSource(); source.buffer = buffer; // 连接到 audioCtx source.connect(audioCtx.destination); // 连接到 音频分析器 source.connect(analyser); // 开始播放 source.start(0); }); }; request.send(); // 需要用到频谱的时候 从分析.........完整代码请登录后点击上方下载按钮下载查看
网友评论0