Ionic、Angular、RxJS、and NgRxでオーディオプレーヤーアプリを構築する

TL;DR：本書では、Ionic framework、Angular を使ってモバイルオーディオプレーヤーアプリを作成する方法について学んでいきます。RxJS や Observable を使うオーディオ操作を処理し、 NgRx でアプリケーションの状態を管理する方法についても学んでいきます。アプリケーションをセキュアにするには、Auth0 を使用します。必要であれば、この_ GitHub レポジトリで最後のコードを見つけることもできます_。

はじめに

オーディオプレーヤーを作ることは威圧を感じる作業です。メディアの状態管理、メディアイベントへの応答、そしてこれら変更を UI（ユーザーインターフェイス）に適切に反映させるなどを考えると特にです。ですから、本書では、これら問題を簡単に解決する Angular と Ionic を（他のライブラリも一緒に）使います。

メディア再生を反応の早い方法で処理するには、JavaScript _の

Audio

オブジェクト_を RxJS Observable に適用し、NgRx ストアを使ってオーディオプレーヤーの状態を管理します。

そのほかに、モバイルアプリを安全にする Auth0 を使用しますが、後のアーティクルでは、音楽ファイルのリストをアプリに提供するために安全なバックエンドを作る方法について学びます（本書では、スタティックデータのモックサービスを使用します）。

“@Ionicframework、@angular、RxJS、NgRx を使ってモバイルオーディオプレーヤーアプリを作りましょう。”
これをツイートする

Ionic 開発の必要条件

これからモバイルアプリケーションを作るので、アプリを作るのに必要な SDK が必要です。本書では、Ionic アプリをネイティブモバイルパッケージにする Cordova を使用します。

次のセクションでは、アプリケーションを作成する前に従わなければならないステップについて説明します。

iOS 用ネイティブ SDK をインストールする

iOS プラットフォームには Mac OS X 環境が必要で、Xcode がインストールされていなければなりません。ネイティブ_ SDK を Mac OS X 環境に構成することについては、このリファレンスを確認_してください。Xcode をインストールしたら、コマンドラインツールとシミュレーターを実行する

ios-deploy

ツールも必要です。

これらツールをインストールするには、次に従ってください。

コマンドラインから
```
xcode-select --install
```
を実行して、Xcode コマンドラインツールをインストールします。
それから、
```
npm install -g ios-deploy
```
を実行して
```
ios-deploy
```
ツールをインストールします。

マシンに_ Node.js と NPM がインストールされていない場合は、このレファレンスを確認_してください。

Android 用ネイティブ SDK をインストールする

Android アプリケーションには、Android SDK とツールが必要です。以下のステップでは、ご使用の環境に SDK とツールをインストールする方法を説明していますが、詳細説明が必要な場合は、すべてをインストールする方法について詳しく説明するこのリンクを確認してください。

JDK：JDK _をインストール_し、 JDK インストールを指す
```
JAVA_HOME
```
環境変数をインストールする必要があります。
Gradle：Gradle もインストールし、それを環境変数の
```
PATH
```
変数に追加する必要があります。
Android SDK：最も重要なのは、アプリに
```
apk
```
ファイルを生成する Android SDK が必要ですから、Android Studio IDE をインストールし、
```
sdkmanager
```
を使って次をインストールします。
1. Android Platform SDK
2. SDK バージョン用ビルドツール
3. Android サポートレポジトリ

これらをインストールしたら、

ANDROID_HOME

環境変数を Android SDK の位置情報に設定する必要があります。Android SDK の

tools

ディレクトリ、

tools/bin

ディレクトリ、

platform-tools

ディレクトリを

PATH

変数に追加することもお勧めします。

Node.js とツールをインストールする

すでにお伝えしましたが、開発マシンに Node.js をインストールする必要がありますので、まだインストールされていないのであれば、 Node.js _のダウンロードページ_に行き、その指示に従ってください。

インストールが終わったら、

npm

を介して Cordova CLI と Ionic CLI をインストールする必要があります。

npm install -g ionic cordova

Ionic アプリをスキャフォールディングする

すべての環境依存関係をインストールしたら、Ionic アプリのスキャフォールディングに集中して実行します。このためには、次のコマンドを端末に発行します。

ionic start audio-player blank

このコマンドで次の2つの質問を表示されます。

ネイティブ iOS と Android をターゲットにする Cordova を新しいアプリに統合しますか？（はい/いいえ) : モバイルデバイスのアプリを作成するのであれば、
```
y
```
（はい）を入力します。
無料の Ionic Pro SDK をインストールし、お使いのアプリに接続しますか？（はい/いいえ）：Ionic Pro 機能をこのチュートリアルで使用する必要がない場合は、
```
n
```
を押してください。

アプリケーションを実行する

次に進む前に、モバイルデバイスやエミュレーターでアプリケーションを始めることができるかを確認します。

たとえば、Mac OS X 環境をご使用で、アプリケーションをテストするためにエミュレーターを使用する場合は、次を実行します。

# iOS アプリの場合
ionic cordova run ios -lc

注：上記の
-lc
は Ionic がサーバーをスピンアップして www ファイルをライブでリロードする（
l
）ことと、コンソールログを端末に印刷する（
c
）ことを意味します。

参考として、以下は現在の開発マシン（ブラウザーがあるものなど）や Android を狙うときに使用できる他のコマンドです。

# ローカルで使用可能にします
ionic serve

# android アプリの場合
ionic cordova run android

プロジェクトの依存関係をインストールする

基本的なアプリをモバイルデバイスで実行できることが確認できたら、依存関係をインストールして次のステップに進みます。モバイルオーディオプレーヤーを作るには、次の NPM ライブラリを使います。

