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

12104 ワード
HTML5 Say WebAudioAPI HTML5 テキストリンク

デモページ

実際の出力はデモページで試すことができます。
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 を使用したゲーム用音声の開発

やれなかったこと

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