サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

読込んだサウンドファイルをSoundJSで再生する

ID: FN1209007 Technique: HTML5 and JavaScript

PreloadJS.installPlugin()メソッド
文法 PreloadJSオブジェクト.installPlugin(plugin)
概要

プラグインを登録する。ロードの種類(サウンドやイメージなど)、あるいは拡張子(pngやmp3など)ごとに、ひとつのプラグインを定める。

プラグインを定めるクラスは、プロパティとしてcallbackとtypes、およびextensionsが含まれたオブジェクトを返す。プロパティtypesとextensionsは、それぞれロードの種類と拡張子を文字列エレメントとして含む配列。たとえば、SoundJSでは、typesが["sound"]、extensionsは["mp3", "ogg", "wav"]という配列をもつ。
引数

plugin − インストールするプラグインを定めるFunctionオブジェクト(クラス)。
戻り値 なし。
SoundJS.play()メソッド
文法 SoundJS.play(value, interrupt, delay, offset, loop, volume, pan)
概要

[静的] サウンドを再生し、コントロールするSoundInstanceオブジェクトを返す。サウンドが再生できない場合でも、SoundInstanceオブジェクトは返される。ただし、そのSoundInstance.playStateプロパティの値がSoundJS.PLAY_FAILEDになる。

なお、サウンドが再生できなくても、SoundJS.play()メソッドは呼出せる。再生できないのは、チャネルが足りないことによる場合もあるため。
引数

value − 再生するサウンドのパス(src)または識別子(id)を示す文字列。

interrupt − 同じサウンドを再生している別インスタンスを止めるかどうか決める文字列。SoundJS定数で定める(表001)。

表001■再生中のインスタンスの扱いを定めるSoundJS定数
マウスイベント マウス操作
INTERRUPT_ANY 再生中のインスタンスはすべて止める
INTERRUPT_EARLY 再生中の最初のインスタンスを止める
INTERRUPT_LATE 再生中の最後のインスタンスを止める
INTERRUPT_NONE 再生中のインスタンスは止めない(デフォルト)

delay − サウンドの再生が始まるまでの待ち時間を定めるミリ秒数。デフォルト値は0。

offset − サウンドの再生開始位置を定めるミリ秒数。デフォルト値は0。

loop − サウンドが最後まで再生されたとき、初めに戻って繰返す回数。デフォルト値は0で、繰返さない。-1を定めると、繰返し続ける。

volume − サウンドの音量を定める0から1(デフォルト値)までの数値。

pan − サウンドのパンがサポートされるとき、その低位を定める-1から1までの数値。-1が左で、1が右を示す。デフォルト値は0。
戻り値 コントロールするSoundInstanceオブジェクト。
SoundJS.pause()メソッド
文法 SoundJS.pause(id)
概要

[静的] すべてのインスタンスを一時停止する。
引数

id − コントロールするサウンドを定めた識別子(id)。
戻り値 コントロールするSoundInstanceオブジェクト。
SoundJS.resume()メソッド
文法 SoundJS.resume(id)
概要

[静的] すべてのインスタンスを再開する。SoundJS.pause()メソッドの呼出しにより一時停止していたインスタンスが再開される。
引数

id − コントロールするサウンドを定めた識別子(id)。
戻り値 コントロールするSoundInstanceオブジェクト。

説明

CreateJS SuiteのSoundJSクラスを使うと、さまざまな種類のサウンドが再生できます。外部のサウンドファイルを読込むには、PreloadJSクラスが使えます。PreloadJSクラスでサウンドファイルをロードする手順は、画像など他の形式のデータの読込み方と基本的に同じです。詳しくは、「PreloadJSで外部画像ファイルの読込みを待つ」をお読みください。

ただし、SoundJSクラスが扱うサウンドのデータ形式はいくつかあり、それぞれについて異なるプラグインを定めなければなりません。そこで、サウンドファイルを読込むときに、PreloadJS.installPlugin()メソッドによりプラグインを登録します。メソッドの引数には、読込んだデータを扱うクラスが渡されます。ここで用いるのはSoundJSですから、このクラスそのものを引数に定めます。

