HTMLでピアノを作ろうや

Posted at 2019-12-17

この記事はtomowarkar ひとりAdvent Calendar 2019の17日目の記事です。

はじめに

HTMLとJavaScriptを書いてサクッとピアノを実装したってだけのお話。

デモサイト

ピアノデモサイト

コード

piano/
├── index.html
├── script.js
├── sounds
│   ├── do.mp3
│   ├── fa.mp3
│   ├── mi.mp3
│   ├── ra.mp3
│   ├── re.mp3
│   ├── si.mp3
│   └── so.mp3
└── style.css

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0" />
  <title></title>
  <link rel="stylesheet" href="style.css" type="text/css">
  <script defer src="script.js"></script>
</head>

<body>
  <div class="piano">
    <div data-sound="do" class="key white"></div>
    <div class="black"></div>
    <div data-sound="re" class="key white"></div>
    <div class="black"></div>
    <div data-sound="mi" class="key white"></div>
    <div data-sound="fa" class="key white"></div>
    <div class="black"></div>
    <div data-sound="so" class="key white"></div>
    <div class="black"></div>
    <div data-sound="ra" class="key white"></div>
    <div class="black"></div>
    <div data-sound="si" class="key white"></div>
  </div>
  <audio id="do" src="sounds/do.mp3"></audio>
  <audio id="re" src="sounds/re.mp3"></audio>
  <audio id="mi" src="sounds/mi.mp3"></audio>
  <audio id="fa" src="sounds/fa.mp3"></audio>
  <audio id="so" src="sounds/so.mp3"></audio>
  <audio id="ra" src="sounds/ra.mp3"></audio>
  <audio id="si" src="sounds/si.mp3"></audio>
</body>

</html>

style.css

*{
  box-sizing: border-box;
}

body{
  background-color: green;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.piano{
  display: flex;
}

.white{
  width:80px;
  height: 320px;
  background-color: white;
  border: 1px solid gray;
}

.black{
  width:48px;
  height: 192px;
  background-color: black;
  margin-left: -24px;
  margin-right: -24px;
  z-index: 2;
}

script.js

const keys = document.querySelectorAll('.key')

keys.forEach(key=>{
  key.addEventListener('click', ()=>playPiano(key))
})

function playPiano(key) {
  const audio = document.getElementById(key.dataset.sound)
  audio.currentTime = 0
  audio.play()
}

おわりに

案外簡単に実装できますねー

以上明日も頑張ります！！
tomowarkar ひとりAdvent Calendar Advent Calendar 2019

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up