14
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?