window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;

var audioContext=new window.AudioContext();

try {var audioContext = new window.AudioContext();
} catch (e) {Console.log('!Your browser does not support AudioContext');
}

var Visualizer = function() {this.file = null, //要处理的文件，后面会讲解如何获取文件this.fileName = null, //要处理的文件的名，文件名this.audioContext = null, //进行音频处理的上下文，稍后会进行初始化this.source = null, //保存音频
};
Visualizer.prototype = {_prepareAPI: function() {//统一前缀，方便调用window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;//这里顺便也将requestAnimationFrame也打个补丁，后面用来写动画要用window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;//安全地实例化一个AudioContext并赋值到Visualizer的audioContext属性上，方便后面处理音频使用try {this.audioContext = new AudioContext();} catch (e) {console.log('!妳的浏览器不支持AudioContext:(');console.log(e);}},
}

loadSound("sample.mp3"); //调用
// 定义加载音频文件的函数
function loadSound(url) {var request = new XMLHttpRequest(); //建立一个请求request.open('GET', url, true); //配置好请求类型，文件路径等request.responseType = 'arraybuffer'; //配置数据返回类型// 一旦获取完成，对音频进行进一步操作，比如解码request.onload = function() {var arraybuffer = request.response;}request.send();
}

<label for="uploadedFile">Drag&drop or select a file to play:</label>
<input type="file" id="uploadedFile"></input>

<div id="wrapper"><div id="fileWrapper" class="file_wrapper"><div id="info">HTML5 Audio API showcase | An Audio Viusalizer</div><label for="uploadedFile">Drag&drop or select a file to play:</label><input type="file" id="uploadedFile"></input></div><div id="visualizer_wrapper"><canvas id='canvas' width="800" height="350"></canvas></div>
</div>

#fileWrapper {transition: all 0.5s ease;
}
#fileWrapper: hover {opacity: 1!important;
}
#visualizer_wrapper {text-align: center;
}

_addEventListner: function() {var that = this,audioInput = document.getElementById('uploadedFile'),dropContainer = document.getElementsByTagName("canvas")[0];//监听是否有文件被选中audioInput.onchange = function() {//这里判断一下文件长度可以确定用户是否真的选择了文件，如果点了取消则文件长度为0if (audioInput.files.length !== 0) {that.file = audioInput.files[0]; //将文件赋值到Visualizer对象的属性上that.fileName = that.file.name;that._start(); //获取到文件后，开始程序，这个方法会在后面定义并实现
        };};
}

dropContainer.addEventListener("dragenter", function() {that._updateInfo('Drop it on the page', true);
}, false);
dropContainer.addEventListener("dragover", function(e) {e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect = 'copy'; //设置文件放置类型为拷贝
}, false);
dropContainer.addEventListener("dragleave", function() {that._updateInfo(that.info, false);
}, false);
dropContainer.addEventListener("drop", function(e) {e.stopPropagation();e.preventDefault();that.file = e.dataTransfer.files[0]; //获取文件并赋值到Visualizer对象that.fileName = that.file.name;that._start();
}, false);

_start: function() {//read and decode the file into audio array buffervar that = this, //当前this指代Visualizer对象，赋值给that以以便在其他地方使用file = this.file, //从Visualizer对象上获取前面得到的文件fr = new FileReader(); //实例化一个FileReader用于读取文件fr.onload = function(e) { //文件读取完后调用此函数var fileResult = e.target.result; //这是读取成功得到的结果ArrayBuffer数据var audioContext = that.audioContext; //从Visualizer得到最开始实例化的AudioContext用来做解码ArrayBufferaudioContext.decodeAudioData(fileResult, function(buffer) { //解码成功则调用此函数，参数buffer为解码后得到的结果that._visualize(audioContext, buffer); //调用_visualize进行下一步处理，此方法在后面定义并实现}, function(e) { //这个是解码失败会调用的函数console.log("!哎玛，文件解码失败:(");});};//将上一步获取的文件传递给FileReader从而将其读取为ArrayBuffer格式
    fr.readAsArrayBuffer(file);
}

var audioBufferSouceNode = audioContext.createBufferSource();
audioBufferSouceNode.buffer = buffer;

audioBufferSouceNode.start(0);

audioBufferSouceNode.connect(audioContext.destination);
audioBufferSouceNode.start(0);

