みかづきブログ その3

3ヶ月つづけてみました。

はじめてのWebAudioAPI

このサイト を参考にWebAudioAPIに取り組み、不気味な音を醸し出すことに成功しました。

Getting Started with Web Audio API - HTML5 Rocks


DEMO

ループでmp3を再生し続けつつ、再生スピードをランダムで変更しています。


JavaScript

(function(win, doc) {
    
    "use strict";
    
    try {
        (function() {
            var audio, source, buffer, request;
            
            win.AudioContext = win.AudioContext || win.webkitAudioContext;
            audio = new AudioContext();
            
            request = new XMLHttpRequest();
            request.open("GET", "http://jsrun.it/assets/d/k/l/A/dklAy.mp3", true);
            request.responseType = "arraybuffer";
            
            request.onload = function () {
                source = audio.createBufferSource();
                
                // オーディオをデコード
                audio.decodeAudioData(request.response, function (evt) {
                    source.buffer = evt;
                    source.connect(audio.destination);
                    // 音源をループ
                    source.loop = true;
                    source.start();
                    
                    setInterval(function() {
                        // 再生速度を変更
                        source.playbackRate.value = Math.random();
                    }, 100);
                });
            };
            
            request.send();
            
        })();
    } catch(e) {
        console.log(e);
    }
    
})(this, document);