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です!!
便利!ヽ(´▽`)ノワーイ