bricks/docs/ja/audio.md
2025-11-19 12:30:39 +08:00

4.3 KiB
Raw Blame History

AudioPlayer

機能音声ファイルの再生に使用され、ローカルURLまたはストリーミング読み込みをサポート。再生・一時停止・自動再生・再生キューおよび状態検出などの機能を備えています。
タイプ:通常コントロール
親クラスbricks.JsWidget

初期化パラメータ

パラメータ名 説明
url 文字列 (String) 音声リソースのURLアドレス。省略可。コンストラクタで渡された場合、即座に読み込まれます。
autoplay 真偽値 (Boolean) 音声が再生可能になった後、自動的に再生を開始するかどうか。デフォルトは false

主なイベント

イベント名 発火条件
ended 現在の音声の再生が終了し、かつ再生リストが空の場合に発火します。

AudioRecorder

機能ブラウザのマイク権限に基づいたWAV形式の音声録音機能を実装。録音の開始停止、リアルタイムでの時間表示、録音データのアップロードおよびダウンロードを提供します。外部ライブラリRecorder.jsWAV形式に依存しています。
タイプコンテナコントロールHBoxを継承しており、ボタンとテキストを内包
親クラスbricks.HBox

初期化パラメータ

パラメータ名 説明
upload_url 文字列 (String) 録音終了後に自動的にアップロードする先のURLアドレス。省略可。
start_icon 文字列 (String) 録音開始ボタンに表示されるSVGアイコンのパス。デフォルトは組み込みリソースを使用。
stop_icon 文字列 (String) 録音停止ボタンに表示されるSVGアイコンのパス。デフォルトは組み込みリソースを使用。
icon_rate 数値 (Number) SVGアイコンの拡大縮小比率。内部のSvgコントロールに渡されます。

主なイベント

イベント名 発火条件
record_started ユーザーが録音開始をクリックし、マイクの許可が取得された後に発火します。
record_ended ユーザーが録音を停止し、blobデータが生成された後に発火します。引数として {data, url, duration} を含みます。
uploaded 録音ファイルがサーバーへ正常にアップロードされた後に発火し、サーバーからの応答結果を含みます。

⚠️ 注意:録音機能を利用するには、外部ライブラリ Recorder.js を導入する必要があります。


TextedAudioPlayer

機能:音声再生とテキスト表示を統合した複合コントロール。音声読み上げと字幕の同期表示に適しています。ストリーミング応答から音声と対応するテキストを段階的に読み込み、自動的に順次再生します。
タイプコンテナコントロール縦型レイアウトVBox
親クラスbricks.VBox

初期化パラメータ

独立した初期化パラメータはありません。内部で自動的に以下の子コントロールを作成します:

  • AudioPlayer インスタンス:音声再生用。
  • Text インスタンス:対応するテキスト内容の表示用。
  • VScrollPanel:テキスト領域のスクロール機能を提供。

主なイベント

外部に公開されるカスタムイベントはありません。その動作は内部の AudioPlayerended イベントによって駆動され、自動的に playnext() を呼び出して次のセグメントを再生します。

内部では set_stream_urls(response) によりストリーミングJSONデータを受け取ります。各項目は audioBase64エンコードされた音声text(対応する文字)、done(処理完了フラグ)のフィールドを持つ必要があります。


すべてのコントロールは bricks.Factory.register により登録済みです。テンプレートまたは設定ファイル中で文字列名によりインスタンス化できます。