東のエデンのジュイスをHTML5でできる限り再現してみた

More than 3 years have passed since last update.


デモページ

実際の出力はデモページで試すことができます。

http://garoo.jp/demo/eden/


やりたかったこと

ナビゲーションの音声を作りたくて、CCFFVIIの戦闘のナビゲーションの音声を作ってみた。

HTML5の音声合成でコンピューターが話している感じの音声を実現してみる

どうせなら日本語で実現したいので、東のエデンのジュイスにもチャレンジしてみた。


やったこと


HOYAのVoiceText Web API (β版)で音声データを作成

curl "https://api.voicetext.jp/v1/tts" \

-o "sound2.wav" \
-u "YOUR_API_KEY:" \
-d "text=受理されました ノブレスオブリージュ 今後とも救世主たらんことを" \
-d "pitch=80" \
-d "speed=125" \
-d "volume=200" \
-d "speaker=hikari"

waveファイルで出力されるので、iTunesでmp3に変換

参考サイト:VoiceText Web API (β版)


html5で実装


  • 音声ファイルとインパルス応答用のファイルを読み込む。

  • 音声ファイルにインパルス応答用のファイルを合成する。

  • 出力する。


sound.js

var files = [

"sounds/spreader50-65ms.wav",
"sounds/filter-telephone.wav",
"sounds/sound0.mp3",
"sounds/sound1.mp3",
"sounds/sound2.mp3",
];

if(typeof(webkitAudioContext)!=="undefined")
var audioctx = new webkitAudioContext();
else if(typeof(AudioContext)!=="undefined")
var audioctx = new AudioContext();

var source = null;

var buffers = [];
var loadidx = 0;
var req = new XMLHttpRequest();

function LoadBuffers() {
req.open("GET", files[loadidx], true);
req.responseType = "arraybuffer";
req.onload = function() {
if(req.response) {
audioctx.decodeAudioData(req.response,function(b){
buffers[loadidx]=b;
if(++loadidx < files.length)
LoadBuffers();
},function(){});
}
else
buffers[loadidx] = audioctx.createBuffer(VBArray(req.responseBody).toArray(), false);
};
req.send();
}
function Play(number) {
source = audioctx.createBufferSource();

var convolver = audioctx.createConvolver();
var revlevel = audioctx.createGain();
revlevel.gain.value = 3;
convolver.connect(revlevel);
revlevel.connect(audioctx.destination);

var convolver2 = audioctx.createConvolver();
var revlevel2 = audioctx.createGain();
revlevel2.gain.value = 10;
convolver2.connect(revlevel2);
revlevel2.connect(audioctx.destination);

source.buffer = buffers[number];
convolver.buffer = buffers[0];
convolver2.buffer = buffers[1];

var compressor = audioctx.createDynamicsCompressor();
var volume = audioctx.createGain();

source.connect(volume);
volume.gain.value = 0.2;
volume.connect(compressor);

compressor.connect(convolver);
compressor.connect(convolver2);
compressor.connect(audioctx.destination);

source.start(0);
}


参考サイト:Web Audio API を使用したゲーム用音声の開発


やれなかったこと

完成した音声ファイルの出力