ニフクラmBaaSお役立ちブログ

スマホアプリ開発にニフクラmBaaS。アプリ開発に役立つ情報をおとどけ!

ファイルストアの保存した音楽ファイルを再生するには

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

ファイルストア (JavaScript) : 基本的な使い方 | ニフティクラウド mobile backend