```
@angular/animations
```
：アニメーションを追加してアプリ UX を向上するパッケージ
```
@ngrx/store
```
：アプリケーションの状況を管理するのに役立つように RxJS アプリケーションと Angular アプリケーションを統合して構築するライブラリ
```
moment.js
```
：日付や時間を JavaScript で操作するのに役立つライブラリ
```
auth0-js
```
：JavaScript アプリ用の公式 Auth0 ライブラリ
```
@auth0/cordova
```
：Cordova アプリ用の公式 Auth0 ライブラリ
```
rxjs
```
：JavaScript 用のリアクティブプログラミングライブラリ
```
rxjs-compat
```
：RxJS previous との互換性を下位のバージョン６にするパッケージ

上記のライブラリをインストールするには、次のコマンドを使用します。

# プロジェクトルートにいることを確認します
cd audio-player

# すべてのライブラリをインストールします
npm install --save @angular/animations @ngrx/store moment auth0-js @types/auth0-js @auth0/cordova rxjs@6.2.1 rxjs-compat@6.2.1

注：上記のコマンドでは、Ionic （少なくても本書の作成時）は Angular 5 を同梱し、Angular 5 は RxJS 5 API を使用するので、
rxjs@6.2.1
と
rxjs-compat@6.2.1
をインストールしました。

再生を管理する Ionic サービスを作成する

アプリの依存関係をインストールしたら、再生機能に取り組みます。

RxJS Observable を作成する

これから作成する Observable はアプリケーションの中心的なものです。RxJS にはカスタム Observable を作るのに役立つ

create

という名前のヘルパー機能が同梱されています。入力として

subscribe

関数が必要です。

Observable.create(subscribe): Observable<any>;

この

subscribe

関数は

observer

オブジェクトを取り、関数を返します。Observer オブジェクトは

Next

、

error

、

complete

の３つのメソッドを提供します。

値を発行するには、必要な値で
```
observer.next
```
メソッドを呼び出します。
エラーの場合、そのエラーをスローする
```
observer.error
```
関数を使って Observable を停止させます。
これから Observable が必要でなく発行する値がなければ、
```
observer.complete
```
メソッドを呼び出します。

Observable.create

も呼び出して

Observable

を

subscribe

メソッドを介してサブスクライブできるものに返します。このメソッドは Observable から解除したいときに呼び出すことができる関数を返します。

Observable.create(subscribe)
と
Observable.subscribe()
を間違えないようにしてください。以前の
subscribe
関数は
Observable.create
への入力で、これは Observable の青写真のようなもので、後者は Observable の実行を呼び出すものです。

オーディオプレーヤーアプリでは、

playing

、

pause

、

timeupdate

などのようなメディアイベントについての通知を得るための Observable を作りますから、簡単に言えば、Observable 内の

Audio()

のメディアイベントに耳を傾けてから、

observer.next

メソッドを介してアプリの残りを通知します。

これで、Observable が必要であることをご理解いただけたと思いますので、サービスを Ionic アプリに作成することから始めましょう。

ionic generate provider audio

これによって、

./src/providers/audio/

の下の

audio.ts

と呼ばれるファイルにサービスを生成し、このサービスは

app.module.ts

の

NgModule

に追加されます。

audio.ts

ファイルのコンテンツを次と置き換えます。

