LoginSignup
14
14

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-08-21

デモページ

実際の出力はデモページで試すことができます。
http://garoo.jp/demo/ffcc/

やりたかったこと

ナビゲーションの音声を作りたくて、どうせならクライシスコアファイナルファンタジーVIIの戦闘のナビゲーションのようなコンピューターっぽい音声にしてみたかったので調べてみたが、HTML5でできそうだったので試してみた。

やったこと

Macのsayコマンドで音声データを作成

Macのコンソールで下記コマンドを叩く。
say -o Modulating_Phase -v Samantha "Modulating Phase"
aiffファイルで出力されるので、iTunesでmp3に変換
参考サイト:Mac Text To Speechでしゃべらせた内容をAIFFで保存

html5で実装

  • 音声ファイルとインパルス応答用のファイルを読み込む。
  • 音声ファイルにインパルス応答用のファイルを合成する。
  • 出力する。
sound.js
var files = [
    "sounds/spreader50-65ms.wav",
    "sounds/Modulating_Phase.mp3",
    "sounds/Activating_Combat_Mode.mp3",
    "sounds/Conflict_Resolved.mp3",
];

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

var source = null;

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

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

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();

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

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

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

    source.start(0);
}

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

やれなかったこと

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

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14