NCMBとMonacaを使ってボイスレコーディングアプリを作ります。HTML APIだけを使うので、プラグインを使わずに開発できます。録音した音声をNCMBのファイルストアへアップロードし、逆にダウンロードして再生できるアプリです。

前回の記事では音声録音処理と、NCMBのファイルストアへアップロードする処理を実装しましたので、今回はファイルストアの検索と一覧表示、そしてデータの再生までを実装します。

コードについて

今回のコードはNCMBMania/monaca-voice-recorderにアップロードしてあります。実装時の参考にしてください。

今回の処理について

今回の処理はすべて www/pages/home.html に記述しています。

必要な準備

今回はファイルストアにあるファイルに対してHTTPSアクセスを行います。これはNCMBの管理画面で有効にする必要があります。

この設定を有効にすると、管理画面のファイルストアでファイルを選択した際にURLが表示されるようになります。

このURLは以下のように構成されています。

https://mbaas.api.nifcloud.com/2013-09-01/applications/(アプリID)/publicFiles/(ファイル名)

アプリIDというのは、画面ではなく、URLでしか確認できない文字列になります。このアプリIDと、ファイルストアのファイルURLが入る変数を定義します。

// 既存の録音データが入る配列
let files = [];
// ↑前回はここまで↓この下に追加

// 再生用のURI
let uri = '';
// アプリID
const appId = 'YOUR_APP_ID';

画面が表示された際の処理

Frameworkでは画面が表示された（マウントされた）際に $onMounted 関数が呼ばれます。それを使ってファイルストアからレコーディングされたファイルをダウンロードします。

この時、ファイル名 fileName に対して regularExpressionTo を指定しています。これは正規表現を使って検索する機能です。すべてのレコーディングデータは record_ ではじまっていますので、それに該当するデータだけを抽出しています。

// 画面が表示された際の処理
$onMounted(async () => {
	// NCMBのファイルストアから録音データをダウンロード
	files = await ncmb.File
		.regularExpressionTo('fileName', 'record_.*') // recordからはじまるファイルを対象に検索
		.fetchAll();
	// 描画更新
	$update();
});

一覧表示する

files が更新されると、画面に録音データとして一覧表示されます。

<div class="list simple-list">
	<!-- 既存の録音データを一覧表示する -->
	<ul>
		${ files.map(file => $h`
			<li @click="${() => listen(file)}">
				${ file.fileName }
			</li>
		`)}
	</ul>
</div>

録音データを再生する

一覧されたファイル名をタップすると、 listen 関数が呼ばれます。この関数は先ほどのアプリIDと、選択されたファイルの名前を用いてHTTPSアクセス用のURLを生成します。

// 録音データを選択した際の処理
const listen = async (file) => {
	// 公開URLに変換
	uri = `https://mbaas.api.nifcloud.com/2013-09-01/applications/${appId}/publicFiles/${file.fileName}`;
	// 描画更新
	$update();
}

後は画面上の audio タグのsrc要素に対して適用し、タップで再生できます。

<!-- 録音データが選択されたら audio タグを表示する -->
${ uri !== '' ?
	$h`<audio src="${uri}" controls style="width:100%;"></audio>`
	:
''
}

注意点

Androidはwebmやweba、mp4などを扱えるはずですが、iOSの場合はwebm(a)ファイルを再生できません。iOSの場合は拡張子によって再生できる、できないを判別した方が良いでしょう。

まとめ

今回でボイスレコーディングアプリの実装は完了です。ファイルストアへのアップロードと検索、そしてHTTPSアクセスの方法が分かったかと思います。

HTML APIは充実しているので、多くの機能がネイティブプラグインを介さずに利用できます。ぜひお試しください。

※ ファイルストアのHTTPS公開からWeb Audio APIを使う方式に変更した記事を追加しました