<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Web Piano</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<style>
body {
font-family: sans-serif;
background-color: #333;
color: white;
text-align: center;
padding-top: 50px;
user-select: none; /* テキスト選択を防ぐ */
}
/* ピアノ全体の枠 */
#piano-container {
position: relative;
display: inline-block;
height: 220px;
background: #222;
padding: 10px;
border-radius: 5px;
}
/* 白鍵のデザイン */
.key.white {
float: left;
width: 40px;
height: 200px;
background: white;
border: 1px solid #ccc;
border-radius: 0 0 3px 3px;
z-index: 1;
box-sizing: border-box; /* 枠線を幅に含める */
}
/* 押された時の白鍵 */
.key.white:active, .key.white.active {
background: #eee;
transform: translateY(2px);
}
/* 黒鍵のデザイン */
.key.black {
position: absolute;
width: 24px;
height: 120px;
background: black;
border-radius: 0 0 3px 3px;
z-index: 2; /* 白鍵より手前に表示 */
}
/* 押された時の黒鍵 */
.key.black:active, .key.black.active {
background: #333;
}
/* 黒鍵の位置調整（左からの距離） */
/* C# */ .key[data-note="C#4"] { left: 42px; }
/* D# */ .key[data-note="D#4"] { left: 82px; }
/* F# */ .key[data-note="F#4"] { left: 162px; }
/* G# */ .key[data-note="G#4"] { left: 202px; }
/* A# */ .key[data-note="A#4"] { left: 242px; }
#start-btn {
margin-bottom: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background: #ff9800;
border: none;
color: white;
}
</style>
</head>
<body>
<h2>Web Simple Piano</h2>
<button id="start-btn">⚠️ クリックして音声をONにする</button>
<br>
<div id="piano-container">
<div class="key white" data-note="C4"></div>
<div class="key white" data-note="D4"></div>
<div class="key white" data-note="E4"></div>
<div class="key white" data-note="F4"></div>
<div class="key white" data-note="G4"></div>
<div class="key white" data-note="A4"></div>
<div class="key white" data-note="B4"></div>
<div class="key white" data-note="C5"></div>
<div class="key black" data-note="C#4"></div>
<div class="key black" data-note="D#4"></div>
<div class="key black" data-note="F#4"></div>
<div class="key black" data-note="G#4"></div>
<div class="key black" data-note="A#4"></div>
</div>
<script>
const synth = new Tone.Synth().toDestination();
// スタートボタン処理
const startBtn = document.getElementById('start-btn');
startBtn.addEventListener('click', async () => {
await Tone.start();
startBtn.style.display = 'none'; // 押したら消す
});
// 鍵盤要素をすべて取得
const keys = document.querySelectorAll('.key');
keys.forEach(key => {
// マウスを押した時
key.addEventListener('mousedown', () => {
const note = key.dataset.note; // data-note属性の中身を取得
synth.triggerAttack(note); // 音を出し続ける
key.classList.add('active'); // 見た目を「押した状態」に
});
// マウスを離した時
key.addEventListener('mouseup', () => {
synth.triggerRelease(); // 音を止める
key.classList.remove('active');
});
// マウスが鍵盤から外れた時（押しっぱなし防止）
key.addEventListener('mouseleave', () => {
synth.triggerRelease();
key.classList.remove('active');
});
});
</script>
</body>
</html>
使用変数
| charset | |
| class | |
| display | |
| id | |
| key | |
| keys | |
| lang | |
| note | |
| src | |
| startBtn | |
| synth |