PreloadJSオブジェクト.installPlugin(SoundJS)

読込んだサウンドを再生するのは、静的メソッドSoundJS.play()です。引数には、再生するサウンドのパスもしくは識別子(id)を渡します。なお、SoundJSクラスは、静的なプロパティとメソッドから成立ちます。

SoundJS.play(サウンドの指定)

SoundJSクラスは、すべてのサウンドをまとめて操作します。ひとつひとつのサウンドはSoundInstanceオブジェクトとして扱われ、SoundJS.play()メソッドが返す値です。

再生されているサウンドの一時停止とその再開には、それぞれ静的メソッドSoundJS.pause()とUSoundJS.resume()を呼出します。引数はいずれも、再生するサウンドを定める識別子です(SoundJS.play()メソッドの第1引数と同じ)。


例

HTMLドキュメントと同じ場所のフォルダ(sounds)に納めたMP3サウンドファイル(music.mp3)を、読込んで再生します。body要素にはinput要素のボタンを置き(図001)、そのonLoadハンドラで初期設定の関数(initialize())を呼出します。なお、body要素には、JavaScriptで取得するためのid属性(control)が定めてあります。

図001■body要素にはinput要素のボタンを置く
図001

<body onLoad="initialize()">
<input type="button" value="準備中" id="control">
</body>

script要素で読込むJavaScript(JS)ファイルは、PreloadJSとSoundJSからつぎの6つのクラスになります。Canvasはとくに使いませんので、EaselJSは要りません。なお、行番号は、後にscript要素全体を掲げるコード001にもとづきます。

  1. <script src="preloadjs/AbstractLoader.js"></script>
  2. <script src="preloadjs/PreloadJS.js"></script>
  3. <script src="preloadjs/TagLoader.js"></script>
  4. <script src="preloadjs/XHRLoader.js"></script>
  5. <script src="soundjs/SoundJS.js"></script>
  6. <script src="soundjs/HTMLAudioPlugin.js"></script>

まず、ロードしたMP3サウンドファイルを再生する処理です。初期設定の関数(initialize())は、PreloadJSインスタンス(loader)にPreloadJS.installPlugin()メソッドでプラグインを登録してから、AbstractLoader.onFileLoadイベントにハンドラ(soundLoaded())を定めたうえで、サウンドファイルを読込みます(第14〜17行目)。PreloadJS.loadFile()メソッドの引数に渡すオブジェクトには、ファイルのパス(src)と併せて、識別子(id)も定めました(第17行目)。

ファイルのロードが済んで呼出されるハンドラ(soundLoaded())は、引数に受取ったイベントオブジェクト(eventObject)からサウンドファイルの識別子(id)を取出し、サウンドを再生する関数(startSound())の引数に渡して呼出します(第22〜23行目)。そして、サウンド再生の関数(startSound())は、引数の識別子(sound)をそのままSoundJS.play()メソッドに渡して、サウンドの再生が始まります(第27行目)。

  1. var file = "sounds/music.mp3";
  1. function initialize() {
  2.   var loader = new PreloadJS(false);
  3.   loader.installPlugin(SoundJS);
  4.   loader.onFileLoad = soundLoaded;
  5.   loader.loadFile({src:file, id:"music"});
  1. }
  2. function soundLoaded(eventObject) {
  3.   var id = eventObject.id;
  4.   startSound(id);
  1. }
  2. function startSound(sound) {
  3.   SoundJS.play(sound);
  1. }

つぎに、再生されたサウンドを一時停止したり、再開する処理です。前述のとおり、SoundJS.pause()とSoundJS.resume()メソッドには、いずれも引数としてサウンドの識別子が要ります。そこで、その値(id)は、ボタンの参照(control)に変数(sound)として定めました(第22および第24行目)。

