HTML5テクニカルノート

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

ID: FN1604002
Technique: HTML5 / JavaScript
Library: SoundJS 0.6.2

SoundJSで外部サウンドファイルを読み込んで再生し、一時停止や再開するといった基本的な操作に用いられるプロパティとメソッドについて解説します。また、それらを使ったサンプルのコードも掲げました。

Sound.play()メソッド

文法 Sound.play(src:String, [options:Object | PlayPropsConfig]):AbstractSoundInstance

概要

[静的] サウンドを再生し、操作するAbstractSoundInstanceオブジェクトを返す。サウンドが再生できない場合でも、AbstractSoundInstanceオブジェクトは戻り値となる。ただし、そのAbstractSoundInstance.playStateプロパティの値にSound.PLAY_FAILEDが与えられる。

なお、サウンドが再生できなくても、AbstractSoundInstance.play()メソッドは呼出せる。再生できないのは、チャネルが足りないことによるのかもしれないためである。引数srcの拡張子やプラグインが扱えない場合には、デフォルトのAbstractSoundInstanceオブジェクトが返される。したがって、音が出なくても、再生のエラーにはならない。

引数

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

options －再生オプションを定めるPlayPropsConfigまたは準じたプロパティが与えられたオブジェクト(表001)。SoundJS 0.6.2では、第2引数以降に8つの引数としてこれらのオプション値が渡せる。ただし、将来のバージョンでは、第2引数のオブジェクトだけになる。

表001■PlayPropsConfigクラスのプロパティ

プロパティ	オプション
interrupt:String	同じサウンドを再生している別インスタンスを止めるかどうか決める文字列。Sound定数で定める。
delay:Number	再生を始めるまでに待つミリ秒数。
offset:Number	サウンドの再生開始位置を定めるミリ秒数。
loop:Number	再生の繰り返し回数を定める数値。デフォルト値の0は繰り返さない。-1は繰り返し続ける。
volume:Number	サウンドの音量を定める0から1(デフォルト値)までの数値。
pan:Number	ンドのパンがサポートされるとき、その定位を定める-1(左)から1(右)までの数値(デフォルト値は0)。
startTime:Number	AudioSpriteインスタンスをつくるときに再生開始位置を定めるミリ秒数。
duration:Number	AudioSpriteインスタンスをつくるときに総再生時間を定めるミリ秒数。

戻り値 操作するAbstractSoundInstanceオブジェクト。

Sound.registerSound()メソッド

文法 Sound.registerSound(src:String | Object, [id:String], [data:Number | Object], [basePath:String], [defaultPlayProps:Object | PlayPropsConfig]):Object

概要

[静的] 読み込むサウンドファイルを、後で再生するためにSoundクラスに登録する。PreloadJSでサウンドファイルを読み込むと、このメソッドは自動的に呼び出される。再生するすべてのサウンドは、このメソッドで登録しておけば、再生が準備され読み込みも行われる。Soundクラスは必要に応じてファイルをロードする。

引数

src －再生するサウンドのパスを示す文字列、またはパスを値に含むオブジェクト。オブジェクトはsrcプロパティにパスの文字列を定めるか、拡張子をプロパティとしてそれぞれにパスを与える。

id －再生するサウンドを示すために定める一意の文字列。引数srcにオブジェクトで拡張子ごとに異なるパスを与えたときは、この引数の文字列によりまとめて扱うことができる。

data －項目に応じて用いられ、あるいは加えられるデータ。AbstractSoundInstanceオブジェクトではチャネル数。

basePath －読み込むsrcの前に加えられるパスの文字列。

defaultPlayProps －デフォルトの再生オプションを定めるPlayPropsConfigまたは準じたプロパティが与えられたオブジェクト(前掲表001参照)。

戻り値 受け取ったサウンドを示すオブジェクト。パスが正しく読み込めなかったときや、プラグインが初期化できなければ値はfalseとなる。すでに読み込まれたときはtrueを返す。

AbstractSoundInstance.pausedプロパティ

文法 AbstractSoundInstanceオブジェクト.paused:Boolean

プロパティ値 AbstractSoundInstanceオブジェクトが一時停止しているかどうかを示すブール(論理)値。

