WebAudio APIを使ったオーディオアプリを開発・配布する便利な方法


この記事は、[Node.js Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/nodejs)の19日目です。

## はじめに

最近はWebAudio APIによってJavaScriptで簡単にオーディオアプリが作れるようになりましたが、最終的なアプリ配布を考えるといろいろと面倒です。

- 複数ブラウザやブラウザバージョンの差異吸収が面倒(開発者サイド)
	- 一時期のdeprecatedなAPI大量発生前後のような現象
	- prefix付きの`AudioContext()`に対応しないといけない場合がある
	- 同じ`AudioContext`でもブラウザによって挙動が異なる
- アプリの実行が面倒(利用者サイド)
	
このような場合に、[node.js](http://nodejs.org)と[Chromium](http://www.chromium.org)ベースのデスクトップアプリ用フレームワーク[Atom-Shell](https://github.com/atom/atom-shell)を使うと、以下なようなメリットがあって楽でした。

- 環境が固定できて複数ブラウザに対応しなくていいので楽
	- `AudioContext()`だけを考えればよい
	- atom-shellのweb-kitだけを考えればよい
	- 実行環境に関する面倒な説明が不要
- node-webkitよりオーディオファイル(.mp3等)の扱いが楽
	- atom-shell:[Support for proprietary codecs #633](https://github.com/atom/atom-shell/issues/633)
	- node-webkit:[Using MP3 & MP4 (H.264) using the video & audio tags.](https://github.com/rogerwang/node-webkit/wiki/Using-MP3-&-MP4-(H.264)-using-the--video--&--audio--tags.)
- パッケージングも比較的楽
	- 簡単な起動用ファイルを書く程度
- 起動が楽
	- 実行ファイル(Atom.appなど)を叩くだけ

ということで、以下で簡単に方法を説明します。

## Atom-shellダウンロード

1. npmでatom-shellをダウンロードします。

	```bash
	mkdir myproj && cd myproj
	npm install atom-shell
	```
	※ [公式バイナリ](https://github.com/atom/atom-shell/releases)をダウンロードしてきても構いません。

## アプリ開発

1. `package.json`を作成します。

	```bash
	cd node_modules/atom-shell/dist/Atom.app/Contents/Resources
	mkdir app && cd app
	npm init
	```

	適当にリターンを押し続けます。

	※OSXのケースです。WindowsとLinuxは[Application distribution](https://github.com/atom/atom-shell/blob/master/docs/tutorial/application-distribution.md#application-distribution)を参照してください。

2. アプリ起動用ファイルを作成します。

	Atom-shellを起動した時に最初に呼ばれるJavaScriptファイルを作成します。ファイル名は`package.json`の中の`main`に書かれています。`npm init`の際に適当にリターンを押していると初期値に`index.js`が入るので、`index.js`とします。

	```
	vim index.js
	```

	[1]を参考に、`index.js`を以下のように編集します。

	```javascript
	var app = require('app'); 
	var BrowserWindow = require('browser-window');  

	var mainWindow = null;

	app.on('window-all-closed', function() {
  		if (process.platform != 'darwin') {
    		app.quit();
		}
	});

	app.on('ready', function() {
  		// メインウィンドウを作成
  		mainWindow = new BrowserWindow({width: 1000, height: 600});
  		// index.html を読み込む
  		mainWindow.loadUrl('file://' + __dirname + '/index.html');
		mainWindow.on('closed', function() {
			mainWindow = null;
		});
	});
	```

	[1]:[atom/atom-shell -> Quick start](https://github.com/atom/atom-shell/blob/master/docs/tutorial/quick-start.md)

3. アプリ格納

	`package.json`と同じディレクトリに`index.html`を配置します。`.js`や`.css`など関連するファイルも配下のディレクトリに格納します。

	例:

	```bash	
	├── css
	│   └── xxx.css
	├── img
	│   └── xxx.png
	├── js
	│   └── xxx.js
	├── index.html
	├── index.js
	└── package.json
	```

4. 以上で終わりです。



## アプリ配布

1. `node_modules/atom-shell/dist`配下の`Atom.app`を配布します。OSXとLinuxなら実行ファイルをリネームすることができます。

## アプリ実行

1. `Atom.app`を起動します。

## その他

- ソースコードをプロテクトしたい場合
	- [atom-shell/docs/tutorial/application-packaging.md](https://github.com/atom/atom-shell/blob/master/docs/tutorial/application-packaging.md#application-packaging)
- node-webkitとの違い
	- [Technical differences to Node-Webkit](https://github.com/atom/atom-shell/blob/master/docs/development/atom-shell-vs-node-webkit.md#technical-differences-to-node-webkit)

- Node.jsのプログラムを実行する。
	- [atom-shellを雑に使って任意のnodeスクリプトが実行可能なアプリケーションとして配布する](http://qiita.com/mizchi/items/6fe567892212efca7a14)

## サンプル

オフラインで動作するJS製のDJミキサーです。atom-shellのおかげで、`AudioContext()`だけに対応すればよくなりました。

![screen1.png](https://qiita-image-store.s3.amazonaws.com/0/15414/5ee5cf03-d026-1cb7-e128-d514ec4c33c3.png "screen1.png")

### バイナリ

クリスマスも近いということでどうぞ。

- [browserdj-atom-shell : Mac OSX版(64bit)](https://github.com/sl2/browserdj-atom-shell/blob/master/dist/browserdj_v0.20.1_darwin-x64.zip?raw=true)
- [browserdj-atom-shell : Windows版(32bit)](https://github.com/sl2/browserdj-atom-shell/blob/master/dist/browserdj_v0.20.1_win32-ia32.tar.gz?raw=true)
- [browserdj-atom-shell : Linux版(64bit))](https://github.com/sl2/browserdj-atom-shell/blob/master/dist/browserdj_v0.20.1_linux-x64.tar.gz?raw=true)

追記(12/21): バグ修正 & WinとLinux版も配布しました。 

### リポジトリ
- [browserdj-atom-shell](https://github.com/sl2/browserdj-atom-shell) : Atom-shell版
- [browserdj](https://github.com/sl2/browserdj) : Node.js版と静的ファイル版

## 追記: gulpによる自動化

gulpを使うことでAtom-shellのダウンロードやOSX, Linux, Windows用のバイナリ生成を簡単に自動化できます。新たに記事を投稿したのでgulpを使う場合は以下を見てください。

- 推奨: [gulpでOSX、Windows、Linux用のAtom-shellアプリを自動生成する](http://qiita.com/sl2/items/7b26bddb9165e627a864)

---

明日の[Node.js Advent Calendar 2014 - Qiita](http://qiita.com/advent-calendar/2014/nodejs)は[phi](http://qiita.com/phi)さんです。