More than 5 years have passed since last update.

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

Last updated at 2014-12-21Posted at 2014-12-19

この記事は、Node.js Advent Calendar 2014 - Qiitaの19日目です。

はじめに

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

複数ブラウザやブラウザバージョンの差異吸収が面倒(開発者サイド)
- 一時期のdeprecatedなAPI大量発生前後のような現象
- prefix付きのAudioContext()に対応しないといけない場合がある
- 同じAudioContextでもブラウザによって挙動が異なる
アプリの実行が面倒(利用者サイド)

このような場合に、node.jsとChromiumベースのデスクトップアプリ用フレームワークAtom-Shellを使うと、以下なようなメリットがあって楽でした。

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

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

Atom-shellダウンロード

npmでatom-shellをダウンロードします。
```
mkdir myproj && cd myproj
npm install atom-shell
```
※ 公式バイナリをダウンロードしてきても構いません。

アプリ開発

package.jsonを作成します。
```
cd node_modules/atom-shell/dist/Atom.app/Contents/Resources
mkdir app && cd app
npm init
```
適当にリターンを押し続けます。

※OSXのケースです。WindowsとLinuxはApplication distributionを参照してください。

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

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

vim index.js

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

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

アプリ格納

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

例:
```
├── css
│   └── xxx.css
├── img
│   └── xxx.png
├── js
│   └── xxx.js
├── index.html
├── index.js
└── package.json
```
以上で終わりです。