import {Injectable} from '@angular/core';
import {Observable, Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import * as moment from 'moment';

@Injectable()
export class AudioProvider {
  private stop$ = new Subject();
  private audioObj = new Audio();

  constructor() { }

  private streamObservable(url) {
    let events = [
      'ended', 'error', 'play', 'playing', 'pause', 'timeupdate', 'canplay', 'loadedmetadata', 'loadstart'
    ];

    const addEvents = function(obj, events, handler) {
      events.forEach(event => {
        obj.addEventListener(event, handler);
      });
    };

    const removeEvents = function(obj, events, handler) {
      events.forEach(event => {
        obj.removeEventListener(event, handler);
      });
    };

    return Observable.create(observer => {
      // 再生オーディオ
      this.audioObj.src = url;
      this.audioObj.load();
      this.audioObj.play();

      // メディアイベント
      const handler = (event) => observer.next(event);
      addEvents(this.audioObj, events, handler);

      return () => {
        // 再生停止
        this.audioObj.pause();
        this.audioObj.currentTime = 0;

        // EventListeners を削除します
        removeEvents(this.audioObj, events, handler);
      };
    });
  }
}

これで、新しいオーディオファイルを再生したいときは、この Observable を作成してこれらすべてのメディアイベントを聞きます。これは

AudioProvider

クラスに追加する

playStream()

と呼ばれる新しいメソッドを介して行います。

// ... ステートメントをインポートします ...

export class AudioProvider {
  // ... コンストラクターとその他メソッド ...

  playStream(url) {
    return this.streamObservable(url).pipe(takeUntil(this.stop$));
  }
}

this.stop$

が任意の値を発行したら、この Observable から自動的に解除されることにご留意いただくことが大切です。

AudioProvider サービスを完成させる

これで

AudioProvider

サービスの基盤ができたので、メソッドの残りの

play

、

pause

、

stop

、

seekTo

、

formatTime

を実行します。これらの実装は分かりやすいので、これら５つのメソッドを以下に表示のように

AudioProvider

サービスに追加します。

// ... ステートメントをインポートします ...

export class AudioProvider {

  // ... コンストラクターとその他メソッド ...

  play() {
    this.audioObj.play();
  }

  pause() {
    this.audioObj.pause();
  }

  stop() {
    this.stop$.next();
  }

  seekTo(seconds) {
    this.audioObj.currentTime = seconds;
  }

  formatTime(time, format) {
    return moment.utc(time).format(format);
  }
}

音楽ファイルを読み取る

再生機能のオーディオサービスを作った後、ファイルのリストを取得するサービスを作る必要があります。このために、Ionic を使ってクラウドサービスを作ります。

ionic generate provider cloud

このコマンドは

./src/providers/cloud

の下の

cloud.ts

という名前のファイルにサービスを生成します。ここで、このファイルのコンテンツを次と置き換えます。

import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable()
export class CloudProvider {
  files:any = [
    { url: 'https://ia801504.us.archive.org/3/items/EdSheeranPerfectOfficialMusicVideoListenVid.com/Ed_Sheeran_-_Perfect_Official_Music_Video%5BListenVid.com%5D.mp3',
      name: 'Perfect by Ed Sheeran'
    },
    {
      url: 'https://ia801609.us.archive.org/16/items/nusratcollection_20170414_0953/Man%20Atkiya%20Beparwah%20De%20Naal%20Nusrat%20Fateh%20Ali%20Khan.mp3',
      name: 'Man Atkeya Beparwah by Nusrat Fateh Ali Khan'
    },
    { url: 'https://ia801503.us.archive.org/15/items/TheBeatlesPennyLane_201805/The%20Beatles%20-%20Penny%20Lane.mp3',
      name: 'Penny Lane by The Beatles'
    }
  ];
  getFiles() {
   return of(this.files);
  }
}

上記の

getFiles

メソッドが基本的に、スタティック

files

オブジェクトで

Observable

を返して HTTP リクエストをモックします。

Ionic アプリの状態を NgRx ストアで管理する

アプリケーションの状態を管理するのに役立てるため NgRx _ストアライブラリ_を活用します。このストアは Redux をベースにしたもので、React の世界では状態を管理するのに非常に有名なもので、Redux 概念と RxJS とを統合します。

Redux が何か（またはその機能）をご存知でない方のために、次で簡単に説明しています。

Redux では、状態は中心的位置で管理されています。つまり、アプリケーション全体の最新状態を格納するオブジェクトがひとつだけということです。どの時点であっても、この状態を更新したいのであれば、
reducer
として知られる関数に
action
を
dispatch
する必要があります。この
reducer
は
action
を理解し、
type
と
data
のアクションをベースにした新しい状態を生成する責任があります。

NgRx ストアで Reducer を作成する

デフォルトで、NgRx

Action

インターフェースはひとつのプロパティ

type

だけを表示します。アクションのタイプと一緒に情報を送信する必要があるので、ニーズに合わせて NgRx

Action

インターフェイスを拡張します。

ですから、インターフェイスの拡張を定義するには、

store

（

./src/providers/

の下）という名前の新しいディレクトリ内の

store.ts

という名前のファイルを作り、次のコードをそれに追加します。

import {Action} from '@ngrx/store';

export interface MediaAction extends Action {
  type: string;
  payload?: any;
}

それから、異なるメディアイベントに異なるアクションを作ります（

canplay

、

playing

、など）。そのようなものとして、

store.ts

ファイルを次のように更新します。

// ... ステートメントと MediaAction インターフェイスをインポートします ...

export const CANPLAY = 'CANPLAY';
export const LOADEDMETADATA = 'LOADEDMETADATA';
export const PLAYING = 'PLAYING';
export const TIMEUPDATE = 'TIMEUPDATE';
export const LOADSTART = 'LOADSTART';
export const RESET = 'RESET';

その後、

MediaAction

のインスタンスを受信し、処理する Reducer 関数を実装できるようになります。

// ... インポート、MediaAction、Const ...

export function mediaStateReducer(state: any, action: MediaAction) {
  let payload = action.payload;
  switch (action.type) {
    case CANPLAY:
      state = Object.assign({}, state);
      state.media.canplay = payload.value;
      return state;
    case LOADEDMETADATA:
      state = Object.assign({}, state);
      state.media.loadedmetadata = payload.value;
      state.media.duration = payload.data.time;
      state.media.durationSec = payload.data.timeSec;
      state.media.mediaType = payload.data.mediaType;
      return state;
    case PLAYING:
      state = Object.assign({}, state);
      state.media.playing = payload.value;
      return state;
    case TIMEUPDATE:
      state = Object.assign({}, state);
      state.media.time = payload.time;
      state.media.timeSec = payload.timeSec;
      return state;
    case LOADSTART:
      state.media.loadstart = payload.value;
      return Object.assign({}, state);
    case RESET:
      state = Object.assign({}, state);
      state.media = {};
      return state;
    default:
      state = {};
      state.media = {};
      return state;
  }
}

上記のコード内の各

case

ステートメント内で、アプリに新しい

state

を生成していきます。NgRx は

immutable

オブジェクトと連携するので、既存のものを更新する代わりに新しい状態オブジェクトを作る必要があることに留意することが重要です。この場合、現在のものをベースにして新しい

state

オブジェクトを作る

Object.assign

を使用します。

ここで、Ionic アプリの Reducer を登録するには、

app.module.ts

ファイルを開き、次のように更新します。

// ... その他のステートメントをインポートします ...
import { StoreModule } from '@ngrx/store';
import { mediaStateReducer } from '../providers/store/store';

@NgModule({
  // ... 宣言 ...
  imports: [
    // ... その他インポートされたモジュール ...
    StoreModule.forRoot({
      appState: mediaStateReducer
    }),
    IonicModule.forRoot(MyApp)
  ],
  // ... ブートストラップ、entryComponents、プロバイダー ...
})
export class AppModule {}

これで Ionic アプリケーションのどこにでもある

appState

キーを使って現在の状態にアクセスできるようになります。

Ionic アプリの認証

セキュリティアプリを作成するには、ユーザーの認証を処理する Auth0 に依存します。そのようなものとして、無料_ Auth0 アカウントはこちらから登録_してください。それから、モバイルアプリを表す Auth0 アプリケーションをセットアップする必要があります。

依存関係をインストールする

Ionic アプリを Auth0 でセキュアにするには、Cordova プラグインをインストール必要があります。

# {YOUR_PACKAGE_ID} と独自のアプリ識別子を置き換え、
# YOUR_AUTH0_DOMAIN を独自の Auth0 ドメインと置き換えます
ionic cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME={YOUR_PACKAGE_ID} --variable ANDROID_SCHEME={YOUR_PACKAGE_ID} --variable ANDROID_HOST={YOUR_AUTH0_DOMAIN} --variable ANDROID_PATHPREFIX=/cordova/{YOUR_PACKAGE_ID}/callback
ionic cordova plugin add cordova-plugin-safariviewcontroller

注：上記の
{YOUR_PACKAGE_ID}
と Ionic アプリのパッケージ ID を置き換えます。この情報は
config.xml
ファイルにあります。このファイルには
<widget id="io.ionic.starter" ...
のような情報があります。この場合、パッケージ ID は
io.ionic.starter
です。
注：そのほかに
{YOUR_AUTH0_DOMAIN}
と独自の Auth0 ドメインを置き換える必要があります。Auth0 アカウントを作成するとき、
ionic-audio-player
、
your-name
、などのようなサブドメインを選択します。この場合、Auth0 ドメインは
ionic-audio-player.auth0.com
になります。次のスクリーンショットに表示されているように、Auth0 ダッシュボードの右上にもサブドメインがあります。

Find your Auth0 subdomain.

Auth0 アプリケーションをセットアップする

Auth0 ダッシュボードに移動し、「新しいアプリケーションの作成」ボタンをクリックします。
新しいアプリの名前を付け（「Ionic オーディオプレーヤー」など）、そのタイプに「ネイティブアプリ」を選択し、「作成」ボタンをクリックします。
新しい Auth0 アプリの設定タブで、許可されたオリジン（CORS) ボックスの
```
file://*, http://localhost:8080
```
を追加します。
設定タブで、
```
YOUR_PACKAGE_ID://YOUR_AUTH_DOMAIN/cordova/YOUR_PACKAGE_ID/callback
```
を 許可されたコールバック URL に追加します。
```
http://localhost:8080
```
を 許可されたログアウト URL に追加します。
「変更の保存」ボタンをクリックします。

