Javascriptを使ってブラウザ上で動作するボイスチェンジャーを作る

目次

  1. 1. はじめに
  2. 2. 動作サンプル
  3. 3. 開発リポジトリ
  4. 4. ライセンス
  5. 5. 備考

はじめに

最近、FaceRigとボイスチェンジャーを使って美少女になりきるという技術が現実的になってきて驚いています。

特にボイスチェンジャーの部分は、音声認識+テキスト読み上げ(TTS)で実現しているようです。

これだったらウェブブラウザ上で実装できるのでは?と思い今回は、アプリケーションに頼らずウェブブラウザ上で動く擬似的なボイスチェンジャーを実装してみました。

処理手順は以下の通りです。

  1. Web Speech API(SpeechRecognition)を使って声を文字列に変換
  2. VoiceText Web API(With Proxy)に変換した文字列を渡して、ArrayBuffer型の音声を取得
  3. Web Audio APIでArrayBufferをデコードして再生

このような処理手順で実装しました。

動作サンプル

Web Voice Changer - Heroku

上記のページのStartボタンを押すと音声認識が開始されます。

比較的新しい技術を利用しているので、恐らく最新版のChrome以外では動きません

開発リポジトリ

Web Voice Changer - Github

ライセンス

MIT License

備考

このコードをローカルで動作させる場合は、php/proxy.phpの変更が必要になります。

1
2
3
4
5
<?php

// for heroku.
$ALLOW_ORIGIN = getenv("ALLOW_ORIGIN");
$VOICE_TEXT_API_ACCESS_KEY = getenv("VOICE_TEXT_API_ACCESS_KEY");

getenv("ALLOW_ORIGIN")の部分を、自分の実行環境のドメインに合わせてください。よく分からない場合は*を指定してください。

getenv("VOICE_TEXT_API_ACCESS_KEY")の部分を、VoiceText Web APIのアクセスキーに変更してください。下記のページからAPIキーの取得が可能です。

API無料利用登録 - VoiceText Web API

1
2
3
4
<?php
/* 設定例 */
$ALLOW_ORIGIN = "*";
$VOICE_TEXT_API_ACCESS_KEY = "aaaaaaaaaaaaaa";

上の例のように変更すればOKです。