Tone.jsで音を鳴らす手順（2024年1月版）


# 概要
[Tone.js公式](https://tonejs.github.io/)の最初の `Hello Tone` を鳴らすまでの手順をまとめました。

# CDNで配布されているTone.jsを使う場合
[Demo](http://runstant.com/cat2151/projects/42fc9587) を参照ください。

- 手軽にコードを書いて鳴らす用途に向きます。
- 音を鳴らす場合は左上のplayボタンをクリック
- ソースを読む場合は`View(html)タブ`をクリック

- 注意と備考
 - Tone.min.jsは利用しないほうがよさそう。
   [cdnpkgのTone.min.jsは古く（14.5.37）、iPadでPingPongDelayを使うとエラーで鳴らなくなります。](https://github.com/cat2151/try-tonejs-ios/issues/1)
 - stable(安定版)は、[unpkg.com Tone.js](https://unpkg.com/tone/build/Tone.js) `14.7.77`(2021年5月30日時点) [参考](https://qiita.com/t-okushima/items/a692eef7ca2efb0b50b3)
 - [Tone.js公式](https://tonejs.github.io/)がstable(安定版)として提示しているのは、後述の `npm install tone` で入手できる版  `14.7.77`(2021年5月30日時点)
 - 安定版ではないが最新機能がありそうなのは：[cdnpkg.com経由 Tone.js](https://www.cdnpkg.com/tone)  `14.8.25`(2021年5月30日時点)
 - 安定版ではないが最新機能がありそうなのは：[cdnjs.com経由 Tone.js](https://cdnjs.com/libraries/tone)  `14.8.17`(2021年5月30日時点)
 - 古いので利用しないほうがよさそうなのは：[cdnpkg.com Tone.min.js](https://www.cdnpkg.com/tone/file/Tone.min.js/)  `14.5.37`(2021年5月30日時点)


# npm installとwebpackを使う場合
- ある程度規模の大きいアプリケーションを開発する用途に向きます。
- 以降に記します。

## 対象読者
[Tone.js公式](https://tonejs.github.io/)を読んでチャレンジしたもののすぐ音が鳴らなかった人向けです。
npm、webpack、[autoplay policy](https://tonejs.github.io/docs/14.7.77/fn/start)、ほか各種Web技術の知識が十分にある人は、普通にすぐ音が鳴らせるかもしれません。

## 対象環境
ビルドはWindowsで、音が鳴ることはWindowsとiOSで確認しました。

## 経緯
Tone.jsの公式トップページを見て音を出してみようとしたものの、
意外に時間がかかりました。
もう少し情報があれば時間短縮できると考えました。

## [Demo](https://cat2151.github.io/try-tonejs/dist/index.html)

## 手順（Tone.jsをinstallしてからブラウザで音が鳴るまで）
- GitHubに空のリポジトリを作成し、ローカルにcloneする
- cloneしたディレクトリにて、initとinstallを行う：

```bash
npm init -y
npm install -D webpack webpack-cli webpack-dev-server
npm install tone
```

- package.jsonのscriptsにbuildとdevを追加する（webpackを使う用）：

```json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server --hot --open"
  },
```

- webpack.config.jsを作成する（webpackを使う用）：

```js
const path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  resolve: {
    extensions: [
      '.js',
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
  },
};
```

- `dist/index.html` を作成する：

```html
<!DOCTYPE html>
<html>
<head></head>
<body>
  <script src="main.js"></script>
  <button>play</button>
</body>
</html>
```

- `src/index.js` を作成する

```javascript
import * as Tone from 'tone'

window.addEventListener("load", ()=>{
  const button = document.querySelector('button');
  button.onclick = async ()=>{
    await Tone.start();
    play();
  };
});

function play() {
  const synth = new Tone.Synth().toDestination();
  synth.triggerAttackRelease("C4", "8n");
}
```

- 自動ビルドと実行を行う（webpackを使用）：

```bash
npm run dev
```

- 自動でブラウザが起動しpageが開かれることを確認する
- playボタンを押して音が鳴ることを確認する
- `src/index.js` を編集し、鳴る音を変更する
- 自動でブラウザが更新され、playボタンを押すと鳴る音が変わっていることを確認する

- GihHub Pagesで公開する用に、buildする（webpackを使用）：

```bash
npm run build
```

- `dist/main.js` が生成されていることを確認する
- GitHub Pagesに公開して数分待ち、音が鳴ることを確認する
    - （pagesのbuildが行われた直後は音が鳴らず、数分待つと音が鳴る、ということがありました）

以上です。何かの参考になれば幸いです。

## 参考
[JavaScriptによるオーディオプログラミング例](https://qiita.com/aike@github/items/2851b94b516cf75a5350) 音を鳴らすコードを書く際、参考にしました。

[webpackをかんたんに使う（Zero Configulation）](https://qiita.com/hashrock/items/3f1df615e68ee8aad9e8) webpackのinstallをする際、参考にしました。

# おまけ
[Demo2](https://cat2151.github.io/try-tonejs-sequence/dist/index.html)、[index.html](https://github.com/cat2151/try-tonejs-sequence/blob/main/dist/index.html)、[index.js](https://github.com/cat2151/try-tonejs-sequence/blob/main/src/index.js)