以下では OpenAI の TTS API(新しい audio API)を Flask チャットアプリで使う方法 を、
できるだけシンプルで実用的な構成で紹介します。
✅ 基本構成
Flaskでチャットアプリを作る場合、
Web画面でユーザーがテキスト入力
Flaskサーバーが OpenAI API に TTS リクエスト
得た音声バイナリ(mp3/wav)を返す
ブラウザ側で audio タグ / JS で再生
という流れになります。
📌 必要ライブラリ
pip install flask openai
🚀 サンプル:Flask + OpenAI TTS API
📁 app.py
from flask import Flask, request, send_file, jsonify
from openai import OpenAI
import os
import io
app = Flask(__name__)
# OpenAI API キー
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
@app.route("/")
def index():
return """
<form action="/tts" method="post">
<input name="text" placeholder="Enter text">
<button type="submit">Generate</button>
</form>
"""
@app.route("/tts", methods=["POST"])
def tts():
text = request.form.get("text", "")
# OpenAI TTS API 呼び出し
response = client.audio.speech.create(
model="gpt-4o-mini-tts", # OpenAI TTSモデル
voice="alloy", # 声(例:alloy / verse / shimmer など)
input=text,
format="mp3"
)
# バイナリ取得
audio_bytes = response.read()
# メモリ内に保存して返す
return send_file(
io.BytesIO(audio_bytes),
mimetype="audio/mpeg",
download_name="speech.mp3"
)
if __name__ == "__main__":
app.run(debug=True)
📌 ブラウザで音声を自動再生するフロント(例)
index.html を返すなら:
<!DOCTYPE html>
<html>
<body>
<h2>OpenAI TTS Demo</h2>
<input id="txt" placeholder="Enter text">
<button onclick="speak()">Speak</button>
<audio id="audio" controls></audio>
<script>
async function speak() {
const text = document.getElementById("txt").value;
const formData = new FormData();
formData.append("text", text);
const res = await fetch("/tts", { method: "POST", body: formData });
const blob = await res.blob();
const url = URL.createObjectURL(blob);
document.getElementById("audio").src = url;
}
</script>
</body>
</html>
🔊 レスポンス形式の選択
OpenAI公式では以下が使えます:
形式 MIMEタイプ 特徴
mp3 audio/mpeg 一般的・最小サイズ
aac audio/aac 高音質
wav audio/wav ロスレス(重い)
flac audio/flac 高品質