【ChatGPT】WordPress 記事上でマイク入力を取るアプリを書かせてみる

2023年6月29日2023年6月30日

どうもです、タドスケです。

前回の記事で ChatGPT を使ってWordPress上で色々なアプリを簡単に作れそうなことがわかりました。

そうなると、他にも色々作ってみたくなってきますね✨

そこで、試しにマイク入力を記事上で取得するアプリを作ってもらいました。

ChatGPT へのプロンプト文は以下のようにしました。

ブラウザ上でユーザーのマイク入力の音量をテキストで表示するプログラムを書いて。起動時にマイクのアクセスを要求し、ユーザーが許可した後で起動するようにして。

マイクのアクセス要求の文をわざわざ含めているのは、そうしないと許可が無い状態でマイク入力を取ろうとしてエラーになってしまうからです。

表示方法についても追加で指定しました。

音量値はテキストではなく、レベルメーターで表示するようにして。

そうしてできあがったのが以下です。

音量：

※起動時にマイクのアクセス許可を求めるメッセージが出た場合は「許可」を選んでください。

コードは以下です。
（※カスタムHTML に貼り付けるため、body 以下の部分のみをまとめています）

<p>
音量：<progress id="volume" min="0" max="100" value="0"></progress>
</p>
<script>
window.onload = function() {
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            const context = new (window.AudioContext || window.webkitAudioContext)();
            const source = context.createMediaStreamSource(stream);
            const analyser = context.createAnalyser();
            analyser.fftSize = 1024;

            source.connect(analyser);

            const volumeDisplay = document.getElementById('volume');
            const bufferLength = analyser.frequencyBinCount;
            const dataArray = new Uint8Array(bufferLength);

            const update = () => {
                analyser.getByteFrequencyData(dataArray);

                let sum = 0;
                for(let i = 0; i < bufferLength; i++) {
                    sum += dataArray[i];
                }

                const avg = sum / bufferLength;
                volumeDisplay.value = (avg / 255) * 100; // Adjust for progress bar

                requestAnimationFrame(update);
            };
            update();
        })
        .catch(err => {
            console.error('マイクのアクセス許可が必要です:', err);
        });
};
</script>

プログラムの中身について、ChatGPT から以下の補足説明がありました。

このコードはページが読み込まれるとすぐにマイクへのアクセスを要求します。許可が与えられたら、音声ストリームを取得し、音量を解析します。解析された音量はページ上のテキストとして表示されます。このコードの音量解析は非常に基本的なもので、周波数の平均値を取ります。より高度な解析が必要な場合は、適切なアルゴリズムを使用してください。

なるほど。それなら dataArray を受け入れられる別のアルゴリズムを差し替えれば、ピッチ検出やボイスチェンジャーのようなこともできそうですね。