プログラマならクイズもプログラミングでやっちゃうよね？

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

この記事を三行にまとめると

ボタンを押したら音声を再生
pを押したら音声を再生
押したキーに応じて再生する音声を分ける

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

ボタンを押したら音声を再生

<button type="button" id="button" style="font-size:60px">再生</button>
<script>
  audio = new Audio('sample.mp3');
  button = document.getElementById('button');
  button.onclick = function() {
    audio.play();
  }
</script>

pを押したら音声を再生

<div style="font-size:60px">
  押したキー：
  <span id="text"></span>
</div>
<script>
  audio = new Audio('sample.mp3');
  text = document.getElementById('text');

  window.addEventListener('keydown', function(event) {
    if(event.key == 'p') {
      audio.play();
    }
    text.innerHTML = event.key;
  }
</script>

押したキーに応じて再生する音声を分ける

<div style="font-size:60px">
  押したキー：
  <span id="text"></span>
</div>
<script>
  text = document.getElementById('text');

  window.addEventListener('keydown', function(event) {
    audio = new Audio(event.key + '.mp3');
    audio.play();
    text.innerHTML = event.key;
  }
</script>