html5 频谱,HTML5 频谱分析仪

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

window.addEventListener('load', function() {

var m = document.querySelector('.wav> div').getBoundingClientRect().height;

var s = 500;

var t = 5;

// timing

var a = s / t;

var r = s;

(function responsor() {

mist('.wav> div> i').setAll({

height: function() {

return (Math.random() * 100).toFixed(2) + '%';

},

transition: a + 'ms cubic-bezier(0.95, 0.05, 0.795, 0.035)'

}).time(a).setAll({

background: function(e, i) {

// random color

return 'hsl(' + i + ', ' + ((e.getBoundingClientRect().height / m) * 100).toFixed(2) + '%, 66%)';

},

height: function(e) {

var h = e.getBoundingClientRect().height.toFixed(0);

var l = h / t;

// for pseudo

mist(e).any(':before').set({

bottom: h + 'px',

transition: 0

}).time(a).set({

bottom: l + 'px',

transition: r + 'ms steps(' + h + ')'

});

// low response

return l + 'px';

},

transition: r + 'ms'

});

setTimeout(responsor, s);

})();

});