強火で進め

このブログではプログラム関連の記事を中心に書いてます。

JavaScriptプログラムの中で簡単にサウンドを扱えるライブラリ「SoundManager 2」

JavaScript

SoundManager 2: JavaScript Sound For The Web
http://www.schillmania.com/projects/soundmanager2/

SoundManager 2はPCではFlashを使ってキビキビ動作し、Flashが使えないiPhoneやiPadでも動作が可能なライブラリです。Web上に簡単に音楽プレイヤーなども作れます。全ての操作はJavaScriptから可能なのが大きな特徴です。

なお、プログラムはローカルで上手く動作しない様です。動作確認はサーバにアップして行う様にして下さい。

記述例

単純にボタンが押されたらサウンドファイルを再生するプログラムはこの様に書きます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0">
	<script type="text/javascript" src="js/soundmanager2.js"></script>
<script type="text/javascript">
function play() {
  soundManager.play('mySound0');
}

//soundManager.flashVersion = 9; // Flashのバージョン(8 or 9)を指定
soundManager.url = './swf/'; // .swfファイルを保存しているフォルダ
soundManager.debugMode = false; // trueの時、デバッグモード
soundManager.consoleOnly = false; // trueの時、Firebugなどのコンソールのみに出力。falseの時は画面にも出力

soundManager.onready(function(oStatus) {
  if (!oStatus.success) {
    return false;	
  }
  soundManager.createSound({
    id: 'mySound0',
    url: './sound/button-1.mp3',
    autoLoad: true
  });
});
</script>
	<title>SoundManager 2のサンプル</title>
</head>
<body>
<input onClick="play()" type="button" value="Play"><br>
※サウンドファイルは<a href="http://www.soundjay.com/button-sounds-1.html">こちら</a>のファイルを使わせて頂きました。
</body>
</html>

soundManagerはライブラリのjsファイルを読み込むと生成されます。

soundManager.onready() で初期化処理を行います。

  soundManager.createSound({
    id: 'mySound0',
    url: './sound/button-1.mp3',
    autoLoad: true
  });

id はサウンドファイルを再生する時などに使用するID、 url はサウンドファイルのURLを指定。 autoLoad は事前にロードを行うかどうかを指定します。

「Play」ボタンを押すと soundManager.play() を実行し、サウンドを再生します。

  soundManager.play('mySound0');

実際に試す場合はこちらにアクセスして下さい。PCでもiPhone/iPadでも動作します。

今回のサンプルではファイルはこの様に配置しました。ここではデバック用やFlash 8、Flash 9向けなど全て含まれていますが実際に使用する場合は必要なファイルだけ配置すればOKです。

SoundManager 2では使用可能なjsファイルは「開発向け(soundmanager2.js)」「リリース向け+デバッグ機能有り(soundmanager2-jsmin.js)」「リリース向け+デバッグ機能無し(soundmanager2-nodebug-jsmin.js)」の3種類が有ります。

詳しくはこちらを参照下さい。