音声ファイルを再生する - ngAudio
ngAudioを利用することで、音声ファイルをディレクティブの記述だけで再生できます。また、サービスを利用することで、ちょっとした再生プレイヤーを実装することも可能です。
ngAudioは、Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-audio
ではまずは、音声ファイルをそのまま再生する、基本的な例を見てみます。
<!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>
// （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 | 音声ファイルのパス |
| loop | ループ回数（trueで無限） |
| volume | 音量（0～1） |
| start | 再生開始位置（0～1） |
再生プレイヤーを実装する
ngAudioサービスを利用することで、本節冒頭のような再生プレイヤーを実装することもできます。
<!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>
// 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オブジェクトの主なメンバーは、以下です。
| メンバー | 概要 |
|---|---|
| play() | 再生 |
| pause() | 一時停止 |
| stop() | 停止 |
| currentTime | 現在の再生位置（秒） |
| volume | ボリューム（0～1） |
| paused | 一時停止中であるか |
volumeプロパティなどは、（3）のようにスライダー（<input type="range">要素）に紐づけることで、スライド操作に連動してボリュームを変更できます。
まとめ
以上、本稿では画像／音声ファイルを扱うためのウィジェットについて紹介しました。次回は、小粒ながら、アプリ開発には欠かせないイベントリスナーの設置を補助するUI Eventはじめ、入力値検証を実装するUI Validate、そして、Web Storageにデータを出し入れるngStorageなどについて紹介します。
参考資料
- 『AngularJSアプリケーションプログラミング」（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