AbstractSoundInstance.play()メソッド

文法 AbstractSoundInstanceオブジェクト.play([playProps:Object | PlayPropsConfig]):AbstractSoundInstance

概要

AbstractSoundInstanceオブジェクトのサウンドを再生する。

引数

playProps －再生オプションを定めるPlayPropsConfigまたは準じたプロパティが与えられたオブジェクト(前掲表001参照)。SoundJS 0.6.2では、6つの引数としてこれらのオプション値が渡せる。ただし、将来のバージョンでは、第1引数のオブジェクトだけになる。

戻り値 操作するAbstractSoundInstanceオブジェクト。

AbstractSoundInstance.stop()メソッド

文法 AbstractSoundInstanceオブジェクト.play([playProps:Object | PlayPropsConfig]):AbstractSoundInstance

概要

AbstractSoundInstanceオブジェクトのサウンドを停止する。再生位置は初めに戻る。

引数

なし。

戻り値 操作するAbstractSoundInstanceオブジェクト。

説明

CreateJS SuiteのSoundJSを使うと、さまざまな種類のサウンドが再生できます。外部のサウンドファイルを読み込んで再生できるようにするには、静的メソッドSound.registerSound()を用います。第1引数には、読み込むサウンドファイルのパスを渡します。パスの文字列そのままてもよいですし、オブジェクトで与えてプロパティscrにパスの文字列を値に定めることもできます。さらに、オブジェクトのプロパティを拡張子名にすれば、場合に応じて再生するサウンドの形式が切り替えられます。このときは、メソッドの第2引数にサウンドの識別子を文字列で与えるのがよいでしょう。


createjs.Sound.registerSound("sounds/mySound.mp3");
createjs.Sound.registerSound({src:"sounds/mySound.mp3"});
createjs.Sound.registerSound({mp3:"sounds/mySound.mp3, "ogg:"sounds/mySound.ogg"}, "myID");

Sound.registerSound()メソッドで登録されたサウンドファイルを読み込み終えると、SoundクラスにSound.fileloadイベントが起こります。サウンドの再生は、そのイベントを確かめたうえで行わなければなりません。Soundクラスのメソッドはすべて静的ですので、イベントリスナーはSound.addEventListener()メソッドで加えます。リスナー関数の引数に渡されるイベントオブジェクトのsrcプロパティがサウンドを示しますので、Sound.play()メソッドの引数に渡して呼び出せば読み込んだサウンドは再生されます。なお、Sound.addEventListener()メソッドは、再生したAbstractSoundInstanceオブジェクトを返します。このインスタンスはサウンドのコントロールをするとき参照しますので、変数に入れておくとよいでしょう。


var instance;
createjs.Sound.addEventListener("fileload", soundLoaded);
function soundLoaded(eventObject) {
	var id = eventObject.src;
	instance = createjs.Sound.play(id);
}

再生しているサウンドの一時停止とその再開は、AbstractSoundInstanceオブジェクトのAbstractSoundInstance.pausedプロパティをtrueまたはfalseにすることで切り替えます。AbstractSoundInstance.stop()メソッドを呼び出すと、再生位置は初めに戻り、AbstractSoundInstance.pausedプロパティの値はfalseになります。改めて再生するには、そのAbstractSoundInstanceオブジェクトに対して、AbstractSoundInstance.play()メソッドを呼び出します。

例

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

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


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

<script>要素にはSoundJSライブラリのJavaScript(JS)ファイルを、つぎのようにCDNから読み込みます。Canvasを使った描画はしないので、EaselJSは要りません。


<script src="https://code.createjs.com/soundjs-0.6.2.min.js"></script>

まず、ロードしたMP3サウンドファイルを再生する処理です。初期設定の関数(initialize())は、Sound.registerSound()メソッドに読み込むサウンドファイル(file)を登録するとともに、ロードし終えたときのSound.fileloadイベントにSound.addEventListener()メソッドでリスナー関数(soundLoaded())を加えます。呼び出されたリスナー関数は、引数のイベントオブジェクトのsrcプロパティから取り出したサウンドをSound.play()メソッドに渡して呼び出すことで、サウンドが再生されます。メソッドの戻り値のAbstractSoundInstanceオブジェクトは変数(instance)に納めました。