注：アプリをライブでの再読み込み機能で実行しているのであれば、

http://localhost:8080

とは異なる URL を 許可されたオリジン（CORS) ボックスに追加しなければならないかもしれません。アプリを実行しているとき、正しい URL を見つけるために

config.xml

ファイルの

allow-navigation

プロパティを確認します。例えば：

http://192.168.0.14:8100

などです。

注：ステップ４では、

YOUR_PACKAGE_ID

と

YOUR_AUTH_DOMAIN

を独自のデータ（

io.ionic.starter

や

ionic-audio-player.auth0.com

のようなプロジェクトの依存関係をインストールしたときに使用した同じデータ）と交換します。

Ionic で Auth0 を構成する

ここで、

auth.config.ts

という名前のファイルを新しいディレクトリの

./src/providers/auth0/

に作成します。そのファイル内に、次のコードを追加します。

export const AUTH_CONFIG = {
  clientID: 'YOUR_CLIENT_ID',// Auth0 に必要（大文字化：ID）
  clientId: 'YOUR_CLIENT_ID', // Auth0Cordova に必要（大文字化：Id）
  domain: 'YOUR_AUTH_DOMAIN',
  packageIdentifier: 'your.app.id' // config.xml ウィジェット ID にあります（com.auth0.ionic など）
};

以下のリストがこれら値の意味を説明します。

```
clientID
```
と
```
clientId
```
：Auth0 アプリケーション（上記で作成したもの）で使用可能な Client Id プロパティです。
```
domain
```
：独自の Auth0 ドメインです。
```
packageIdentifier
```
：独自の Ionic アプリケーションのウィジェット ID です。上記で説明したように、これはアプリケーションの
```
config.xml
```
ファイルにあります。

次に進む前に、

YOUR_CLIENT_ID

、

YOUR_AUTH_DOMAIN

、

your.app.id

とを独自のデータに置き換えてください。

認証サービス

Auth0 アカウントを作成して、

auth.config.ts

ファイルを定義したら、Ionic アプリの認証サービスを定義する必要があります。そのようなものとして、

auth.service.ts

という名前の新しいファイルを

./src/providers/auth0/

ディレクトリに作成し、そのファイルに次のコンテンツを加えます。

import {Injectable, NgZone} from '@angular/core';
import {Storage} from '@ionic/storage';
import {Subject} from 'rxjs';
// AUTH_CONFIG、Auth0Cordova、auth0.js をインポートします
import {AUTH_CONFIG} from './auth.config';
import Auth0Cordova from '@auth0/cordova';
import * as auth0 from 'auth0-js';

@Injectable()
export class AuthService {
  Auth0 = new auth0.WebAuth(AUTH_CONFIG);
  Client = new Auth0Cordova(AUTH_CONFIG);
  accessToken: string;
  user: any;
  loggedIn: boolean;
  loading = true;
  isLoggedIn$ = new Subject();

  constructor(public zone: NgZone, private storage: Storage) {
    this.storage.get('profile').then(user => (this.user = user));
    this.storage.get('access_token').then(token => (this.accessToken = token));
    this.storage.get('expires_at').then(exp => {
      this.loggedIn = Date.now() < JSON.parse(exp);
      this.loading = false;
      this.isLoggedIn$.next(this.loggedIn);
    });
  }

  login() {
    return new Promise((resolve, reject) => {
      this.loading = true;
      const options = {
        scope: 'openid profile offline_access',
      };
      // Auth0 で認証ログインリクエスト： ログインページを開き、認証結果を取得します
      this.Client.authorize(options, (err, authResult) => {
        if (err) {
          this.loading = false;
          reject(err);
        } else {
          // アクセストークンと ID トークンを設定します
          this.storage.set('id_token', authResult.idToken);
          this.storage.set('access_token', authResult.accessToken)
            .then(() => {
              // ログイン済みに設定します
              this.loading = false;
              this.loggedIn = true;
              this.isLoggedIn$.next(this.loggedIn);
              resolve();
            });
          this.accessToken = authResult.accessToken;
          // アクセストークンの有効期限を設定します
          const expiresAt = JSON.stringify(
            authResult.expiresIn * 1000 + new Date().getTime()
          );
          this.storage.set('expires_at', expiresAt);
          // ユーザーのプロファイル情報をフェッチします
          this.Auth0.client.userInfo(this.accessToken, (err, profile) => {
            if (err) {
              throw err;
            }
            this.storage
              .set('profile', profile)
              .then(val => this.zone.run(() => (this.user = profile)));
          });
        }
      });
    });
  }

