概要

Tone.js公式の最初の Hello Tone を鳴らすまでの手順をまとめました。

CDNで配布されているTone.jsを使う場合

Demo を参照ください。

手軽にコードを書いて鳴らす用途に向きます。
音を鳴らす場合は左上のplayボタンをクリック
ソースを読む場合はView(html)タブをクリック
注意と備考
Tone.min.jsは利用しないほうがよさそう。
cdnpkgのTone.min.jsは古く（14.5.37）、iPadでPingPongDelayを使うとエラーで鳴らなくなります。
stable(安定版)は、unpkg.com Tone.js 14.7.77(2021年5月30日時点) 参考
Tone.js公式がstable(安定版)として提示しているのは、後述の npm install tone で入手できる版 14.7.77(2021年5月30日時点)
安定版ではないが最新機能がありそうなのは：cdnpkg.com経由 Tone.js 14.8.25(2021年5月30日時点)
安定版ではないが最新機能がありそうなのは：cdnjs.com経由 Tone.js 14.8.17(2021年5月30日時点)
古いので利用しないほうがよさそうなのは：cdnpkg.com Tone.min.js 14.5.37(2021年5月30日時点)

npm installとwebpackを使う場合

ある程度規模の大きいアプリケーションを開発する用途に向きます。
以降に記します。

対象読者

Tone.js公式を読んでチャレンジしたもののすぐ音が鳴らなかった人向けです。
npm、webpack、autoplay policy、ほか各種Web技術の知識が十分にある人は、普通にすぐ音が鳴らせるかもしれません。

対象環境

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

経緯

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

Demo

手順（Tone.jsをinstallしてからブラウザで音が鳴るまで）

GitHubに空のリポジトリを作成し、ローカルにcloneする
cloneしたディレクトリにて、initとinstallを行う：

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

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

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

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

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 を作成する：

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

src/index.js を作成する

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を使用）：

npm run dev

自動でブラウザが起動しpageが開かれることを確認する
playボタンを押して音が鳴ることを確認する
src/index.js を編集し、鳴る音を変更する
自動でブラウザが更新され、playボタンを押すと鳴る音が変わっていることを確認する
GihHub Pagesで公開する用に、buildする（webpackを使用）：

npm run build

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

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

参考

JavaScriptによるオーディオプログラミング例音を鳴らすコードを書く際、参考にしました。

webpackをかんたんに使う（Zero Configulation） webpackのinstallをする際、参考にしました。

おまけ

Demo2、index.html、index.js

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

概要