html5音频文件生成波形图代码,HTML5/D3.js 可视音频波形柱状图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var playBtn = document.getElementById('playBtn');

var myAudio = new Muvis("/uploads/160601/Find_My_Way_Home.mp3", {

dataMax: 50,

onLoad: function() {

playBtn.onclick = function(e) {

if (!myAudio.isPlaying) {

myAudio.play();

this.className = 'stop';

} else {

myAudio.stop();

this.className = '';

}

}

},

onData: function(data) {

var maxHeight = (Math.max.apply(null, data) / 255) * 90;

d3.select('#bars')

.style('height', maxHeight + '%')

.selectAll('div')

.data(data)

.style('height', function(h) {

return ((h / 255) * 100) + '%';

})

.enter().append('div')

},

onEnded: function() {

playBtn.className = '';

}

});

})();