_visualize: function(audioContext, buffer) {var audioBufferSouceNode = audioContext.createBufferSource();audioBufferSouceNode.connect(audioContext.destination);audioBufferSouceNode.buffer = buffer;audioBufferSouceNode.start(0);
}

var analyser = audioContext.createAnalyser();

audioBufferSouceNode.connect(analyser);
analyser.connect(audioContext.destination);

_visualize: function(audioContext, buffer) {var audioBufferSouceNode = audioContext.createBufferSource(),analyser = audioContext.createAnalyser();//将source与分析器连接
    audioBufferSouceNode.connect(analyser);//将分析器与destination连接，这样才能形成到达扬声器的通路
    analyser.connect(audioContext.destination);//将上一步解码得到的buffer数据赋值给sourceaudioBufferSouceNode.buffer = buffer;//播放audioBufferSouceNode.start(0);//音乐响起后，把analyser传递到另一个方法开始绘制频谱图了，因为绘图需要的信息要从analyser里面获取this._drawSpectrum(analyser);
}

var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);

var canvas = document.getElementById('canvas'),meterWidth = 10, //能量条的宽度gap = 2, //能量条间的间距meterNum = 800 / (10 + 2); //计算当前画布上能画多少条
var step = Math.round(array.length / meterNum); //计算从analyser中的采样步长

var canvas = document.getElementById('canvas'),cwidth = canvas.width,cheight = canvas.height - 2,meterWidth = 10, //能量条的宽度gap = 2, //能量条间的间距meterNum = 800 / (10 + 2), //计算当前画布上能画多少条ctx = canvas.getContext('2d'),array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var step = Math.round(array.length / meterNum);计算从
analyser中的采样步长
ctx.clearRect(0, 0, cwidth, cheight); //清理画布准备画画
//定义一个渐变样式用于画图
gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
ctx.fillStyle = gradient;
//对信源数组进行抽样遍历，画出每个频谱条
for (var i = 0; i < meterNum; i++) {var value = array[i * step];ctx.fillRect(i * 12 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);
}

var canvas = document.getElementById('canvas'),cwidth = canvas.width,cheight = canvas.height - 2,meterWidth = 10, //能量条的宽度gap = 2, //能量条间的间距meterNum = 800 / (10 + 2), //计算当前画布上能画多少条ctx = canvas.getContext('2d');
//定义一个渐变样式用于画图
gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
ctx.fillStyle = gradient;
var drawMeter = function() {var array = new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(array);var step = Math.round(array.length / meterNum); //计算采样步长ctx.clearRect(0, 0, cwidth, cheight); //清理画布准备画画for (var i = 0; i < meterNum; i++) {var value = array[i * step];ctx.fillRect(i * 12 /*频谱条的宽度+条间间距*/ , cheight - value + capHeight, meterWidth, cheight);}requestAnimationFrame(drawMeter);
}
requestAnimationFrame(drawMeter);

_drawSpectrum: function(analyser) {var canvas = document.getElementById('canvas'),cwidth = canvas.width,cheight = canvas.height - 2,meterWidth = 10, //频谱条宽度gap = 2, //频谱条间距capHeight = 2,capStyle = '#fff',meterNum = 800 / (10 + 2), //频谱条数量capYPositionArray = []; //将上一画面各帽头的位置保存到这个数组ctx = canvas.getContext('2d'),gradient = ctx.createLinearGradient(0, 0, 0, 300);gradient.addColorStop(1, '#0f0');gradient.addColorStop(0.5, '#ff0');gradient.addColorStop(0, '#f00');var drawMeter = function() {var array = new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(array);var step = Math.round(array.length / meterNum); //计算采样步长ctx.clearRect(0, 0, cwidth, cheight);for (var i = 0; i < meterNum; i++) {var value = array[i * step]; //获取当前能量值if (capYPositionArray.length < Math.round(meterNum)) {capYPositionArray.push(value); //初始化保存帽头位置的数组，将第一个画面的数据压入其中
            };ctx.fillStyle = capStyle;//开始绘制帽头if (value < capYPositionArray[i]) { //如果当前值小于之前值ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight); //则使用前一次保存的值来绘制帽头} else {ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight); //否则使用当前值直接绘制capYPositionArray[i] = value;};//开始绘制频谱条ctx.fillStyle = gradient;ctx.fillRect(i * 12, cheight - value + capHeight, meterWidth, cheight);}requestAnimationFrame(drawMeter);}requestAnimationFrame(drawMeter);
}