概要
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をする際、参考にしました。