firebase storageから音声ファイルをダウンロードして再生

公開日:2018-10-17
最終更新:2018-10-24
※この記事は外部サイト(https://qiita.com/roottool/items/b522f403f...)からのクロス投稿です

この記事で書くこと

Firebaseの環境構築や、firebaseのインストールは参考文献に記載しているページに詳しく記載されていますので割愛します。
この記事は、「AngularのプロジェクトにFirebaseを導入する」のangularfire2とfirebaseをインストールまでを終了した状態から開始するものとします。
また、AngularFire2を用いてFirebase Storageからファイルのダウンロード、ダウンロードした音声ファイルの再生について記載します。

angularfire2とは Angularで使い勝手がよくなるようラッピングされた、Firebaseクライアントです。 RxJSを使ってクライアントとFirebase間の同期を行うのが特徴で、現在(2018年9月)のところCloud Firestore、Realtime Database、Authentication、Cloud >Storage、Firebase Messaging、Cloud Functionsをサポートしています。

引用元 AngularのプロジェクトにFirebaseを導入する - angularfire2とは

ソースコード

この記事では以下の私が作成したサンプルを基にして説明を行います。 https://github.com/roottool/OrgaSound

プロジェクトにFirebase Storageを導入する

angularfire2のAngularFireStorageModuleをインポートする

今回はFire Storageを使用するので、AngularFireStorageModuleをインポートします。

// 追加
import { AngularFireStorageModule } from '@angular/fire/storage';

@NgModule({
  imports: [
    // 追加
    AngularFireStorageModule
  ]
})

Firebase Storageを導入する

作成したプロジェクトでは、ダウンロードから再生までのロジックをサービスとして分離しています。

// 追加
import { AngularFireStorage } from 'angularfire2/storage';

  constructor(
    // 追加
    private afStorage: AngularFireStorage
  ) { }

Firebase Storageからファイルをダウンロードする

export class PlayService {
  play() {
    const itemRef = this.afStorage.storage.ref('filePath');

    itemRef.getDownloadURL().then((url) => {
    })
    .catch((error) => {
      this.outputError(error);
    });
  }

  outputError(error) {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        console.log('Object not found');
        break;
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        console.log('Permission denied');
        break;
      case 'storage/canceled':
        // User canceled the upload
        console.log('Canceled upload');
        break;
      case 'storage/unknown':
        // Unknown error occurred, inspect the server response
        console.log('Unknown error');
        break;
    }
  }
}

this.afStorage.storage.ref('filePath')でfilePathへのストレージ参照を作成します。
作成したストレージ参照を基に、itemRef.getDownloadURL()でダウンロードURLを取得します。
取得が完了したかエラーかで、then((url) => {})catch((error) => {})の内部が実行されます。
urlは取得したダウンロードURL、errorはエラー情報が格納されます。
エラー処理はFirebase Storageのドキュメントのコピーです。

ダウンロードした音声ファイルを再生する

export class PlayService {
  constructor(
    private afStorage: AngularFireStorage
  ) { }

  play() {
    const itemRef = this.afStorage.storage.ref('filePath');

    itemRef.getDownloadURL().then((url) => {
      const sound = new Audio(url);
      sound.play();
    })
  }
}

ダウンロード成功時に取得したURLを基にAudioオブジェクトを作成し、sound.play();で再生します。

参考文献

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@roottoolの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする