Skip to content

Commit

Permalink
v1.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@petamoriken
petamoriken committed Feb 17, 2016
1 parent d6b8b33 commit cff5846
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 21 deletions.
70 changes: 59 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<div align="center">
<img src="pxtonejs5x.png" alt="PxtoneJS"><br>
Play <a href="http://studiopixel.sakura.ne.jp/pxtone/" target="_blank">Pxtone Collage</a> files in Browser.
Play <a href="http://studiopixel.sakura.ne.jp/pxtone/" target="_blank">Pxtone Collage</a> files in Web Audio API.
</div>

<br><br><br><br>
Expand All @@ -20,10 +20,12 @@

##Install & Require

###Browserify で使う場合
###Browser で鳴らす

####Browserify で使う場合

```
npm install --save-dev pxtone
npm install --save pxtone
```

Browserify で require をするときには
Expand All @@ -32,6 +34,7 @@ Browserify で require をするときには
var Pxtone = require("pxtone");
var pxtnDecoder = require("pxtone/pxtnDecoder");
```

としてください。
デコーダーを Web Worker として使いたい場合（推奨）は `lib/pxtnDecoder.js` を適当な場所にコピーして

Expand All @@ -40,16 +43,24 @@ var Pxtone = require("pxtone");
var pxtnDecoder = new Worker("DEST/TO/pxtnDecoder.js");
```

としてください。
としてください。
なお Browserify でビルドする際は、不要な Node のパッケージである `web-audio-api`, `text-encoding` を含めないようにしてください。例えば以下のようにビルドします。

```
browserify src.js --no-commondir --igv global -i web-audio-api -i text-encoding -o build.js
```

また、<a href="https://github.com/substack/webworkify" target="_blank">webworkify</a> を使えば 1 つの JavaScript ファイルとしてまとめることが出来ますが、膨大な `lib/pxtnDecoder.js` を文字列化して `URL.createObjectURL` を使って読み込むことになるため、パフォーマンス面から推奨しません。

###script タグで使う場合
####script タグで使う場合

[releases](https://github.com/petamoriken/PxtoneJS/releases) から `Pxtone.js` と `pxtnDecoder.js` を適当な場所に保存して

```html
<script src="DEST/TO/Pxtone.js"></script>
<script src="DEST/TO/pxtnDecoder.js"></script>
```

としてください。
デコーダーを Web Worker として使いたい場合（推奨）は

Expand All @@ -62,9 +73,26 @@ var pxtnDecoder = new Worker("DEST/TO/pxtnDecoder.js");

としてください。

###Node で鳴らす

```
npm install --save pxtone
npm install --save web-audio-api
```

Node で require をするときには Browserify と同様に

```javascript
var Pxtone = require("pxtone");
var pxtnDecoder = require("pxtone/pxtnDecoder");
```

としてください。
Node の場合は `web-audio-api` パッケージを使うことになります。

##Initialize

`Pxtone` を使う場合は、以下のように初期化してください。
以下のように初期化します。

```javascript
var pxtone = new Pxtone();
Expand All @@ -73,17 +101,35 @@ pxtone.decoder = pxtnDecoder;

##How to Use

ブラウザ上で Pxtone Collage ファイルを再生するには、`XMLHttpRequest` や `Fetch API`, `File API` などで Pxtone Collage Project ファイル（拡張子 .ptcop）か Pxtone Tune ファイル（拡張子 .pttune) の `ArrayBuffer` を取得する必要があります。仮に `buffer` という変数に得た Pxtone Collage ファイル の `ArrayBuffer` を入れた場合、以下のようにして `AudioBuffer` を得ることが出来ます。
ブラウザ上で Pxtone Collage ファイルを再生するには、`XMLHttpRequest` や `Fetch API`, `File API` などで Pxtone Collage Project ファイル（拡張子 .ptcop）か Pxtone Tune ファイル（拡張子 .pttune) の `ArrayBuffer` を取得する必要があります。仮に `arrayBuffer` という変数に得た Pxtone Collage ファイル の `ArrayBuffer` を入れた場合、以下のようにして `AudioBuffer` を得ることが出来ます。

```javascript
var ctx = new (window.AudioContext || window.webkitAudioContext)();
pxtone.decodePxtoneData(ctx, buffer).then(function(arr) {
pxtone.decodePxtoneData(ctx, arrayBuffer).then(function(arr) {
var audioBuffer = arr[0];
var data = arr[1];
});
```

Node で再生する場合も同様に `File System` などを使って `ArrayBuffer` を得る必要があります。PxtoneJS の API が `ArrayBuffer` しか受け付けないことに注意してください。例えば `fs.readFileSync` を使ってローカルファイルの `Buffer` を得た場合は以下のようにして `ArrayBuffer` に変換する必要があります。

```javascript
let buffer = fs.readFileSync("hoge.pttune"); // Buffer
let arrayBuffer = new Uint8Array(buffer).buffer; // ArrayBuffer
```

また Node は `Web Audio API` をデフォルトでサポートしてないので `web-audio-api` パッケージを使います。詳しい情報は <a href="https://github.com/sebpiq/node-web-audio-api" target="_blank">node-web-audio-api</a> を御覧ください。

```javascript
const AudioContext = require("web-audio-api").AudioContext;
const ctx = new AudioContext();
pxtone.decodePxtoneData(ctx, arrayBuffer).then(function(arr) {
var audioBuffer = arr[0];
var data = arr[1];
});
```

得た `AudioBuffer` を再生するには `AudioBufferSourceNode` を使います。詳しくは MDN の <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" target="_blank">Web Audio APIの利用</a> や <a href="https://developer.mozilla.org/ja/docs/Web/API/AudioContext/createBufferSource" target="_blank">AudioContext.createBufferSource()</a> を参考にしてください。
ブラウザ、Node で、得た `AudioBuffer` を再生するには `AudioBufferSourceNode` を使います。詳しくは MDN の <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" target="_blank">Web Audio APIの利用</a> や <a href="https://developer.mozilla.org/ja/docs/Web/API/AudioContext/createBufferSource" target="_blank">AudioContext.createBufferSource()</a> を参考にしてください。

##Browser Support

Expand All @@ -96,7 +142,7 @@ iOS 9.2: Mobile Safari
上記に書いてないブラウザ環境でも Web Audio API が動く環境であれば動作すると思われます。
動作する環境について調べたい場合は Can I use の [Web Audio API](http://caniuse.com/#feat=audio-api) を御覧ください。

特にデフォルトで asm.js をサポートしている Edge, Firefox では速くデコードすることが出来ます。
特にデフォルトで asm.js をサポートしている Firefox, Edge では速くデコードすることが出来ます。
将来的には WebAssembly によって、どのブラウザでも速くデコードすることが出来るようになると思われます。

また IE は Web Audio API を使うことが出来ませんが、<a href="http://www.g200kg.com/docs/waapisim/" target="_blank">WAAPISim</a> を使うことで動作する可能性があります。
Expand Down Expand Up @@ -144,6 +190,8 @@ iOS 9.2: Mobile Safari

<a href="https://github.com/mohayonao/promise-decode-audio-data" target="_blank">promise-decode-audio-data</a> に依存しているため、`AudioContext#decodeAudioData` が `Promise` を返すようになります。

Node で使用した場合も同様に `Promise` を返すようになります。

##License & Dependencies

under <a href="http://petamoriken.mit-license.org/2016" target="_blank">MIT License</a>.
Expand All @@ -161,7 +209,7 @@ under <a href="http://petamoriken.mit-license.org/2016" target="_blank">MIT Lice
* <a href="http://browserify.org/" href="_target">Browserify</a>: require('modules') in the browser by bundling up all of your dependencies
* <a href="http://lisperator.net/uglifyjs/" href="_target">UglifyJS</a>: JavaScript parser / mangler / compressor / beautifier toolkit

その他の依存する npm package については [package.json](package.json) を御覧ください。
その他の依存する npm パッケージについては [package.json](package.json) を御覧ください。

##Support

Expand Down
22 changes: 12 additions & 10 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "pxtone",
"description": "Play Pxtone Collage files in Browser",
"version": "1.0.3",
"description": "Play Pxtone Collage files in Web Audio API",
"version": "1.1.0",
"author": "Kenta Moriuchi (http://moriken.kimamass.com/)",
"bugs": {
"url": "https://github.com/petamoriken/PxtoneJS/issues"
Expand All @@ -12,17 +12,21 @@
},
"devDependencies": {
"babel-cli": "^6.3.17",
"babel-eslint": "^4.1.6",
"babel-eslint": "^5.0.0",
"babel-plugin-add-module-exports": "^0.1.1",
"babel-plugin-transform-async-to-generator": "^6.3.13",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-plugin-transform-strict-mode": "^6.3.13",
"babel-preset-es2015": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"eslint": "^1.10.3",
"browserify": "^13.0.0",
"eslint": "^2.1.0",
"uglify-js": "^2.6.1"
},
"optionalDependencies": {
"text-encoding": "^0.5.2",
"web-audio-api": ">=0.2.2"
},
"files": [
"README.md",
"pxtonejs.png",
Expand All @@ -35,12 +39,10 @@
"homepage": "https://github.com/petamoriken/PxtoneJS",
"keywords": [
"PxtoneCollage",
"webaudio"
"webaudio",
"web-audio-api"
],
"license": {
"type": "MIT",
"url": "http://petamoriken.mit-license.org/2016"
},
"license": "MIT",
"main": "index.js",
"repository": {
"type": "git",
Expand Down

0 comments on commit cff5846

Please sign in to comment.