Web 技术研究所

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

绘制音乐的波形图

  AudioAPI有ScriptProcessor节点,提供了audioprocess事件可以用来读取音频的波形数据。有了这些波形数据就可以在Canvas上把它的波形图绘制出来了。另外还要注意同源策略问题,如果音频是跨域引用的就无法通过这个方式读取到数据。
  由于需要使用同源音频,所以下面实例代码没法做成live版,可以点[这里]测试。 <canvas id="canvas" width="400" height="100"></canvas>
<audio id="audio" autoplay src="SuperMario.mp3"></audio>
<br/>
<input type="button" onclick="audio.play()" value="播放" />
<input type="button" onclick="audio.pause()" value="暂停" />
<script>
var AudioContext=AudioContext||webkitAudioContext;
var context=new AudioContext;
//从元素创建媒体节点
var media=context.createMediaElementSource(audio);
//创建脚本处理节点
var processor=context.createScriptProcessor(4096,1,1);
//Canvas初始化
var width=canvas.width,height=canvas.height;
var g=canvas.getContext("2d");
g.translate(0.5,height/2+0.5);
//连接:媒体节点→控制节点→输出源
media.connect(processor);
processor.connect(context.destination);
//控制节点的过程处理
processor.onaudioprocess=function(e){
  //获取输入和输出的数据缓冲区
  var input=e.inputBuffer.getChannelData(0);
  var output=e.outputBuffer.getChannelData(0);
  //将输入数缓冲复制到输出缓冲上
  for(var i=0;i<input.length;i++)output[i]=input[i];
  //将缓冲区的数据绘制到Canvas上
  g.clearRect(-0.5,-height/2-0.5,width,height);
  g.beginPath();
  for(var i=0;i<width;i++)
    g.lineTo(i,height/2*output[output.length*i/width|0]);
  g.stroke();
};
</script>
网名:
54.196.182.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^