<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Simple Synth</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<style>
body { font-family: sans-serif; padding: 20px; text-align: center; }
button { padding: 10px 20px; font-size: 16px; margin: 5px; cursor: pointer; }
#start-btn { background-color: #ff9800; color: white; border: none; font-weight: bold;}
</style>
</head>
<body>
<button id="start-btn">⚠️ まずここをクリックして音声をONにする</button>
<hr>
<button onmousedown="playNote('C4')">ド (C4)</button>
<button onmousedown="playNote('D4')">レ (D4)</button>
<button onmousedown="playNote('E4')">ミ (E4)</button>
<button onmousedown="playNote('F4')">ファ (F4)</button>
<button onmousedown="playNote('G4')">ソ (G4)</button>
<script>
// 1. シンセサイザーを作成（Tone.jsの基本機能）
// toDestination() は「スピーカーに繋ぐ」という意味です
const synth = new Tone.Synth().toDestination();
// 音声を有効化するための処理
document.getElementById('start-btn').addEventListener('click', async () => {
await Tone.start();
document.getElementById('start-btn').innerText = "準備OK！下のボタンを押してね";
document.getElementById('start-btn').style.backgroundColor = "#4CAF50";
});
// 2. 音を鳴らす関数
function playNote(note) {
// triggerAttackRelease(音程, 長さ)
// '8n' は8分音符の長さという意味です
synth.triggerAttackRelease(note, "8n");
}
</script>
</body>
</html>
使用変数
| backgroundColor | |
| charset | |
| id | |
| innerText | |
| lang | |
| onmousedown | |
| playNote -------( Function ) | |
| src | |
| synth |