Skip to content

Instantly share code, notes, and snippets.

@ji6czd

ji6czd/tone.html

Last active August 5, 2025 06:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ji6czd/ed5647639ac93c7032b88ae92a95adfd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ji6czd/ed5647639ac93c7032b88ae92a95adfd to your computer and use it in GitHub Desktop.
Download ZIP
A play tone sample using tone.js.
Raw
tone.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/tone"></script>
</head>
<body>
<div>
<p>キーボードで演奏してください:</p>
<p>A=C, S=D, D=E, F=F, G=G, H=A, J=B, K=C</p>
<button onclick="playSound()">Play Scale</button>
<div style="margin-top: 20px;">
<h3>ピアノ鍵盤:</h3>
<div style="position: relative; display: inline-block; margin: 20px;">
<!-- 白鍵 -->
<div style="display: flex; gap: 2px;">
<button onclick="playNote('C4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">C4<br>A</div>
</button>
<button onclick="playNote('D4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">D4<br>S</div>
</button>
<button onclick="playNote('E4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">E4<br>D</div>
</button>
<button onclick="playNote('F4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">F4<br>F</div>
</button>
<button onclick="playNote('G4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">G4<br>G</div>
</button>
<button onclick="playNote('A4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">A4<br>H</div>
</button>
<button onclick="playNote('B4')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">B4<br>J</div>
</button>
<button onclick="playNote('C5')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">C5<br>K</div>
</button>
<button onclick="playNote('D5')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">D5<br>L</div>
</button>
<button onclick="playNote('E5')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">E5<br>;</div>
</button>
<button onclick="playNote('F5')"
style="width: 50px; height: 150px; background: white; border: 2px solid #000; position: relative; z-index: 1;">
<div style="margin-top: 120px; font-size: 10px;">F5<br>'</div>
</button>
</div>
<!-- 黒鍵 -->
<div style="position: absolute; top: 0; left: 0; display: flex;">
<!-- C# -->
<button onclick="playNote('C#4')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 37px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">C#4<br>W</div>
</button>
<!-- D# -->
<button onclick="playNote('D#4')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 89px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">D#4<br>E</div>
</button>
<!-- F# -->
<button onclick="playNote('F#4')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 193px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">F#4<br>T</div>
</button>
<!-- G# -->
<button onclick="playNote('G#4')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 245px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">G#4<br>Y</div>
</button>
<!-- A# -->
<button onclick="playNote('A#4')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 297px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">A#4<br>U</div>
</button>
<!-- C#5 -->
<button onclick="playNote('C#5')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 401px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">C#5<br>O</div>
</button>
<!-- D#5 -->
<button onclick="playNote('D#5')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 453px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">D#5<br>P</div>
</button>
<!-- F#5 -->
<button onclick="playNote('F#5')"
style="width: 30px; height: 100px; background: #333; color: white; border: 1px solid #000; position: absolute; left: 557px; z-index: 2;">
<div style="margin-top: 70px; font-size: 8px;">F#5<br>]</div>
</button>
</div>
</div>
</div>
</div>
<script>
const synth = new Tone.Synth().toDestination();
// キーと音階のマッピング
const keyMap = {
'a': 'C4',
'w': 'C#4',
's': 'D4',
'e': 'D#4',
'd': 'E4',
'f': 'F4',
't': 'F#4',
'g': 'G4',
'y': 'G#4',
'h': 'A4',
'u': 'A#4',
'j': 'B4',
'k': 'C5',
'o': 'C#5',
'l': 'D5',
'p': 'D#5',
';': 'E5',
'\'': 'F5',
']': 'F#5',
};
// キーが押されたときの処理
document.addEventListener('keydown', (event) => {
const key = event.key.toLowerCase();
if (keyMap[key]) {
synth.triggerAttackRelease(keyMap[key], "8n");
}
});
// 個別の音を演奏する関数
function playNote(note) {
synth.triggerAttackRelease(note, "8n");
}
// 音階を順番に演奏する関数（既存の機能）
function playSound() {
const notes = ["C4", "D4", "E4", "F4", "G4", "A4", "B4", "C5"];
notes.forEach((note, index) => {
setTimeout(() => {
synth.triggerAttackRelease(note, "8n");
}, index * 200); // 200ms間隔で再生
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment