2025年5月16日 星期五

Streamlit 學習筆記 : 展示多媒體資料 (二) 音訊

本篇繼續來測試用 Streamlit 顯示多媒體資料的音訊部分. 

Streamlit 用來顯示多媒體內容的函式摘要如下表 :


 多媒體 函式 可用媒體格式 可用資料來源
圖片st.image()PNG, JPG本機路徑, URL, PIL.Imagenumpy 陣列
音訊st.audio()MP3, WAV, OGG本機檔案, URL, BytesIO
影片st.video()MP4, WebM本機檔案, URL, BytesIO


以下測試使用 Streamlit 的 audio() 函式來播放音訊. 


2. 播放音訊 : 

播放音訊的 st.audio() 函式參數結構如下 : 

st.audio(data, format="audio/wav", start_time=0)

第一參數 data 為要播放之音訊來源, 可以是本機的 .wav, .mp3, 或 .ogg 等音訊檔, 或者是網路音訊的 URL, 也可以是用 open() 開啟後讀取的 Bytes 型別的二進位資料或用 Numpy 產生的 ndarray 音訊物件. 

第二參數 format 用來設定音訊的 MIME 類型, 以便瀏覽器能正確解析格式與正常播放音訊. 不指定 format 參數時, Streamlit 會依據檔案內容或副檔名自動判斷 MIME 格式, 但若出現播放異常或無聲現象, 可嘗試明確指定 format 參數. 各種音訊格式的 format 參數如下表 : 


 音訊格式  format 參數值
 MP3  "audio/mp3" 或 "audio/mpeg"
 WAV  "audio/wav" 或 "audio/x-wav"
 OGG  "audio/ogg"
 AAC  "audio/aac"
 M4A  "audio/mp4" 或 "audio/x-m4a"


第三參數 start_time 用來設定播放器的起始時間, 預設是 0 (從頭開始播放). 

首先來測試播放本機的音訊檔, 我在目前工作目錄下準備了一個 your_answer_clip.mp3 檔 (取自黃霄雲 "你的答案" 前奏片段), 參考 : 


只要將檔名路徑傳給 st.audio() 即可, 例如 : 


測試 2-1 : 播放本機 mp3 檔 [看原始碼] 

# st-audio-test-1.py
import streamlit as st

st.subheader('播放本機 mp3 檔案')
st.audio('your_answer_clip.mp3', format='audio/mp3')

結果如下 : 




按右邊的三個小點可以設定播放速度與下載音檔. 

其次是播放網路上的音訊, 只要直接將音訊的 URL 傳給 st.audio() 即可, 例如 : 


測試 2-2 : 播放網路 mp3 檔 [看原始碼] 

# st-audio-test-2.py
import streamlit as st

st.subheader('播放網路 mp3 檔案')
audio_url='https://yaohuang1966.github.io/media/your_answer_clip.mp3'
st.audio(audio_url, format='audio/mp3')

結果如下 : 


也可以用 open() 開啟音訊檔, 將讀取後得到的 Bytes 類型資料傳給 st.audio() 即可, 例如 :


測試 2-3 : 播放 Bytes 類型音訊 [看原始碼]

# st-audio-test-3.py
import streamlit as st

st.subheader('播放 Bytes 類型音訊')
with open('your_answer_clip.mp3', 'rb') as f:
    audio_bytes=f.read()
st.audio(audio_bytes, format='audio/mp3')

此例使用 open() 開啟 mp3 檔案並讀取為 Bytes 類型資料後傳給 st.audio(), Streamlit 會在網頁上渲染一個播放器來播放此音訊, 結果如下 : 




注意, 與 st.image() 不同的是, st.audio() 只能傳入單一個音訊來源, 不支援傳入放在串列中的多個音訊來源, 不管是本機音訊檔, 網路音訊檔 URL, 或 Bytes 類型音訊都不行, 否則會出現 "RuntimeError: Invalid binary data format' 例外. 

沒有留言 :