SoundJS – nackpan Blog

CreateJSを学びなおす

以前、Web上で「語学学習支援プレイヤー(Repete)」の雰囲気を伝えるためのデモを作成するためにCreateJSを学びました。
2013年9月ごろです。
アプリの「語学学習支援プレイヤー(Repete)」は、自動で無音を検知します。デモでは雰囲気を伝えれば良いということで、あらかじめ定めておいた読み上げ文とあらかじめ決められた秒数を用い、再生・ポーズ・再開をおこないました。
いったんは、アップしたものの、ブラウザによっては音割れを起こしているものがあって困りました。メンテしていくのが大変かつ広報効果があまりなかったので、結局デモは取り下げました。

それ以来、iOSアプリ開発にかかりきりで、CreateJSのアップデートを追っていなかったのですが、昨日の記事（SoundJSを使った音楽の再生）を書くために現在のCreateJSを調べました。

2013年9月からやっていない人が追いつくために見たサイト

公式サイト

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
久しぶりに見ると、公式サイトもすっかりリニューアルされていました
（2014年12月にリニューアル）
ドキュメント、デモが充実している

CreateJSのブログ

CreateJS Blog
ブログを読むと、アップデート内容をたどることができます

CreateJSのGitHub

CreateJS · GitHub
CreateJSのGitHub
各ライブラリのVersions.txtにバージョンごとの機能変更がこまかく記されています

野中文雄さんの記事

F-site | CreateJSの2014年12月12日および2015年5月21日の改訂のまとめ
野中文雄さんによるCreateJSの改訂状況のまとめ
日本語による情報。
このページを見ると、CreateJSの変化がわかります
FN1412007 | CreateJS 14/12/12 : getter/setterプロパティを実装する | HTML5 : テクニカルノート
SoundJS 0.6.0で、かなりgetter/setterプロパティが採り入れられています
最新のCreateJSを取り巻く環境にキャッチアップする | CreateJSのアップデートとFlash Professional CC 2015のHTML5 Canvasパブリッシュ | CreateJS勉強会 (第6回)
2015年9月に公開された記事。現在のCreateJS。

応用・実践編

gskinner lab
CreateJSの作者G-.Skinnerのラボ。

ICS LAB – HTML5/WebGL/Flash開発者の必読メディア
ICS LABのサイトで実践的なCreateJSの使い方が記されています
HTML5の音声ファイル最適化技術オーディオスプライトとは？―CreateJS勉強会/鹿野発表資料 – ICS LAB
複数のオーディオファイルを一つにまとめて読み込み時間を短縮する方法が紹介されています

