簡単なAudioPlayerをBlazorで作ってみた～API連携からUIまで～

1. はじめに

こんにちは。NewITソリューション部です。今回はBlazorです。

Blazor WebAssemblyで「議事録音声再生」機能を追加した際の実装手順をまとめます。
APIから音声ファイルを取得し、再生・シーク・ボリューム・速度変更、さらにリストから任意の位置へのジャンプなど、
基本的なAudioPlayerの機能を実装しました。
この記事では、どのように機能を組み立てていったかを紹介します。
イメージはこんな感じです。

2. APIエンドポイントの追加

まず、サーバー側で音声ファイル取得用APIを追加します。

Controller
コントローラーにGetAudioFileエンドポイントを追加。
音声バイト配列を返します。

Domain/Repository
ドメインにGetAudioFileメソッドを追加し、DBからファイルパスを取得してFile.ReadAllBytesAsyncで返却。

3. クライアントAPIサービスの拡張

WebAssemblyなのでClientからAPIをコールするメソッドを追加
サーバーAPIから音声バイト配列を取得できるようにします。

4. AudioPlayerコンポーネントの作成

UI（Razor）
SimpleAudioPlayer.razorを新規作成。
<audio>タグを使い、再生・一時停止・シークバー・ボリューム・速度変更などのUIを実装。

HTML5のaudioタグについて
<audio>タグは、HTML5で導入された音声再生用の標準タグです。
src属性に音声ファイルのURLやBlob URLを指定することで、ブラウザ上で直接音声を再生できます。
controls属性を付けると、ブラウザ標準の再生・停止・シークバー・ボリュームなどのUIが表示されますが、Blazorでは独自UIを作るため、controls属性は省略し、JSやC#から細かく制御しています。

主な属性・メソッド・イベント例：

src … 再生する音声ファイルのURL
play() … 再生開始
pause() … 一時停止
currentTime … 再生位置（秒単位）
volume … 音量（0.0～1.0）
playbackRate … 再生速度
onplay, onpause, ontimeupdate, onloadedmetadata … 各種イベント

Blazorでは、JSインターオペレーションを使ってこれらのプロパティやイベントをC#から操作・取得しています。

5. Seekバー・ボリューム・再生速度・リストジャンプ機能の追加

AudioPlayerには以下の機能を実装しました。

Seekバー
再生位置を自由に変更できるバーを設置。
ユーザーがバーを動かすことで、任意の位置から再生できます。

ボリューム調整
音量を0～100%で調整できるスライダーを設置。
JS経由でaudio.volumeを変更しています。

再生速度変更
ドロップダウンで0.25倍～2倍まで再生速度を選択可能。
audio.playbackRateをJSから制御しています。

下のリストからジャンプ
議事録の発言リストやタイムラインを表示し、
各行をクリックするとその発言の開始時間にシークして再生できます。
これにより、聞きたい発言にすぐジャンプできるようになりました。

6. 他のライブラリを使わず、HTML5のaudioタグとC#+JavaScriptのみで実装

今回のAudioPlayerは、外部のオーディオ再生ライブラリやUIコンポーネントライブラリを一切使わず、
HTML5のaudioタグとBlazor（C#）＋JavaScriptだけで実装しています。
そのため、動作やUIを自由にカスタマイズでき、
Blazor標準のJSインターオペレーションで細かい制御も可能です。

7. BlazorのコードビハインドからJSをコールする

Blazorでは、C#のコードビハインドからJavaScriptの関数を呼び出すことができます。
これを「JSインターオペレーション（JS interop）」と呼びます。

例えば、IJSRuntimeを使って以下のようにJS関数を呼び出します。

await JS.InvokeVoidAsync("audioPlayerInterop.play");
await JS.InvokeVoidAsync("audioPlayerInterop.setVolume", volume);
await JS.InvokeVoidAsync("audioPlayerInterop.seek", time);
await JS.InvokeVoidAsync("audioPlayerInterop.setSpeed", speed);

また、JavaScript側からC#のメソッドを呼び出すことも可能です。
[JSInvokable]属性を付けたC#メソッドは、JSから呼び出せます。

この仕組みにより、HTML5のaudioタグの細かい制御や、
再生状態・再生位置などのイベント通知をC#とJS間で連携できます。

8. JSインターオペレーション

audioPlayerInterop.js

Blob URL生成、再生・一時停止・シーク・ボリューム・速度変更などの関数を実装。

<audio>要素のイベント（再生・一時停止・メタデータ読み込み・再生位置更新）でC#に通知。

ボリュームバーやシークバーの見た目もJSで制御。
クリーンアップ処理も追加し、リソースリークを防止。

9. 動作イメージ

音声再生ボタンを押す
APIから音声ファイル（WebM）がバイト配列で返却される
JSでBlob URLを生成し、<audio>タグにセット
再生・一時停止・シーク・ボリューム・速度変更などが可能
下のリストから発言をクリックすると、その時間にジャンプして再生

10. まとめ

Blazor WebAssemblyとAPI、JSインターオペレーションを組み合わせることで、
「サーバーから取得した音声ファイルをWebブラウザ上で再生できるAudioPlayer」を簡単に実装できました。

最後に、弊社にご興味をお持ちいただけましたらお気軽にお問い合わせいただけると幸いです。

当サイトはパーソルクロステクノロジー㈱より提供しています