blogger

ブラウザで入力した文字を読み上げます（音声出力）

12:51

こんにちは、ともです。

今回はPythonのWebアプリケーション用フレームワークのDjangoでブラウザから入力した文字を読み上げます（音声出力）。

これまでの内容については、以下を参照してください。

DjangoでFormを用いた値のやり取り

音声出力はこちらを参照してください。

チャットボットで音声出力

音声
1. staticフォルダ作成
2. chatbot/views.pyコーディング
3. template/index.htmlコーディング
まとめ

音声

webアプリの流れです。

webアプリの流れです。黄色の箇所が前回からの差分です。

ブラウザからリクエストを送ります。urlに書かれているパスをプロジェクトwebsiteのurls.pyで確認します。

urls.pyにはchatbot/urls.pyを参照するように記載します。

chatbot/urls.pyはchatbot/views.pyを参照します。

chatbotの関数でリクエストに値が設定されているか判定します。入っている場合はメッセージをテンプレートに渡します。

このとき外部コマンドでテキストファイルを音声ファイルに変換します。

また、入力フォームの情報をFormクラスから取得します。

テンプレートにHTMLタグを記載します。

テンプレートの内容とchatbot/views.pyのメッセージを加工してブラウザに値を渡します。

ブラウザは、音声ファイルを取得して、会話しているような感じで読み上げます。

staticフォルダ作成

プロジェクトにstaticフォルダを配置します。

プロジェクトにあるchatbot/settings.pyに以下の内容を書きます。

    
STATIC_DIR = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
#静的ファイル配置先のディレクトリへのURLです。
STATICFILES_DIRS = [
    STATIC_DIR,
]

chatbot/views.pyコーディング

chatbot/views.pyコードを修正します。

    
import subprocess
from django.http.response import HttpResponse
from django.shortcuts import render

from . import forms

OPENJTALK_BINPATH = 'D:/jtalk/open_jtalk-1.11/bin'
OPENJTALK_DICPATH = 'D:/jtalk/open_jtalk-1.11/mecab-naist-jdic'
OPENJTALK_VOICEPATH = 'D:/voice_mei/MMDAgent_Example-1.8/Voice/mei/mei_normal.htsvoice'

def chatbot(request):
    get_message = ''
    get_audio_path = ''
    if 'chat_bot' in request.GET:
        get_message = request.GET['chat_bot']

        open_jtalk=[OPENJTALK_BINPATH + '/open_jtalk.exe']
        mech=['-x',OPENJTALK_DICPATH]
        htsvoice=['-m',OPENJTALK_VOICEPATH]
        speed=['-r','1.0']
        outwav=['-ow','D:/python_workspace/django/website/static/open_jtalk.wav']
        cmd=open_jtalk+mech+htsvoice+speed+outwav

        c = subprocess.Popen(cmd,stdin=subprocess.PIPE)
        c.stdin.write(get_message.encode('shift-jis'))
        c.stdin.close()
        c.wait()
        get_audio_path = '../static/open_jtalk.wav'

    form = forms.ChatBotForm(request.GET or None)
    d = {
        'form': form,
        'message': get_message,
        'audio_path' : get_audio_path,
    }


    return render(request, 'index.html', d)

template/index.htmlコーディング

index.htmlのファイルを修正します。

    
<!DOCTYPE html>
<html>
  <head lang="ja">
    <meta charset="utf-8">
    <title>チャットボット</title>
  </head>
  <body>
  <h1>ブラウザで音声チャットボットつくるぞぉ！</h1>
    <form action="" method="GET">
      <label>{{ form.chat_bot.label }} {{ form.chat_bot }}</label><br/>
      <input type="submit" value="送信">
      <br/>
      <br/>
      {% if message %}
         <audio src="{{ audio_path }}" autoplay/></audio>
      {% endif %}
      {{ message }}
    </form>
  </body>
</html>

{{message}}を条件に値があれば、audioファイルを実行します。