[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。(SoundJS ver 0.6.1)

以前、
[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。 | nackpan Blog
という記事を書きました。
SoundJS ver0.5.0(2013年9月)の時代のもので、2015年9月現在CreateJSはアップデートしてサイトもリニューアルされたので、記事中のリンク先が切れているものが多いです。
そこで、SoundJS ver0.6.1(2015年5月リリース)にアップデートした記事を書きました。

SoundJS | A JavaScript library that lets you easily work with HTML5 audio.

CreateJSの4種のスイートのひとつ、SoundJSを使って音をあつかいます。

まずは音を出してみる

ファイル構成

index.htm

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>音を鳴らす</head>
<body>
    <script type="text/javascript" src="https://code.createjs.com/soundjs-0.6.1.min.js"></script>
    <script type="text/javascript" src="js/playSound.js"></script>
</body>
</html>

playSound.js

(function (window){
    
    init();
    
    function init() {
        //オーディオファイルのロードが終了したならloadHandlerが呼ばれる
        createjs.Sound.addEventListener("fileload", loadHandler);
        //オーディオファイルを登録
        createjs.Sound.registerSound( "assets/sound.mp3", "sound01");
    }
    
    function loadHandler(event)
    {
        //音を出す
        createjs.Sound.play("sound01");
    }   
      
}(window));

これで、音が鳴ります。

playボタンとpauseボタンをつくろう

playボタンを押すと音が出て、pauseボタンで止まる。そこでplayボタンを押すと続きから再生される。というのをやってみます。

SoundJS v0.6.1 API Documentation : SoundJS

SoundJSのドキュメントです。
こちらに、サウンドをコントロールするのにAbstractSoundInstanceクラスのインスタンスを用いるとあります。

AbstractSoundInstanceのドキュメント。
SoundJS v0.6.1 API Documentation : SoundJS
サウンドインスタンスの作成方法

// idでオーディオファイルを指定。パスでも指定できる
var instance = createjs.Sound.play("sound01");

あるいは

// idでオーディオファイルを指定。パスでも指定できる
var instance = cj.Sound.createInstance("sound01");

このように記述する事で、サウンドインスタンスが出来ます。このインスタンスをplay, pauseすればよい。

参考になるものがないかとCreateJSのデモページを見てみました。
CreateJS | Demos
さまざまなデモがあってCreateJSの多彩な使い方を知ることができます。
（Demo画面の右下には
live edit
というボタンがあって、自由にコードを編集でき実行できます。）

デモページの
ss 2015-09-11 11.25.04
MORE DEMOSボタンからSoundJSのデモを見てると、
（注・音出ます）
CreateJS | Demos for SoundJS – Media Player
というDemoがありました。

このMedia Playerデモのコードを見て、play, pauseのやり方を調べてみました。

instance.paused ? instance.paused = false : instance.paused = true;

サウンドインスタンスのpausedプロパティで、pauseを切り替えることができることがわかりました。

ということで、
再生(play)、一時停止(pause)、再開(resume)をおこなう例をつくりました。

forked: [CreateJS][SoundJS]音を鳴らしてみる(SoundJS ver 0.6.1) – jsdo.it

[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。

(2015年9月11日追記。
この記事の情報はSoundJS ver 0.5(2013年9月)に基づくものです。
SoundJS ver 0.6.1(2015年5月リリース)に基づいて
こちらに
（[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。(SoundJS ver 0.6.1) | nackpan Blog）
記事を書き直しました)

以下の情報はSoundJS ver 0.5(2013年9月)に基づくものです

SoundJSのサイト
CreateJSの4種のスイートのひとつ、SoundJSを使って音をあつかってみよう。

まずは音を出してみる

ファイル構成

index.htm

<!DOCTYPE html>
<html>
<head>音を鳴らす</head>
<body>
    <script type="text/javascript" src="http://code.createjs.com/soundjs-0.5.0.min.js"></script>
    <script type="text/javascript" src="js/playSound.js"></script>
</body>
</html>

playSound.js

(function (window){
    init();
    
    function init() {
        //オーディオファイルのロードが終了したならhandleFileLoadが呼ばれる
        createjs.Sound.addEventListener("fileload", handleFileLoad);
        //オーディオファイルを登録
        createjs.Sound.registerSound( {id:"sound01", src:"assets/sound.mp3"} );
    }
    
    functioin handleFileLoad(event)
    {
        //音を出す
        createjs.Sound.play("sound01");
    }        
}(window));

これで、音が鳴る。

playボタンとpauseボタンをつくろう

playボタンを押すと音が出る、pauseボタンで止まって、そこでplayボタンを押すと続きから再生される。というのをやってみよう。

SoundJSのサイトのResourcesにある、チュートリアル、ドキュメントを見ていくと、SoundInstanceクラスというのがある。
SoundInstanceクラスのドキュメンテーション
サウンドインスタンスの作成方法

// idでオーディオファイルを指定。パスやevent.srcでも指定できる
var instance = createjs.Sound.play("sound01");

あるいは

// idでオーディオファイルを指定。パスやevent.srcでも指定できる
var instance = cj.Sound.createInstance("sound01");

このように記述する事で、サウンドインスタンスが出来る。このインスタンスをplay, pause, resumeすればいい。

ここで、SoundJSのサイトのDEMOSをあらためて見たら、
（注・音出ます）
MediaPlayerというのがあるじゃないですか。
これみたら、

soundInstance.paused

で、そのインスタンスがポーズしているかどうか調べられるんだ、ということ分かった。

ということで、
再生(play)、一時停止(pause)、再開(resume)をおこなう例をつくりました。
[CreateJS][SoundJS]音を鳴らしてみる – jsdo.it