Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

绘制音乐的频谱图(使用Analyser节点)

  Analyser节点不仅提供了时域数据的获取接口,还提供了频域数据的获取接口。可以通过getByteFrequencyData方法来获取频域数据,同时域数据的获取一样,使用一个定长的缓冲区来存放获取的数据。这个长度可以在frequencyBinCount属性中找到。
  由于不同环境中实现的默认采样频率不同,在不同环境中获取到的数据也存在差异。采样范围大的在高音部分可能很少被用到,所以下面的代码中只读取频率在44100以内的数据,这可以根据默认采样频率来计算出容纳这些数据所需的缓冲区大小。
  演示:[实例]
<canvas id="canvas" width="400" height="100"></canvas><br/>
<input type="button" onclick="audio.play()" value="播放" />
<input type="button" onclick="audio.pause()" value="暂停" />
<script>
canvas.style.border="1px solid #CCC";
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//加载媒体
var audio=new Audio("SuperMario.mp3");
//创建节点
var source=context.createMediaElementSource(audio);
var analyser=context.createAnalyser();
//连接:source → analyser → destination
source.connect(analyser);
analyser.connect(context.destination);
//Canvas初始化
var width=canvas.width,height=canvas.height;
var g=canvas.getContext("2d");
g.translate(0.5,0.5);
//计算出采样频率44100所需的缓冲区长度
var length=analyser.frequencyBinCount*44100/context.sampleRate|0;
//创建数据
var output=new Uint8Array(length);
//播放帧
(function callee(e){
  analyser.getByteFrequencyData(output);
  //将缓冲区的数据绘制到Canvas上
  g.clearRect(-0.5,-0.5,width,height);
  g.beginPath(),g.moveTo(0,height);
  for(var i=0;i<width;i++)
    g.lineTo(i,height-height*output[Math.round(length*i/width)]/255);
  g.lineTo(i,height),g.fill();
  //请求下一帧
  requestAnimationFrame(callee);
})();
//播放
audio.play();
</script>
网名:
54.224.247.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^