ファイルストアの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などがあります。どれを使ったらうまくいくのか分かりづらいでしょう。今回のコードを参考に実装してみてください。