Streamlitで音声ファイルを自動再生する方法

本記事では、HTML不要でWebアプリが作れるPythonのWebフレームワーク Streamlitにて音声ファイルを自動再生する方法について説明します。結論から言うと、HTMLを用いて自動音声再生を実現しています。

はじめに

Streamlitを用いてアプリ上で音声ファイルを再生したい場合は、Streamlit標準の音声再生ウィジェット（st.audio）を使用します。このウィジェットを使うとアプリ上に音声コントローラーが表示され、コントローラー上の再生ボタンを押下することで指定した音声をアプリ上で再生することができます。

このウィジェットの問題としては、再生ボタンを押下しないと音声が再生できないことです。そのため、音声読み上げアプリのようなものを作りたいときにいちいちウィジェットの再生ボタンを押下する必要が出てきてしまいます。

今回は、この問題の解決方法について説明します。

※図のようにアプリ実行後にコントローラーの再生ボタンを押下することで音声が再生される

音声再生ウィジェット（st.audio）

Streamlit標準の音声再生ウィジェットです。以下のリファレンスを見る通り、自動再生するための引数は存在していません。Streamlit公式サイトのディスカッション上では2020年に自動再生機能の追加のリクエストがユーザーから出ているようですが、2021年11月現在、自動再生機能は追加されていません。そのため、標準ウィジェットを用いて自動再生を実装することはできません。

サードパーティ音声再生モジュール

playsoundやsimpleaudioなどPython上で音声を再生するためのモジュールはいくつか存在しています。モジュールについては以下の記事が参考になります。

Pythonでサウンドを扱う

Streamlit標準のウィジェットでは自動再生ができないため、次にこれらのモジュールを利用することを検討すると思います。しかし、playsoundやsimpleaudioをStreamlitアプリに組み込み、いざ本番環境にデプロイしようとするとSrtreamlitがこれらのモジュールに対応していないため、デプロイエラーとなってしまいます。そのため、サードパーティ製モジュールを用いての自動再生も実装することはできません。

HTMLを用いた自動音声再生の実現

次にHTMLを用いた自動音声再生を検討します。以下の記事の通り、StreamlitではHTMLを使用することも可能です。今回はHTMLの音声タグを利用することで自動音声再生を実装することができました。

【簡単爆速第3弾】HTML要らずでWebアプリが作れるStreamlitで、HTMLが使えるようになったぞ

ここでは、アプリ実行ボタンを押下すると音声再生されるアプリのコードを示します。

import streamlit as st
import streamlit.components.v1 as stc
import base64
import time

button = st.button('アプリ実行')

if button:

    audio_path1 = 'sample.wav' #入力する音声ファイル

    audio_placeholder = st.empty()

    file_ = open(audio_path1, "rb")
    contents = file_.read()
    file_.close()

    audio_str = "data:audio/ogg;base64,%s"%(base64.b64encode(contents).decode())
    audio_html = """
                    <audio autoplay=True>
                    <source src="%s" type="audio/ogg" autoplay=True>
                    Your browser does not support the audio element.
                    </audio>
                """ %audio_str

    audio_placeholder.empty()
    time.sleep(0.5) #これがないと上手く再生されません
    audio_placeholder.markdown(audio_html, unsafe_allow_html=True)

簡単な説明ですが、「アプリ実行」ボタンが押下されると「sample.wav」ファイルを読み込み、base64にて音声データをテキスト変換します。テキスト変換したものをHTMLのオーディオタグのソースに指定することでアプリ上で音声再生を実現しています。ここでのポイントはオーディオタグ内で**「autoplay=True」を指定**していることです。この指定によりアプリが実行された際に自動で音声が再生されるようになります。

このコードを実際に実行すると以下のようになります。

記事冒頭の画像のような音声コントローラーが表示されず、かつ自動で音声が再生されるようになりました。

補足

オーディオタグの指定の仕方でアプリ上での表示を変えることができます。

・「controls」の挿入

音声コントローラーが表示されます

 <audio controls autoplay=True>

・「controlslist="nodownload"」の挿入

音声コントローラーメニュー押下時の「ダウンロード」を非表示にする

 <audio controls autoplay=True controlslist="nodownload">

最後に

以上、Streamlitアプリ上で自動で音声再生させる方法について説明しました。最後に宣伝になりますが、本記事で解説した自動で音声再生する方法を活用したアプリを以下の記事に掲載しています。もし興味がありましたらこちらの記事も併せてご覧下さい。