初めに

https://github.com/gleitz/midi-js-soundfonts
詳しくはこちらを参照してください。

mp3ファイルの再生

先ず、mp3ファイルを鳴らしてみます。

function play() {
	let ac = new AudioContext();
	let src = ac.createBufferSource();
	src.connect(ac.destination);
	src.start();

	fetch("http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/acoustic_grand_piano-mp3/C4.mp3")
	.then(res => res.arrayBuffer())
	.then(compressed => {
		ac.decodeAudioData(compressed)
		.then(decoded => {
			src.buffer = decoded;
		});
	});
}

サンプル：
http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont1.html
http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont1b.html

Base64化mp3の再生

先ず、JavaScriptファイルを読み込みます。


<script src="http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/acoustic_grand_piano-mp3.js"></script>

内容はこんな感じです。


if (typeof(MIDI) === 'undefined') var MIDI = {};
if (typeof(MIDI.Soundfont) === 'undefined') MIDI.Soundfont = {};
MIDI.Soundfont.acoustic_grand_piano = {
"A0": "data:audio/mp3;base64,//uQRAAAAAAAAAAAAA

Data URI schemeのバイナリ化にFetch APIが使えます。


function play() {
	let ac = new AudioContext();
	let src = ac.createBufferSource();
	src.connect(ac.destination);
	src.start();

	fetch(MIDI.Soundfont.acoustic_grand_piano["C5"])
	.then(res => res.arrayBuffer())
	.then(compressed => {
		ac.decodeAudioData(compressed)
		.then(decoded => {
			src.buffer = decoded;
		});
	});
}

サンプル：http://www.maroon.dti.ne.jp/lance/js/soundfont/soundfont2.html

各種サンプル

打楽器の試聴
 MIDI風演奏
 サンバホイッスル演奏
 キーボード演奏