音声録音ページ（CGI+Python）

Lupin

Chat GPTにお願いして、音声を録音してくれるWebページのプログラムを作成してもらいます。

ポイント

最初投げかけたとき、どうしてもFlaskを使いたがるので（レンタルサーバはFlask非対応）、Flaskを使わないようにお願いしています。
また、２段階でお願いしています（２段階目＝「ユーザーごとにファイル名を分けて」）。こうすることで、Chat GPTがスムーズになります。

Chat GPTに投げかけた言葉

最初のお願い

以下のプログラムを作ってください。

プログラム:"""
* CGIでWebページを作る。CGIはサーバーに許可されています。
* ユーザーがアクセスするページは「index.cgi」。Flaskを使用しないで下さい。
* Webページにボタンが１つある。ボタンのキャプションは「録音開始」
* ボタンを押すとマイクが起動し、録音を開始する。また、ボタンのキャプションを「録音停止」にする。
* そのボタンを押すまで録音が続き、ボタンを押すと録音を停止して、キャプションを「録音開始」にする。
* 録音された音声を「onsei.wav」として保存する。
"""

ちょっと修正のお願い

ユーザーごとにユニークなファイル名にするには？
ただし、そのファイル名は複数回録音しても変わらないものとします。

うまくいかなかったので、修正のお願い

Cookieが取得できません。「cookie.get("user_id")」で、常にNoneとなります。


作ってくれたプログラム

ちょっとだけ自分で修正しています。

＜修正箇所＞

＜修正箇所＞
- ユーザーIDを加工（userid=str(usr_id).split("=")）
- HTML文のところを、「print("""---""")」を「print(f"""---""")」に
（useridを出力させたため）

#!/usr/bin/env python3

import os
import cgi
import wave
import base64
import tempfile
import http.cookies
import uuid


# クッキーを読み込む
cookie = http.cookies.SimpleCookie(os.environ.get("HTTP_COOKIE"))
user_id = cookie.get("user_id")

# クッキーが存在しない場合、新しいユーザーIDを生成
if user_id is None:
    user_id = str(uuid.uuid4())
    cookie["user_id"] = user_id
    cookie["user_id"]["path"] = "/"
    cookie["user_id"]["expires"] = 31536000  # 1年間有効にする
    print(cookie)  # クッキーを設定するためのHTTPヘッダーを出力

userid = str(user_id).split("=")[-1]



# フォームデータを取得
form = cgi.FieldStorage()

# 録音データを取得
recording = form.getvalue("recording")

if recording:
    # 録音データをデコード
    wav_data = base64.b64decode(recording.split(",")[1])

    # 録音データをファイルに保存
    with open(f"onsei_{userid}.wav", "wb") as f:
        f.write(wav_data)
        
        

print("Content-Type: text/html\n")


# HTMLとJavaScriptを出力
print(f"""
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>録音アプリ</title>
    <script>
        let recording = false;
        let mediaRecorder;
        let chunks = [];

        function startRecording() {{
            navigator.mediaDevices.getUserMedia({{audio: true}})
                .then(stream => {{
                    mediaRecorder = new MediaRecorder(stream);
                    mediaRecorder.start();

                    mediaRecorder.ondataavailable = e => {{
                        chunks.push(e.data);
                    }};

                    mediaRecorder.onstop = () => {{
                        const blob = new Blob(chunks, {{type: 'audio/wav'}});
                        chunks = [];
                        const reader = new FileReader();
                        reader.readAsDataURL(blob);
                        reader.onload = () => {{
                            document.getElementById("recording").value = reader.result;
                            document.getElementById("uploadForm").submit();
                        }};
                    }};
                }});
        }}

        function toggleRecording() {{
            const button = document.getElementById("recordButton");
            if (recording) {{
                button.textContent = "録音開始";
                mediaRecorder.stop();
            }} else {{
                button.textContent = "録音停止";
                startRecording();
            }}
            recording = !recording;
        }}
    </script>
</head>
<body>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <input type="hidden" id="recording" name="recording">
    </form>
    <button id="recordButton" onclick="toggleRecording()">録音開始</button>
    <p>{userid}</p>
</body>
</html>
""")


この記事が気に入ったらサポートをしてみませんか？