4.3 KiB
AudioPlayer
機能:音声ファイルの再生に使用され、ローカルURLまたはストリーミング読み込みをサポート。再生・一時停止・自動再生・再生キューおよび状態検出などの機能を備えています。
タイプ:通常コントロール
親クラス:bricks.JsWidget
初期化パラメータ
| パラメータ名 | 型 | 説明 |
|---|---|---|
url |
文字列 (String) | 音声リソースのURLアドレス。省略可。コンストラクタで渡された場合、即座に読み込まれます。 |
autoplay |
真偽値 (Boolean) | 音声が再生可能になった後、自動的に再生を開始するかどうか。デフォルトは false。 |
主なイベント
| イベント名 | 発火条件 |
|---|---|
ended |
現在の音声の再生が終了し、かつ再生リストが空の場合に発火します。 |
AudioRecorder
機能:ブラウザのマイク権限に基づいたWAV形式の音声録音機能を実装。録音の開始/停止、リアルタイムでの時間表示、録音データのアップロードおよびダウンロードを提供します。外部ライブラリRecorder.js(WAV形式)に依存しています。
タイプ:コンテナコントロール(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:テキスト領域のスクロール機能を提供。
主なイベント
外部に公開されるカスタムイベントはありません。その動作は内部の AudioPlayer の ended イベントによって駆動され、自動的に playnext() を呼び出して次のセグメントを再生します。
内部では
set_stream_urls(response)によりストリーミングJSONデータを受け取ります。各項目はaudio(Base64エンコードされた音声)、text(対応する文字)、done(処理完了フラグ)のフィールドを持つ必要があります。
✅ すべてのコントロールは
bricks.Factory.registerにより登録済みです。テンプレートまたは設定ファイル中で文字列名によりインスタンス化できます。