サウンドを再生する関数(startSound())は、別に定めた関数(pauseNext())の呼出しにより、ボタンのonclickイベントに一時停止の関数(pauseSound())をハンドラとして定めます(第28行目)。ボタンをクリックするとハンドラが呼出されて、SoundJS.pause()メソッドで一時停止するとともに、ボタンのonclickイベントのハンドラを再開の関数(resumeSound())に書替えます(第31〜32行目)。

サウンド再開のハンドラ(resumeSound())は、SoundJS.resume()メソッドでサウンドの続きを再生するとともに、ボタンクリックのハンドラを一時停止の関数(pauseSound())に戻します(第36〜37行目)。なお、SoundJS.pause()とSoundJS.resume()メソッドを呼出すときには、前述のとおりボタンの変数(sound)に定めたサウンドの識別子を引数に用いています(第31および第36行目)。

  1. var control;
  2. function initialize() {
  1.   control = document.getElementById("control");
  1. }
  1. function soundLoaded(eventObject) {
  2.   var id = eventObject.id;
  3.   startSound(id);
  4.   control.sound = id;
  5. }
  6. function startSound(sound) {
  7.   SoundJS.play(sound);
  8.   pauseNext();
  9. }
  10. function pauseSound(eventObject) {
  11.   SoundJS.pause(this.sound);
  12.   control.onclick = resumeSound;
  1. }
  2. function resumeSound(eventObject) {
  3.   SoundJS.resume(this.sound);
  4.   pauseNext();
  5. }
  6. function pauseNext() {
  7.   control.onclick = pauseSound;
  1. }

上述の組立てで書き上がったscript要素全体は、以下のコード001のとおりです。サウンドの読込み・再生・一時停止の状況がわかるように、ボタンのラベルにテキストを加えています(第19、第33および第41行目)。SoundJS.play()メソッドの呼出しでループ(第5引数)を定めていませんので、サウンドが再生し終わると一時停止と再開のボタンは効果がなくなります。

コード001■ロードしたMP3サウンドファイルを再生・一時停止・再開する
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="preloadjs/AbstractLoader.js"></script>
  5. <script src="preloadjs/PreloadJS.js"></script>
  6. <script src="preloadjs/TagLoader.js"></script>
  7. <script src="preloadjs/XHRLoader.js"></script>
  8. <script src="soundjs/SoundJS.js"></script>
  9. <script src="soundjs/HTMLAudioPlugin.js"></script>
  10. <script>
  11. var file = "sounds/music.mp3";
  12. var control;
  13. function initialize() {
  14.   var loader = new PreloadJS(false);
  15.   loader.installPlugin(SoundJS);
  16.   loader.onFileLoad = soundLoaded;
  17.   loader.loadFile({src:file, id:"music"});
  18.   control = document.getElementById("control");
  19.   control.value = "読込み中";
  20. }
  21. function soundLoaded(eventObject) {
  22.   var id = eventObject.id;
  23.   startSound(id);
  24.   control.sound = id;
  25. }
  26. function startSound(sound) {
  27.   SoundJS.play(sound);
  28.   pauseNext();
  29. }
  30. function pauseSound(eventObject) {
  31.   SoundJS.pause(this.sound);
  32.   control.onclick = resumeSound;
  33.   control.value = "再生";
  34. }
  35. function resumeSound(eventObject) {
  36.   SoundJS.resume(this.sound);
  37.   pauseNext();
  38. }
  39. function pauseNext() {
  40.   control.onclick = pauseSound;
  41.   control.value = "一時停止";
  42. }
  43. </script>

確認されている問題

SoundJS.play()メソッドの呼出しによりつくられた(戻り値の)SoundInstanceオブジェクトは、サウンドが再生し終わってもメモリに残ったまま消えません[*1]。ですから、同じサウンドを改めて再生するとき、SoundJS.play()メソッドを呼出すことは避けましょう。もう一度再生したいサウンドは、SoundJS.play()メソッドの戻り値からとっておき、SoundInstance.play()メソッドを呼出せばインスタンスが使い回せます。

[*1] CreateJS Supportにおける議論(英語)として、「How to play the finished sound again?」をご参照ください。

作成者: 野中文雄
作成日: 2012年9月14日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.