  logout() {
    this.storage.remove('profile');
    this.storage.remove('access_token');
    this.storage.remove('expires_at');
    this.storage.remove('id_token');
    this.accessToken = null;
    this.user = {};
    this.loggedIn = false;
    this.isLoggedIn$.next(this.loggedIn);
  }
}

上記のコード機能をよりよく理解するには、次の説明をお読みください。

```
accessToken
```
：これは JWT トークンで、ユーザーが Auth0 から取得します。これらトークンはユーザーを識別するために使用します。
```
user
```
：このプロパティは
```
email
```
、
```
firstname
```
、
```
lastname
```
、などのようなユーザーデータを保留します。
```
loggedIn
```
：このブール値はユーザーの認証状態を保留します。
```
isLoggedIn$
```
：これは RxJS サブジェクトです。これを
```
loggedIn
```
プロパティの最有効化バージョンとして考えてください。これはユーザーの認証状態を得るために Angular コンポーネントで使用できます。

では、上記のサービス方法を見てみましょう。

```
constructor()
```
：コンストラクターで、ユーザーが以前、認証したか否かを確認します。それを元に、
```
this.user
```
プロパティ、
```
this.accessToken
```
プロパティ、
```
this.loggedIn
```
プロパティの値を設定します。
```
login()
```
：ログイン方法では、ユーザーの認証が成功しているかそのユーザーを認証し、そのプロファイル情報をフェッチします。この情報を
```
@ionic/store
```
を介して永続記憶領域に保存し、認証状態を反映するサービスの適切なプロパティにも設定します。
```
logout()
```
：ログアウト方法では、ユーザーのすべての情報を永続記憶領域から削除し、ログアウト状態を反映するサービスのプロパティを設定します。

認証コールバック

認証後、Auth0 からのリダイレクトを処理するには、以下のように、

app.component.ts

ファイルを更新する必要があります。

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import Auth0Cordova from '@auth0/cordova';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();

      // 認証した後に、アプリにリダイレクトします
      (window as any).handleOpenURL = (url: string) => {
        Auth0Cordova.onRedirectUri(url);
      };
    });
  }
}

Ionic にオーディオプレーヤー UI を作成する

これまでは、フロントエンドやアプリケーションのユーザーインターフェイス（UI）に関係ないコードを記述してきました。このセクションでは、UI やその動作をデザインします。最終的に、アプリケーションは次のようになります。

Ionic audio player demo app UI

オーディオプレーヤー HTML

./src/pages/home/

ディレクトリ内で

home.html

ファイルを見つけます。このファイルにプレーヤーを定義する HTML を追加します。ご覧のように、スクリーンのトップにナビゲーションバーがあり、そのバーにはアプリケーションの名前とログアウトボタンがあります。このボタンはユーザーがログインしたときに、表示されます。

ヘッダーのほかに、

ion-content

のログインボタン、アプリのロゴ、メディアファイルのリストが表示されます。

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Audio Player</ion-title>
    <ion-buttons end>
      <button *ngIf="loggedIn" ion-button icon (click)="logout()">Logout</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <p *ngIf="auth.loading" text-center>Loading...</p>
  <ng-template [ngIf]="!auth.loading || !loggedIn">
    <div padding id="app-section" text-center>
      <ion-icon color="primary" name="musical-notes"></ion-icon>
      <h2 id="app-title">Audio Player</h2>
      <button outline ion-button block color="primary" *ngIf="!loggedIn" (click)="login()">Log In</button>
    </div>
  </ng-template>
  <ion-list *ngIf="files.length && loggedIn">
    <ion-list-header>Hello {{auth.user?.name}}</ion-list-header>
    <ng-container *ngFor="let file of files; let i = index">
      <ion-item text-wrap (click)="openFile(file, i)">
        <ion-icon color="primary" item-start name="musical-note"></ion-icon>{{ file.name }}
        <p item-end *ngIf="currentFile.index === i">SELECTED</p>
        <ion-icon item-end name="play" *ngIf="currentFile.index !== i"></ion-icon>
      </ion-item>
    </ng-container>
  </ion-list>
</ion-content>

Ionic アプリケーションのフッターには

ion-toolbar

が２つあります。

最初の

ion-toolbar

には、

ion-range

で作成された

seekbar

があります。これは、ユーザーが再生されるオーディオファイルの最新時刻を変更できるようにします。以下はその HTML です。

<!-- ... ion-header と ion-content ... -->
<ion-footer *ngIf="currentFile.file && loggedIn" [@showHide]="displayFooter">
 <ion-toolbar color="primary">
    <ion-range min="0" color="light" [max]="state.durationSec" [formControl]="seekbar" (ionFocus)="onSeekStart()" (ionBlur)="onSeekEnd($event)"
      name="seekbar">
      <ion-label color="light" range-left>{{ state.time }}</ion-label>
      <ion-label color="light" range-right>{{ state.duration }}</ion-label>
    </ion-range>
  </ion-toolbar>
</ion-footer>

ふたつめの

ion-toolbar

には、次のような再生コントロールの残りがあります。

<!-- ... ion-header と ion-content -->
<ion-footer *ngIf="currentFile.file && loggedIn" [@showHide]="displayFooter">
  <!-- ... シークバーコントロールはこちら-->
 <ion-toolbar color="primary" padding>
    <ion-grid>
      <ion-row align-items-center id="media-controls">
        <button clear ion-col ion-button [disabled]="isFirstPlaying()" (click)="previous()">
          <ion-icon color="light" name="skip-backward"> </ion-icon>
        </button>
        <button clear ion-col ion-button *ngIf="!state.playing" (click)="play()">
          <ion-icon color="light" name="play"></ion-icon>
        </button>
        <button clear ion-col ion-button *ngIf="!!state.playing" (click)="pause()">
          <ion-icon color="light" name="pause"></ion-icon>
        </button>
        <button clear ion-col ion-button [disabled]="isLastPlaying()" (click)="next()">
          <ion-icon color="light" name="skip-forward"></ion-icon>
        </button>
      </ion-row>
    </ion-grid>
  </ion-toolbar>
