画像／音声ファイルを操作するAngularJSライブラリ ～ カルーセル／フルスクリーンモード／再生プレイヤー

AngularJSアプリ開発を支援する便利モジュール（9）

音声ファイルを再生する - ngAudio

　ngAudioを利用することで、音声ファイルをディレクティブの記述だけで再生できます。また、サービスを利用することで、ちょっとした再生プレイヤーを実装することも可能です。

ngAudioで生成した再生プレイヤー

　ngAudioは、Bowerを利用することで、以下のコマンドでインストールできます。

> bower install --save angular-audio

　ではまずは、音声ファイルをそのまま再生する、基本的な例を見てみます。

リスト5　audio.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）ライブラリをインポート -->
<script src="bower_components/angular-audio/app/angular.audio.js"></script>
<script src="scripts/audio.js"></script>
</head>
<body ng-controller="MyController">
<button ng-audio="sound/chime.mp3" volume="0.5" start="0.3">再生</button>
</body>
</html>

リスト6　audio.js

// （2）ngAudioモジュールへの依存関係を設定
angular.module('myApp', ['ngAudio'])
  .controller('MyController', ['$scope', function($scope) {
  }]);

　ngAudioを利用するには、ライブラリ本体（angular.audio.js）をインポートした上で（1）、アプリモジュール（myApp）からはngAudioモジュールへの依存関係を宣言します（2）。

　あとは、<button>などの要素に対してng-audio属性（ディレクティブ）を付与するだけで、ボタンクリックで音声を再生できるようになります。ng-audioディレクティブで利用できる主な属性は、以下の通りです。

ng-audioディレクティブの主な属性

属性	概要
ng-audio	音声ファイルのパス
loop	ループ回数（trueで無限）
volume	音量（0～1）
start	再生開始位置（0～1）

再生プレイヤーを実装する

　ngAudioサービスを利用することで、本節冒頭のような再生プレイヤーを実装することもできます。

リスト7　player.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-audio/app/angular.audio.js"></script>
<script src="scripts/player.js"></script>
</head>
<body ng-controller="MyController">
<div>
  <!-- （2）音声ファイルの操作-->
  <button ng-click="audio.paused ? audio.play() : audio.pause()">
    {{audio.paused ? '再生' : '一時停止'}}</button>
  <button ng-click="audio.stop()">停止</button>
  <!-- （3）音量の操作-->
  <input id="volume" type="range"
    min="0" max="1" step="0.1" ng-model="audio.volume" /><br />
  {{audio.currentTime}} sec
</div>
</body>
</html>

リスト8　player.js

// ngAudioモジュールへの依存関係を設定
angular.module('myApp', ['ngAudio'])
  .controller('MyController', ['$scope', 'ngAudio', function($scope, ngAudio) {
    // （1）音声ファイルをロード
    $scope.audio = ngAudio.load('sound/chime.mp3');
  }]);

　音声ファイルをロードするのは、ngAudioサービスのloadメソッドです（1）。loadメソッドは、戻り値として、音声ファイルを操作するためのngAudioObjectオブジェクトを返しますので、あとは、このメソッドをclickイベントリスナーに紐づけるだけです（2）。ngAudioObjectオブジェクトの主なメンバーは、以下です。

ngAudioObjectオブジェクトの主なメンバー

メンバー	概要
play()	再生
pause()	一時停止
stop()	停止
currentTime	現在の再生位置（秒）
volume	ボリューム（0～1）
paused	一時停止中であるか

　volumeプロパティなどは、（3）のようにスライダー（<input type="range">要素）に紐づけることで、スライド操作に連動してボリュームを変更できます。

まとめ

　以上、本稿では画像／音声ファイルを扱うためのウィジェットについて紹介しました。次回は、小粒ながら、アプリ開発には欠かせないイベントリスナーの設置を補助するUI Eventはじめ、入力値検証を実装するUI Validate、そして、Web Storageにデータを出し入れるngStorageなどについて紹介します。

参考資料

• 『AngularJSアプリケーションプログラミング」（技術評論社）
• 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）