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

HTML5テクニカルノート

SoundJSに備わる予定のSoundクラスで外部サウンドファイルを再生する

ID: FN1301009 Technique: HTML5 and JavaScript

2013年1月づけでCreateJSサイトにつぎのリリース候補バージョン(release candidates)が公開されました。SoundJSライブラリについては、これまで使われてきたライブラリと同名のクラス(SoundJS)に替えて、Soundクラスが備わりました(図001)。また、サウンドの一時停止や再開の扱いも変わっています。そこで、SoundJSクラスが使われているスクリプトを、リリース候補バージョンのSoundJSライブラリでどのように書替えればよいのかについてご説明します。

図001■リリース候補のPreloadJSライブラリとLoadQueueクラス
図001左 図001右

01 script要素に読込むクラス

書替えのお題には、「読込んだサウンドファイルをSoundJSで再生する」のコード001を採上げます。このコードは、外部MP3ファイルを読込んで再生します。また、body要素に置いたボタン(type属性"button"のinput要素)で、一時停止やその再開ができます。書替えたscript要素全体は、後にコード001として掲げます。抜書きするスクリプトの行番号はこのコード001にもとづきます。

まずは、script要素に読込むJavaScript(JS)ファイルです。クラスはSoundJSを、Soundに差替えます(第9行目)。また、このCreateJSのバージョンではイベントをEventDispatcherクラスが扱うため、そのJSファイルも読込みます(第4行目)。そして、外部MP3サウンドファイルを読込むために使うPreloadJSも、新たなクラスLoadQueueに差替えます(第6行目)。

  1. <script src="easeljs/events/EventDispatcher.js"></script>
    <!--
    <script src="preloadjs/PreloadJS.js"></script>
    -->
  1. <script src="preloadjs/LoadQueue.js"></script>
    <!--
    <script src="soundjs/SoundJS.js"></script>
    -->
  1. <script src="soundjs/Sound.js"></script>

なお、ひとつひとつのクラスのJSファイルでなく、コンパクト(min)版をscript要素で読込んでいる場合には、easeljsとpreloadjs、およびsoundjsのバージョン(NEXTの部分)だけ変えれば、その中でクラスは差替わります。

<script src="lib/easeljs-NEXT.min.js"></script>
<script src="lib/preloadjs-NEXT.min.js"></script>
<script src="lib/soundjs-NEXT.min.js"></script>


02 LoadQueueクラスを使う

つぎに、JavaScriptコードで外部MP3サウンドファイルの読込みに使うPreloadJSクラスを使ったステートメントは、新たなLoadQueueクラスの仕様にしたがって書替えます。

コンストラクタは、関数をLoadQueue()に直します(第15行目)。また、LoadQueue.loadFile()メソッドの引数に渡すObjectにidプロパティの値(第18行目)は、イベントハンドラが受取るイベントオブジェクトのitemプロパティに備わるオブジェクトからidプロパティで取出します(第23行目)。新たなLoadQueueクラスを使った外部ファイルの読込みついて詳しくは、「PreloadJSに備わる予定のLoadQueueクラスで外部画像ファイルの読込みを待つ」をお読みください。

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

そして、クラスSoundJSは新たなSoundに書替えます(第16行目)。サウンドの再生や停止、およびその再開の処理は、次項で修正します。


03 Soundクラスを使う

静的メソッドSoundJS.play()は、同じく静的なSound.play()メソッドに替えます。引数は、前のメソッドと変わらず、再生するサウンドのパスもしくは識別子(id)を渡します。

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

Sound.play()メソッドの戻り値は、サウンドをコントロールするSoundInstanceオブジェクトです。新たなSoundクラスでは、SoundJSクラスとは異なり、一時停止や再開はこのSoundInstanceオブジェクトに対して行うようになりました。したがって、戻り値は変数(instance)に取っておきます(第27行目)。

サウンドの一時停止や再開は、ボタンのイベントハンドラに定める関数(pauseSound()およびresumeSound())で扱います。そのとき、SoundInstanceオブジェクトが求められます。そこで、Sound.play()メソッドの戻り値(instance)は、ボタン(control)に変数(sound)で定めました(第28行目)。したがって、各ハンドラはボタンの変数からSoundInstanceオブジェクト(instance)を取出し(第32および第38行目)、それぞれSoundInstance.pause()とSoundInstance.resume()メソッドでサウンドを一時停止(第33行目)または再開(第39行目)します。

  1. function startSound(sound) {
      // SoundJS.play(sound);
  2.   var instance = Sound.play(sound);
  3.   control.sound = instance;
  4.   pauseNext();
  5. }
  6. function pauseSound(eventObject) {
  7.   var instance = this.sound;
      // SoundJS.pause(this.sound);
  8.   instance.pause();
  9.   control.onclick = resumeSound;
  1. }
  2. function resumeSound(eventObject) {
  3.   var instance = this.sound;
      // SoundJS.resume(this.sound);
  4.   instance.resume();
  5.   pauseNext();
  6. }
  7. function pauseNext() {
  8.   control.onclick = pauseSound;
  1. }

