独創アプリ開発日記 104日目 音の再生3

Web Audio APIによるmp3の簡易再生ライブラリが完成しました!

複数の音の同時再生に対応しています!!

sound.js


if (typeof g_audioContext === 'undefined') {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    g_audioContext = new AudioContext();
    loadSound = function(url, keyName, fn) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        // Decode asynchronously
        request.onload = function() {
            g_audioContext.decodeAudioData(request.response, function(buffer) {
                fn(keyName, buffer);
            });
        }
        request.send();
    };
    getScriptParam = function(name) {
        var scripts = document.getElementsByTagName('script');
        var src = scripts[scripts.length - 1].src;
        var query = src.substring(src.indexOf('?') + 1 );
        var params = query.split('&');
        var result = new Object();
        for(var i = 0; i < params.length; i++) {
            var keyValue = params[i].split( '=' );
            if (name == keyValue[0]) {
                return keyValue[1];
            }
        }
    };
    g_sounds = {};
    playSound = function(name) {
        if (name in g_sounds) {
            g_sounds[name]();
        }
    }
}
var tmpName = getScriptParam('name');
loadSound('https://minnano.app/sound/' + tmpName, tmpName, function(keyName, buffer) {
    g_sounds[keyName] = () => {
        var source = g_audioContext.createBufferSource();
        source.buffer = buffer;
        source.connect(g_audioContext.destination);
        source.start(0);
    };
});

sound.jsファイル内の ‘https://minnano.app/sound/’ はmp3ファイルの置いてある場所です。環境に合わせて書き換えて下さい。

例えば kachi.mp3 と ok.mp3 の2つのファイルがあった場合、以下のように name に ファイル名を指定してJSファイルを読み込みます。


<script type="text/javascript" src="sound.js?name=kachi.mp3"></script>
<script type="text/javascript" src="sound.js?name=ok.mp3"></script>

その後、JavaScriptから任意の場所で playSound(‘kachi.mp3’) や playSound(‘ok.mp3’) と呼べば、それぞれの音が鳴ります!

3ファイル以上の場合も、同様の方法でscriptタグを追加すればOKです!!

便利!ヽ(´▽`)ノワーイ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です