WebAudioAPIとGrimoire.jsを組み合わせて遊ぶ
今回はWeb Audio APIとGrimoire.jsを組み合わせて遊んでみました。最近はGrimoire.jsと他のWebの技術を組み合わせて面白い表現ができないか考えています。
WebAudioAPIでmp3音源の波形を取得してみました。gifだと、音がないのでいささか地味ですが、このような表現もGrimoire.jsなら簡単に作成できます。
以下はほとんどWebAudioAPIを使用するためのコードですが、下部にGrimoire.jsのAPIに取得した音源の波形の値を入れています。
WebAudioAPIに関する基本的なことは下記の記事等を参考にさせていただきました。
http://qiita.com/soarflat/items/b60649195c16c7a43868
gr(function() {
var d = new Date();
var source, animationId;
var audioContext = new AudioContext;
var fileReader = new FileReader;
var analyser = audioContext.createAnalyser();
analyser.fftSize = 128;
analyser.connect(audioContext.destination);
fileReader.onload = function() {
audioContext.decodeAudioData(fileReader.result, function(buffer) {
if (source) {
source.stop();
cancelAnimationFrame(animationId);
}
source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(analyser);
source.start(0);
animationId = requestAnimationFrame(render);
});
};
document.getElementById('file').addEventListener('change', function(e) {
fileReader.readAsArrayBuffer(e.target.files[0]);
});
const $$ = gr("#main");
render = function() {
var spectrums = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(spectrums);
for (var i = 1; i <= spectrums.length; i++) {
$$("#mesh-" + i}).setAttribute("position", `${i/5},${spectrums[i-1]/100},0`);
}
animationId = requestAnimationFrame(render);
};
});
WebGLの表現と他の技術を組み合わせてみると、表現の幅が広がることだと思います。この他にも面白い表現を探して共有できればいいですね。
Author And Source
この問題について(WebAudioAPIとGrimoire.jsを組み合わせて遊ぶ), 我々は、より多くの情報をここで見つけました https://qiita.com/case2912/items/b9b1e00bf6a6e7c77d15著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .