WebAudio APIを使って、ブラウザで音声も気軽にプログラミングできます。
「myvoice」
こっそり始められてしまうとセキュリティ的にリスクがあるため、タッチやクリックしてスタート。まずはシンプルにマイクから出力へとつないで、自分の声を聞いてみました。間にいろいろと入れるとボイスチェンジャーになります。
const init = async (stream, audioCtx) => {
// 入力（ソース）を出力（デスティネーション）に直結！
const source = audioCtx.createMediaStreamSource(stream);
source.connect(audioCtx.destination);
};
簡単ですね！
この簡単なコードを実現するヘルパーコードはこちら
// クリックしてスタートを実現するコード
const audioInit = (callback) => {
const div = document.createElement("div");
div.textContent = "CLICK ANYWHERE TO START";
document.body.appendChild(div);
const audioInitInner = async () => {
div.remove();
document.body.removeEventListener("click", audioInitInner);
if (!navigator.mediaDevices.getUserMedia) {
throw new Error("getUserMedia not supported on your browser!");
}
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const audioCtx = new AudioContext();
callback(stream, audioCtx);
};
document.body.addEventListener("click", audioInitInner);
};
audioInit(init);
このaudioInitをESモジュール化して、使い回せばシンプルに音声アプリをいろいろ量産できますね！
最初AirPodsで試していると気になったレイテンシー（遅れ）、100msec単位で遅れあり。
有線のイヤホンに変えてみるとほぼリアルタイムで自分の声が聞こえました。お手持ちのいろいろな機材でお試しください。
中学生の頃、MSXturboRの音声録音機能で遊んでいたことを思い出します。音を使ったこども向けアプリづくりも楽しそう。
2024-04-26 Fri Night
