電脳麻将UI 〜 牌 で 電脳麻将 では牌の表示を「雛形のコピー」で実装していることを説明しましたが、チー・ポンなどの鳴きの発声に使う音声データも同様の方法で処理しています。
具体的な雛形は下記としています*1。
<div id="loaddata">
......
<audio data-name="dapai" src="audio/dahai11.wav" volume="0.2" preload></audio>
<audio data-name="chi" src="audio/chii.wav" volume="0.3" preload></audio>
<audio data-name="peng" src="audio/pon.wav" volume="0.3" preload></audio>
<audio data-name="gang" src="audio/kan.wav" volume="0.3" preload></audio>
<audio data-name="zimo" src="audio/tsumo.wav" volume="0.3" preload></audio>
<audio data-name="rong" src="audio/ron.wav" volume="0.3" preload></audio>
<audio data-name="lizhi" src="audio/richi.wav" volume="0.2" preload></audio>
<audio data-name="gong" src="audio/nc43994.wav" volume="1.0" preload></audio>
<audio data-name="beep" src="audio/beep.wav" volume="0.2" preload></audio>
</div>これを @kobalab/majiang-ui の関数 Majiang.UI.audio で処理します。
/*
* Majiang.UI.audio
*/
"use strict";
const $ = require('jquery');
module.exports = function(loaddata) {
const audio = {};
$('audio', loaddata).each((i, n)=>{
let name = $(n).data('name');
audio[name] = $(n);
});
return function(name){
let new_audio = audio[name].clone()[0];
let volume = audio[name].attr('volume');
if (volume) {
new_audio.oncanplaythrough = ()=>{
new_audio.volume = + volume;
new_audio.oncanplaythrough = null;
};
}
return new_audio;
}
}loaddata で指定されたDOM領域の中から audio 要素を探し、その data-name 属性の値をキーに要素を保存します。 雛形にはダミーの属性 volume*2 があり、この値をヒントに実際に出力する音量を調整しています*3。 返り値 は先ほどキーとした音声名を引数として雛形からコピーした audio 要素を返す関数です。 jQueryオブジェクトではなく、生のDOMの audio 要素であることに注意してください。
以下で実際の動作を確認できます。