소개

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

Reference

이 문제에 관하여(HTML로 피아노를 만들자.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tomowarkar/items/b4be8a7c9d719a61cc47

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다