</ion-footer>

このファイルの最終バージョンはこちらをご覧ください。

オーディオプレーヤーのスタイルを設定する

アプリの外観を多少向上させるため、以下のように、

home.scss

ファイルのスタイルを設定します（このファイルは

./src/pages/home/

の下にあります）。

page-home {
  #app-section {
    #app-title {
      color: color($colors, 'primary');
      text-transform: uppercase;
    }
    ion-icon {
      font-size: 15rem;
    }
  }
  #media-controls {
    button {
      ion-icon {
        font-size: 2.5rem;
      }
    }
  }
}

オーディオプレーヤーの UI コントローラー

オーディオプレーヤーのユーザーインターフェイスをコントロールするには、次を担当するコントローラーを実装します。

アプリ―が開くと、ユーザーが認証されているか否かを確認します。
ユーザーが認証されていなければ、認証 UI が表示されます。
認証プロセスの後、モックサービスからメディアファイルがフェッチされ、オーディオプレーヤーに表示されます。
それから、ユーザーは再生、一時停止、メディアファイルの切り替えなどメディア操作が可能になります。ユーザーがログインしたりログアウトしたりできるようにもします。
ユーザーがログアウトしたら、保存スペースから認証状態が削除され、そのログイン UI が表示されます。

オーディオプレーヤーを実装するデフォルトの

HomePage

を使用しているので、

HomePage

クラス内のほとんどのロジックを実装します。次のセクションでは、次のメソッドを実装していきます。

```
constructor
```
：このメソッドは
```
HomePage
```
のインスタンスを作成し、
```
isLoggedIn
```
サブジェクトに登録する
```
login
```
：このメソッドはユーザーのログインを可能にする
```
getDocuments
```
: このメソッドは音楽ファイルを読み込む
```
presentLoading
```
：このメソッドは読み込み画面を表示する
```
ionViewWillLoad
```
：このメソッドは画面を更新するメディアイベントにリスナーを追加する
```
openFile
```
：このメソッドは音楽 URL をフェッチし、それを
```
playStream
```
にパスする
```
resetState
```
：このメソッドは現在の音楽状態をリセットする
```
playStream
```
：このメソッドはアクションが Reducer にディスパッチされるように
```
audioProvider.playStream
```
に登録する
```
pause
```
：このメソッドはユーザーが再生を一時停止できるようにする
```
play
```
：このメソッドはユーザーが再生を再度開始できるようにする
```
stop
```
：このメソッドはユーザが再生を停止できるようにする
```
next
```
：このメソッドはユーザーが次の音楽に移動できるようにする
```
previous
```
：このメソッドはユーザーが以前の音楽に移動できるようにする
```
isFirstPlaying
```
：このメソッドは[前へ] ボタンの使用を禁止する
```
isLastPlaying
```
：このメソッドは[次へ] ボタンの使用を禁止する
```
onSeekStart
```
および
```
onSeekEnd
```
：これらのメソッドはシーク機能の使用中に使用する
```
logout
```
：このメソッドはユーザーのログアウトを可能にする
```
reset
```
：このメソッドは Ionic アプリの状態をリセットする

ただし、これらメソッドの実装にフォーカスする前に、UX アプリを拡張するアニメーションを追加できます。これらアニメーションはオーディオプレーヤーが

inactive

状態や

active

状態に切り替わるときに表示されます。簡単に説明すると、ユーザーがオーディオファイルを再生し始めると、アプリはユーザーに音楽コントロールを表示します。

このためには、

./src/pages/home/home.ts

ファイルを開き、そのコードを次に置き換えます。

import {Component, ViewChild} from '@angular/core';
import {trigger, state, style, animate, transition } from '@angular/animations';
import {NavController, NavParams, Navbar, Content, LoadingController} from 'ionic-angular';
import {AudioProvider} from '../../providers/audio/audio';
import {FormControl} from '@angular/forms';
import {CANPLAY, LOADEDMETADATA, PLAYING, TIMEUPDATE, LOADSTART, RESET} from '../../providers/store/store';
import {Store} from '@ngrx/store';
import {CloudProvider} from '../../providers/cloud/cloud';
import {AuthService} from '../../providers/auth0/auth.service';
import {pluck, filter, map, distinctUntilChanged} from 'rxjs/operators';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  animations: [
    trigger('showHide', [
      state(
        'active',
        style({
          opacity: 1
        })
      ),
      state(
        'inactive',
        style({
          opacity: 0
        })
      ),
      transition('inactive => active', animate('250ms ease-in')),
      transition('active => inactive', animate('250ms ease-out'))
    ])
  ]
})
export class HomePage { }

未使用のインポートはもうすぐ必要になりますので、現時点では気にしないでください。

constructor

これから、次の3つを実行します。

オーディオプレーヤーをコントロールするのに役立つプロパティを定義する
オーディオプレーヤーが音楽を読み込んだり、認証を管理したりするときに使用するすべてのコンポーネントを挿入する
```
isLoggedIn$
```
サブジェクトに
```
subscribe
```
する

従って、

HomePage

クラスの定義を次のように更新します。

// ... ステートメントをインポートします ...

@Component({
  // ... セレクター、templateUrl、など...
})
export class HomePage {
  files: any = [];
  seekbar: FormControl = new FormControl("seekbar");
  state: any = {};
  onSeekState: boolean;
  currentFile: any = {};
  displayFooter: string = "inactive";
  loggedIn: Boolean;
  @ViewChild(Navbar) navBar: Navbar;
  @ViewChild(Content) content: Content;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public audioProvider: AudioProvider,
    public loadingCtrl: LoadingController,
    public cloudProvider: CloudProvider,
    private store: Store<any>,
    public auth: AuthService
  ) {
    this.auth.isLoggedIn$.subscribe((isLoggedIn: any) => {
      this.loggedIn = isLoggedIn;
      if (isLoggedIn) {
        this.getDocuments();
      }
    });
  }
}