書替えたscript要素の全体はつぎのコード001のとおりです。これで、リリース候補のCreateJSのライブラリでとくに問題なく、外部MP3ファイルを読込んで再生し、ドキュメントに加えられたボタンでサウンドを一時停止したり再開することができます。

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

04 名前空間を加える

コード001で取りあえずは動きました。けれど、それだけで済まさず、来るべきスクリプティングのスタイルに装いを変えましょう。手始めは、名前空間です。すでにcreatejsという名前空間がCreateJS Suiteのクラスには加えられています。大規模な開発や複数のライブラリを使う場合に備えて、名前空間を添えることにします。そこで、名前空間を省くscript要素は除きます。

<!--
<script>
var createjs = window;
</script>
-->

そして、CreateJSのクラスの参照には、すべて名前空間createjsを加えます。今回のスクリプトでは、インスタンスを作成するステートメント(第4および第16行目)とSoundクラスへの参照(第5行目)が書替わります。

  1. function initialize() {
      // var loader = new LoadQueue(false);
  2.   var loader = new createjs.LoadQueue(false);
      // loader.installPlugin(Sound);
  3.   loader.installPlugin(createjs.Sound);
  4.   loader.onFileLoad = soundLoaded;
  5.   loader.loadFile({src:file, id:"music"});
  6.   control = document.getElementById("control");
  7.   control.value = "読込み中";
  8. }
  1. function startSound(sound) {
      // var instance = Sound.play(sound);
  2.   var instance = createjs.Sound.play(sound);
  3.   control.sound = instance;
  4.   pauseNext();
  5. }

05 イベントリスナーを使う

リリース候補のバージョンでは、EaselJSライブラリにEventDispatcherクラスが加わることも、大きな変更のひとつです。イベントが起こったときに呼出す関数は、EventDispatcher.addEventListener()メソッドでリスナーに加えます。ファイルをひとつロードし終えたというイベントは、文字列"fileload"で定めます。

オブジェクト.addEventListener(イベント, 関数)
  1. function initialize() {
  2.   var loader = new createjs.LoadQueue(false);
  3.   loader.installPlugin(createjs.Sound);
      // loader.onFileLoad = soundLoaded;
  4.   loader.addEventListener("fileload", soundLoaded);
  5.   loader.loadFile({src:file, id:"music"});
  6.   control = document.getElementById("control");
  7.   control.value = "読込み中";
  8. }
  9. function soundLoaded(eventObject) {
  10.   var id = eventObject.item.id;
  11.   startSound(id);
  12. }

前掲コード001に名前空間とイベントリスナーを加えたJavaScriptコードが。つぎのコード002です。なお、本稿はリリース候補のバージョンにもとづきますので、正規公開までには仕様や実装が変わる場合もあります。

コード002■名前空間とイベントリスナーを使ったSoundJSライブラリによるサウンドファイルの再生・一時停止・再開
  1. var file = "sounds/music.mp3";
  2. var control;
  3. function initialize() {
  4.   var loader = new createjs.LoadQueue(false);
  5.   loader.installPlugin(createjs.Sound);
  6.   loader.addEventListener("fileload", soundLoaded);
  7.   loader.loadFile({src:file, id:"music"});
  8.   control = document.getElementById("control");
  9.   control.value = "読込み中";
  10. }
  11. function soundLoaded(eventObject) {
  12.   var id = eventObject.item.id;
  13.   startSound(id);
  14. }
  15. function startSound(sound) {
  16.   var instance = createjs.Sound.play(sound);
  17.   control.sound = instance;
  18.   pauseNext();
  19. }
  20. function pauseSound(eventObject) {
  21.   var instance = this.sound;
  22.   instance.pause();
  23.   control.onclick = resumeSound;
  24.   control.value = "再生";
  25. }
  26. function resumeSound(eventObject) {
  27.   var instance = this.sound;
  28.   instance.resume();
  29.   pauseNext();
  30. }
  31. function pauseNext() {
  32.   control.onclick = pauseSound;
  33.   control.value = "一時停止";
  34. }

作成者: 野中文雄
作成日: 2013年1月24日
Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.