var file = "sounds/music.mp3";

var instance;
function initialize() {
	createjs.Sound.addEventListener("fileload", soundLoaded);
	createjs.Sound.registerSound(file);

}
function soundLoaded(eventObject) {
	var id = eventObject.src;
	startSound(id);
}
function startSound(sound) {
	instance = createjs.Sound.play(sound);

}

つぎに、再生されたサウンドを一時停止したり、再開する関数(pauseSound()とresumeSound())はつぎのように定めます。サウンドの一時停止と再開は、AbstractSoundInstance.pausedプロパティのブール値を切り替えます。ボタンの要素(id属性"control")ひとつでこの操作を行うため、onclickクリックイベントハンドラもそれぞれの関数で置き替えました。


var control;

function initialize() {

	control = document.getElementById("control");

}
function pauseSound(eventObject) {
	instance.paused = true;
	control.onclick = resumeSound;

}
function resumeSound(eventObject) {
	instance.paused = false;
	control.onclick = pauseSound;

}

そして、サウンドが再生し終えたら、また頭から再生できるようにします。サウンドが終わるとAbstractSoundInstance.completeイベントが起こるので、初めに再生するときEventDispatcher.addEventListener()メソッドでリスナー関数(resetSound())を加えました。この関数はEventDispatcher.removeEventListener()メソッドでイベントリスナーを除くとともに、ボタンのonclickクリックイベントハンドラを再生し直しの関数(restartSound())に置き替えます。

再生し直しは、サウンドのロードが済んでいるのでAbstractSoundInstance.play()メソッドを呼び出します。併せて、再生の終わりを待つイベントリスナーとボタンクリックで一時停止させるイベントハンドラを定めました。


function startSound(sound) {

	instance.addEventListener("complete", resetSound);

}

function resetSound(eventObject) {
	instance.removeEventListener("complete", resetSound);
	control.onclick = restartSound;

}
function restartSound(eventObject) {
	instance.play();
	instance.addEventListener("complete", resetSound);
	control.onclick = pauseSound;
}

これで外部ファイルからサウンドを読み込んで、ボタンひとつで一時停止と再開および改めて再生できます。つぎのコード001にスクリプトをまとめました。ボタンの機能がわかるように、表示するテキスト(valueプロパティ値)も変えました。なお、動きが確かめやすいように、後にサンプル001としてjsdo.itのコードを掲げてあります。

コード001■外部から読み込んだサウンドをボタンで一時停止および再生する


var file = "sounds/music.mp3";
var control;
var instance;
function initialize() {
	createjs.Sound.addEventListener("fileload", soundLoaded);
	createjs.Sound.registerSound(file);
	control = document.getElementById("control");
	control.value = "読込み中";
}
function soundLoaded(eventObject) {
	var id = eventObject.src;
	startSound(id);
}
function startSound(sound) {
	instance = createjs.Sound.play(sound);
	instance.addEventListener("complete", resetSound);
	pauseNext();
}
function pauseSound(eventObject) {
	instance.paused = true;
	control.onclick = resumeSound;
	control.value = "  再生  ";
}
function resumeSound(eventObject) {
	instance.paused = false;
	pauseNext();
}
function resetSound(eventObject) {
	instance.removeEventListener("complete", resetSound);
	control.onclick = restartSound;
	control.value = "  再生  ";
}
function restartSound(eventObject) {
	instance.play();
	instance.addEventListener("complete", resetSound);
	pauseNext();
}
function pauseNext() {
	control.onclick = pauseSound;
	control.value = "一時停止";
}

サンプル001■SoundJS 0.6.2: Playing a sound simply

SoundJS 0.6.0以前との違い

SoundJS 0.6.0以前はサウンドの一時停止と再開には、それぞれpause()とresume()というメソッドが備わっていました。SoundJS 0.6.0でAbstractSoundInstance.pausedプロパティが新たに加わり、両メソッドは0.6.1で除かれています。

作成者: 野中文雄
作成日: 2016年4月7日 FN1209007「読込んだサウンドファイルをSoundJSで再生する」をSoundJS 0.6.2に応じて全面改訂。