html 实现音乐的波形,HTML5之Audio（七）—— processor绘制波形图

Audio

VOL:

LR

var AudioContext = AudioContext || webkitAudioContext || mozAudioContext || msAudioContext, // 兼容性

context = new AudioContext, // 创建Audio上下文

audio = new Audio( '茜拉 - 想你的夜.mp3' ),

media = context.createMediaElementSource( audio ), // 从元素创建媒体节点

lGain = context.createGain(), // 左声道

rGain = context.createGain(), // 右声道

splitter = context.createChannelSplitter(2), // 分离器

merger = context.createChannelMerger(2), // 合成器

processor = context.createScriptProcessor( 4096, 1, 1 ),

width = canvas.width, height = canvas.height,

g = canvas.getContext("2d"), // canvas

vol = 100, // 音量

lVol = 100, // 左声道

rVol = 100 // 右声道

;

/*

→ lGain

media → splitter → merger → destination

→ rGain

*/

<