2
我剛開始查看Web Audio API,並試圖對音頻進行視覺同步。當音頻中的音量(節拍?)增加時,我想在屏幕上閃爍白色。我到目前爲止所做的:使用Web Audio API的音頻反應式視覺
var mp3 = "08 - No More Sorrow.mp3";
var context = new AudioContext();
var request = new XMLHttpRequest();
request.open('GET', mp3, true);
request.responseType = "arraybuffer";
request.onload = function() {
context.decodeAudioData(request.response, function (buffer) {
var sourceBuffer = context.createBufferSource();
sourceBuffer.buffer = buffer;
sourceBuffer.connect(context.destination);
sourceBuffer.start(context.currentTime);
});
};
request.send();
......這只是使用Web Audio API播放音頻。不知道下一步該怎麼做。我已經選擇了Beat Detection Using JavaScript and the Web Audio API和Making Audio Reactive Visuals頁面,但是無法真正理解任何內容。
如果我告訴你什麼是我想要做的,而不使用網絡音頻API,它會是這樣的:
Array.prototype.pushIfExists = function(item) {
if (item) {
this.push(item);
}
}
function random(min, max) {
var min = min || 0;
var max = max || 100;
var num = Math.floor(Math.random() * max);
while (num < min) {
num = Math.floor(Math.random() * max);
}
return num;
}
function avarage(array) {
var sum = 0;
var avarage = 0;
for (var i = 0; i < array.length; i++) {
sum += array[i];
}
avarage = sum/array.length;
return avarage;
}
var beats = [];
var delay = 500;
var delayIncrement = 200;
var threshold = 50;
var thresholdLimit = 100;
var beatAvarageRange = 5;
var flashDuration = 100;
for (var i = 0; i < 100; i++) {
beats.push(random(0, thresholdLimit));
}
for (var i = 0; i < beats.length; i++) {
(function(i) {
setTimeout(function() {
var recentBeats = [];
for (var j = 1; j < beatAvarageRange + 1; j++) {
recentBeats.pushIfExists(beats[i - j]);
}
threshold = avarage(recentBeats);
if (beats[i] > threshold) {
document.body.style.backgroundColor = "white";
setTimeout(function() {
document.body.style.backgroundColor = "black";
}, flashDuration);
}
}, delay);
delay += delayIncrement;
})(i);
}
body {
background-color: black;
}
我喜歡在SO這裏看到關於Web Audio API的好問題,並且只是在給你一些(小)幫助以獲得答案的精神下進行一些副本編輯。 (和upvoted。) – sideshowbarker
@sideshowbarker看來這是我解決自己的問題之一。很高興看到沒有人回答。 – akinuri