ファイルストアのTipsです。
ファイルストアは画像やCSVファイルなど、データベースのように構造的に管理しないデータを扱うのに向いています。例えばアプリでよくあるニーズとして音声データの利用があるかと思います。
今回はファイルストアにアップロードした音声ファイルを再生する方法を紹介します。
前提条件
まず前提条件として、MP3ファイルがファイルストアにアップロードされていることとします。今回はsample.mp3というファイル名です。
blobとしてダウンロードする
コツはファイルストアからダウンロードする際にblobを指定することです。
var fileName = "sample.mp3";
// ダウンロード（データ形式をblobを指定）
ncmb.File.download(fileName, "blob")
.then(function(blob) {
// ファイルリーダーにデータを渡す
reader.readAsDataURL(blob);
})
.catch(function(err) {
logger.log(err);
})
そして、受け取ったデータをFileReaderクラスに渡します。ファイルリーダーではblobからdataURIに変換しています。
var reader = new FileReader();
reader.onload = function(e) {
var dataUrl = reader.result;
document.getElementsByTagName('audio')[0].src = dataUrl;
}
そして受け取ったデータをそのままaudioタグのsrc要素に指定します。
<audio controls></audio>
これだけでファイルストアから音声ファイルをダウンロードし、audioタグを使って再生が可能です。
今回のコードはJSFiddleにアップロードしてあります。ぜひ試してみてください。
バイナリファイルは扱いが面倒で、その形式もDataURI、Blob、ArrayBufferなどがあります。どれを使ったらうまくいくのか分かりづらいでしょう。今回のコードを参考に実装してみてください。