getDocuments
メソッドは気にしないでください。その実装はもうすぐ行います。

Login

メソッド

それでは、ユーザーがログインできるように、次のメソッドを

HomePage

に追加します。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ... コンストラクター ...

  login() {
    this.auth.login()
      .then(() => { console.log('Successful Login'); })
      .catch(error => { console.log(error); });
  }
}

getDocuments

メソッド

では、画面で素晴らしいローダーを使って

getDocuments

メソッドを実装し（

presentLoading

メソッドを使って）、

cloudProvider

の

getFiles

メソッドを介してファイルを次のようにフェッチします。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  getDocuments() {
    let loader = this.presentLoading();
    this.cloudProvider.getFiles().subscribe(files => {
      this.files = files;
      loader.dismiss();
    });
  }

  presentLoading() {
    let loading = this.loadingCtrl.create({
      content: 'Loading Content. Please Wait...'
    });
    loading.present();
    return loading;
  }
}

ionViewWillLoad

メソッド

ご存知のように、Ionic には Angular のようにライフサイクルフックがあります。このライフサイクルフックのひとつが

ionViewWillLoad

です。このフックを使ってリスナーをメディア状態の変更に追加しますので、変更が検出されると、画面を更新できます。

リスニングのプロセスはこのライフサイクルフックのメソッド内にある NgRx ストアを使って達成されます。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド...

  ionViewWillLoad() {
    this.store.select('appState').subscribe((value: any) => {
      this.state = value.media;
    });

    // Ionic がフッターに対応するように Content Screen のサイズを変更します
    this.store
      .select('appState')
      .pipe(pluck('media', 'canplay'), filter(value => value === true))
      .subscribe(() => {
        this.displayFooter = 'active';
        this.content.resize();
      });

    // currentTime に基づいてシークバーを更新します
    this.store
      .select('appState')
      .pipe(
        pluck('media', 'timeSec'),
        filter(value => value !== undefined),
        map((value: any) => Number.parseInt(value)),
        distinctUntilChanged()
      )
      .subscribe((value: any) => {
        this.seekbar.setValue(value);
      });
  }
}

openFile

メソッド

ユーザーがメディアファイルをクリックすると、

openFile

メソッドが起動します。それから、このメソッドは選択された

file

の

url

で

playStream

メソッドを起動します。

本書では、このデータは以前に実装されたモックサービスからきます。後のアーティクルでは、バックエンド API から情報をフェッチするこのクラスをリファクターしていきます。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  openFile(file, index) {
    this.currentFile = { index, file };
    this.playStream(file.url);
  }
}

resetState

メソッド

これから実装する

playStream

メソッドはまず、

resetState

メソッドを介して現在のメディア状態をリセットする必要がありますので、次のように実装できます。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  resetState() {
    this.audioProvider.stop();
    this.store.dispatch({ type: RESET });
  }
}

このためには、

resetState

メソッドが現在実行しているメディアファイルを停止し、そのメディア状態をリセットする

RESET

アクションを送ります。

playStream

メソッド

それから、

playstream

メソッドは

AudioProvider

の

playStream

メソッドを起動します。プロバイダー上のこのメソッドは登録し、聞き始めるために使用する Observable を

canplay

、

playing

、などのようなメディアイベントに返します。

各特定のイベントを基にして、適切なペイロードでストアアクションを送ります。基本的に、これらアクションは現在の時間やメディアの期間のようなメディア情報を格納します。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  playStream(url) {
    this.resetState();
    this.audioProvider.playStream(url).subscribe(event => {
      const audioObj = event.target;

      switch (event.type) {
        case 'canplay':
          return this.store.dispatch({ type: CANPLAY, payload: { value: true } });

        case 'loadedmetadata':
          return this.store.dispatch({
            type: LOADEDMETADATA,
            payload: {
              value: true,
              data: {
                time: this.audioProvider.formatTime(
                  audioObj.duration * 1000,
                  'HH:mm:ss'
                ),
                timeSec: audioObj.duration,
                mediaType: 'mp3'
              }
            }
          });

        case 'playing':
          return this.store.dispatch({ type: PLAYING, payload: { value: true } });

        case 'pause':
          return this.store.dispatch({ type: PLAYING, payload: { value: false } });

        case 'timeupdate':
          return this.store.dispatch({
            type: TIMEUPDATE,
            payload: {
              timeSec: audioObj.currentTime,
              time: this.audioProvider.formatTime(
                audioObj.currentTime * 1000,
                'HH:mm:ss'
              )
            }
          });

        case 'loadstart':
          return this.store.dispatch({ type: LOADSTART, payload: { value: true } });
      }
    });
  }
}

pause

メソッド

playStream

メソッドが起動したら、メディア再生が始まります。そのようなものとして、ユーザーは再生を一時停止するかもしれません。そのため、次のように

pause

メソッドを実装します。

// ... ステートメントと @Component 宣言をインポートします...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  pause() {
    this.audioProvider.pause();
  }
}

play

メソッド

ユーザーがメディアを再度、再生し始めるかもしれないというのも本当です。そのため、次を追加します。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  play() {
    this.audioProvider.play();
  }
}

stop

メソッド

それから、メディアを停止するには、次のメソッドを追加します。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  stop() {
    this.audioProvider.stop();
  }
}

next

メソッド

また、ユーザーを次の音楽に移動させるために、次のメソッドを定義します。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  next() {
    let index = this.currentFile.index + 1;
    let file = this.files[index];
    this.openFile(file, index);
  }
}

previous

メソッド

同様に、以前のトラックを再生するメソッドを提供する必要があります。

// ... ステートメントと @Component 宣言をインポートします...
export class HomePage {

  // ...コンストラクターとその他のメソッド  ...

  previous() {
    let index = this.currentFile.index - 1;
    let file = this.files[index];
    this.openFile(file, index);
  }
}

isFirstPlaying

メソッドと

isLastPlaying

メソッド

それから、再生されている音楽がプレイリストの最初のトラックか、最後のトラックかを確認する２つのヘルパーメソッドが必要です。これらのメソッドを使って UI ボタンを無効にしたり有効にしたりします。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  isFirstPlaying() {
    return this.currentFile.index === 0;
  }

  isLastPlaying() {
    return this.currentFile.index === this.files.length - 1;
  }
}

onSeekStart

メソッドと

onSeekEnd

メソッド

ユーザーがシーク操作ができるようにもしたいので、ユーザーがシーク操作を始めると、

onSeekStart

メソッドを起動します。そこでは、ファイルが現在再生されているか否かを確認して、その情報を格納します。それから、オーディオファイルを一時停止します。

シーク操作が終わると、

onSeekEnd

メソッドを起動し、そこで、ユーザーが選択した時間をフェッチできます。シーク操作前にファイルが再生された場合、その再生を再開します。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  onSeekStart() {
    this.onSeekState = this.state.playing;
    if (this.onSeekState) {
      this.pause();
    }
  }

  onSeekEnd(event) {
    if (this.onSeekState) {
      this.audioProvider.seekTo(event.value);
      this.play();
    } else {
      this.audioProvider.seekTo(event.value);
    }
  }
}

logout

メソッドと

reset

メソッド

最後に、ユーザーが

logout

メソッドを介してログアウトできるようにします。それと同時に、アプリケーション全体をリセットする

reset

メソッドがあります。

// ... ステートメントと @Component 宣言をインポートします ...
export class HomePage {

  // ...コンストラクターとその他のメソッド ...

  logout() {
    this.reset();
    this.auth.logout();
  }

  reset() {
    this.resetState();
    this.currentFile = {};
    this.displayFooter = "inactive";
  }
}

AppModule

クラスを更新する

最後のステップ、アプリを初めて使うことができる前に、

app.module.ts

ファイル内で必要なライブラリすべてをインポートし始めます。

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { StoreModule } from '@ngrx/store';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { mediaStateReducer } from '../providers/store/store';
import { AudioProvider } from '../providers/audio/audio';
import { CloudProvider } from '../providers/cloud/cloud';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AuthService } from '../providers/auth0/auth.service';
import { IonicStorageModule } from '@ionic/storage';

それから、

NgModule

で必要な

declarations

、

imports

、

providers

をすべて定義して終えます。

// ... ステートメントと jwtOptionsFactory 関数をインポートします ...
@NgModule({
  declarations: [MyApp, HomePage],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    StoreModule.forRoot({
      appState: mediaStateReducer
    }),
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [
    StatusBar,
    SplashScreen,
    AudioProvider,
    CloudProvider,
    AuthService,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

Ionic オーディオプレーヤーを構築し、実行する

アプリ全体を実装した後、次の

ionic

コマンドを介して直接実行できます。

# iOS アプリの場合
ionic cordova run ios

# android アプリの場合
ionic cordova run android

“モバイルオーディオプレーヤーを @Ionicframework、@angular、#RxJS、#NgRx を使って作りました!!!”
これをツイートする

結論および次のステップ

本書では、Ionic を使ってモバイルオーディオプレーヤーを作りました。RxJS を使ってオーディオ再生機能を開発しました。そのほかに、アプリケーションの状態を管理する NgRx を使いました。また、モバイルアプリでユーザー認証を処理する Auth0 も使いました。これで、静的なオーディオコンテンツを使ったアプリケーションの初めてのバージョンを作り終えました。

次のアーティクルでは、オーディオプレーヤーに動的オーディオコンテンツを提供するために、Node.js や Google Cloud を使ってバックエンドを作ります。バックエンドをホストするサーバーを構成するときに時間をかけ過ぎないようにするため、Node.js アプリ向けのサーバーなしソリューション Web _タスク_を利用します。

本書をお楽しみいただけましたでしょうか。次回をお楽しみに！

About the author

Indermohan Singh

Mobile Developer

Indian expat living and working in Vienna, Austria. Besides programming, I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.View profile

Ionic、Angular、RxJS、and NgRxでオーディオ プレーヤーアプリを構築する

はじめに

Ionic 開発の必要条件

iOS 用ネイティブ SDK をインストールする

Android 用ネイティブ SDK をインストールする

Node.js とツールをインストールする

Ionic アプリをスキャフォールディングする

アプリケーションを実行する

プロジェクトの依存関係をインストールする

再生を管理する Ionic サービスを作成する

RxJS Observable を作成する

AudioProvider サービスを完成させる

音楽ファイルを読み取る

Ionic アプリの状態を NgRx ストアで管理する

NgRx ストアで Reducer を作成する

Ionic アプリの認証

依存関係をインストールする

Auth0 アプリケーションをセットアップする

Ionic で Auth0 を構成する

認証サービス

認証コールバック

Ionic にオーディオプレーヤー UI を作成する

オーディオプレーヤー HTML

オーディオプレーヤーのスタイルを設定する

オーディオプレーヤーの UI コントローラー

constructor

Login メソッド

getDocuments メソッド

ionViewWillLoad メソッド

openFile メソッド

resetState メソッド

playStream メソッド

pause メソッド

play メソッド

stop メソッド

next メソッド

previous メソッド

isFirstPlaying メソッドと isLastPlaying メソッド

onSeekStart メソッドと onSeekEnd メソッド

logout メソッドと reset メソッド

AppModule クラスを更新する

Ionic オーディオプレーヤーを構築し、実行する

結論および次のステップ

Indermohan Singh

Ionic、Angular、RxJS、and NgRxでオーディオプレーヤーアプリを構築する

`constructor`

`Login`
メソッド

`getDocuments`
メソッド

`ionViewWillLoad`
メソッド

`openFile`
メソッド

`resetState`
メソッド

`playStream`
メソッド

`pause`
メソッド

`play`
メソッド

`stop`
メソッド

`next`
メソッド

`previous`
メソッド

`isFirstPlaying`
メソッドと
`isLastPlaying`
メソッド

`onSeekStart`
メソッドと
`onSeekEnd`
メソッド

`logout`
メソッドと
`reset`
メソッド

`AppModule`
クラスを更新する