tone.jsをp5.js web editorで使おうとして読み込めなかったやつ
ハマった事項メモ。
結論
p5.js web editorが自動で付けてくれるindex.htmlのp5.sound.min.jsと競合してたっぽい。
<head>内の外部ライブラリ読み込みのところを
1
2
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
<script src="https://unpkg.com/tone"></script>
ではなく
1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://unpkg.com/tone"></script>
にすると動きました。p5.sound.min.jsを読み込むためにつけられている<script>を消したうえでtone.jsを読み込む<script>を付けたら大丈夫になりました。ガーン。これに気づくまで何時間も溶かした。
以下はこれに気づくまでの過程です。
症状
p5.js Web EditorにてTone.jsを使ってみたかった。 テストなのでいたってシンプルなこういうファイル構成。
.
├── index.html
├── sketch.js
├── style.css
└── tone-play.jstone-play.jsにこういうコードを置いた。
1
2
3
4
5
6
7
8
9
10
document.addEventListener('DOMContentLoaded', () => {
const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease('C4', '4n');
const button = document.createElement('button');
button.innerText='♬ 押すと音が鳴ります ♬';
button.addEventListener('click', () => Tone.Transport.start());
document.body.appendChild(button);
});
で、これはp5抜きのただのHTMLファイルでは動作確認できた。できてたんです。思ったように動いてたんです。
でもWeb Editorに持ってったらReferenceError: Tone is not definedとか言われた。
まずはTone.jsを読む<script>の書き忘れじゃないかと思うけど
ちゃんとindex.htmlに書いてるんですよ。
1
2
3
4
5
6
7
8
9
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
<script src="https://unpkg.com/tone"></script>
<script src="./tone-play.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
じゃあライブラリが読まれるより先にToneを呼んじゃってるとかじゃないかって
Toneが無いって言うから。いっぱい試したよ。
・DOMContentLoadedよりじっくり待つwindow.onloadならどうだ
1
2
3
window.addEventListener('load', () => {
const synth = new Tone.Synth().toDestination();
// ...
ReferenceError: Tone is not defined
🌸 p5.jsが言っています: [tone-play.js, 2行目] "cone" ではなく、誤って "Tone" と書いてしまったようです。p5.js内の function を使用したい場合は、 cone に修正してください。 (http://p5js.org/reference/p5/cone) 今回ばかりはconeではないんだよな。
・setup()内ならさすがに全部読んだ後だろ
tone-play.jsを空っぽにして、
1
2
3
4
5
function setup() {
createCanvas(400, 500);
const synth = new Tone.Synth().toDestination();
// ...
}
ReferenceError: Tone is not defined
(以下同様)sketch.jsの後とか！！！
1
2
3
4
5
6
7
<html>
<!-- 略 -->
<body>
<script src="sketch.js"></script>
<script src="tone-play.js"></script>
</body>
</html>
ReferenceError: Tone is not defined
(以下同様)ユーザがボタンを押した時の処理にTone絡みの操作を全部入れれば！！！！！
1
2
3
4
5
6
7
8
9
10
window.onload = () => {
document.querySelector('#play')
.addEventListener('click', () => {
const synth = new Tone.Synth().toDestination();
synth.triggerAttackRelease('C4', '4n');
Tone.Transport.start()
});
}
ReferenceError: Tone is not defined
(以下同様)どうしよう！！！！！！！
私「もう一旦このweb editorで作ったやつをローカルに落として実行してみよう。それで無理そうだったらあきらめてp5.sound使おう。」
ローカル実行
私「やっぱp5付きのやつ動かない。でもとりあえずp5のscript消したら動くよね？？」
(p5.jsのタグを消したつもりでp5.sound.min.jsのタグを消した)
私「あ、動いた。ってあれ、なんでp5の関数が未定義とかのエラーが出てないんだ?」
私「…???
もしかして、p5.jsだと思ってp5.soundの方消した…???」
人間の勘違いで出た結論
ということで、tone.jsとp5.sound.jsを同時に書くと何か困ったことが起きるようです。
ガーン。これに気づくまで何時間も溶かした。