音データをdata uriとしてjsファイル内に保持します。また、高速でタイプ音を漏れなくならせるように、8個のaudioオブジェクトを用意して、順番に呼び出しながら音を鳴らします。
ソースコード例です。
sound.js
const sound = {
audio:[],
index:0,
init:()=>{
for(let i=0;i<8;i++){
sound.audio.push(new Audio(sound.data_uri));
}
},
play:()=>{
sound.audio[sound.index%sound.audio.length].play();
sound.index += 1;
},
data_uri:"data:audio/mpeg;base64,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",
};
利用例です。
1ファイルでタイピングゲームを作るを作るをご参照ください。