ゆったりWeb手帳

HTML5のaudioタグを使って音楽を再生する

Webでオーディオ再生

ホームページ上で音楽を流す方法はいくつかあります。

最も手っ取り早いのはHTML5で追加されたaudioタグを使う方法です。 これにはブラウザ標準のコントローラが使えるのでとても手軽です。

HTMLにaudioタグを書くだけ。

HTML
<audio src="sample.mp3" controls></audio>

Google Chrome 71ではこのようになります。

audio-controls-chrome

めちゃくちゃ簡単です。

しかし、標準コントローラはブラウザごとにUIが異なるのでホームページでデザインを統一したい時などに厄介です。 例えば、Edgeのコントローラはこんな感じ。

audio-controls-edge

サイズも結構違って、Chromeは 300 x 54、Edgeは 300 x 30 です。

単純に音楽を流したいだけならこの方法が最も手軽です。

参考: <audio>: 埋め込み音声要素 | MDN

WebでAudioを扱うもうひとつの方法はWeb Audio APIを使います。こちらは改めて書こうと思います。

オリジナルコントローラを作る

とりあえず、ブラウザ標準のコントローラが気に入らないので、オリジナルのものを作成しましょう。

audioタグでコントローラを使わずに操作するにはJavaScriptを使う必要があります。 要素のonClickを元にJavaScriptを介してaudioタグを操作します。

HTMLを編集

全体をdivで囲ってコントローラのボタンとなる要素を追加します。 divをボタンにしてますが、別になんの要素でも構いません。

HTML
<div>
  <audio src="sample.mp3"></audio>
  <div id="play">Play</div>
  <div id="stop">Stop</div>
</div>

CSSを追加

div要素をボタンっぽくします。 audioタグにcontrolsを書かなければだいたいコントローラは消えますが念のためCSSでも消します。

CSS
audio {
  display: none
}
#play, #stop {
  display: inline-block;
  width: 60px;
  height: 60px;
  margin: 1em;
  border-radius: 50%;
  background: #ddd;
  text-align: center;
  line-height: 60px;
  cursor: pointer;
}
#play:hover, #stop:hover {
  background: #eee;
}

再生ボタン用にアイコンを作ったり、Font Awesomeなどを使うのも良いですね。
今回は適当プレイヤーなのでダイレクトにPlayと書きます笑

controls-001

JavaScriptを追加

JavaScriptで要素のクリックからaudio.play()を呼び出せば良いだけです。

JavaScript
const audio = document.getElementsByTagName("audio")[0]
const playButton = document.getElementById("play")
const stopButton = document.getElementById("stop")

playButton.addEventListener('click', () => {
  audio.play()
})

stopButton.addEventListener('click', () => {
  audio.pause()
})

まとめ

これで要素からaudioタグを操作し、音楽を再生・停止(一時停止)することができます。 オリジナルのコントローラはこれだけでは機能不十分ですのでさらに追加していきます。

ここまでをひとつのHTMLにまとめるとこんな感じ。

index.html
<html>
<head>
  <title>HTML5のAudioタグテスト</title>
  <style>
    audio {
      display: none
    }
    #play, #stop {
      display: inline-block;
      width: 60px;
      height: 60px;
      margin: 1em;
      border-radius: 50%;
      background: #ddd;
      text-align: center;
      line-height: 60px;
      cursor: pointer;
    }
    #play:hover, #stop:hover {
      background: #eee;
    }
  </style>
</head>
<body>
  <div>
    <audio src="sample.mp3"></audio>
    <div id="play">Play</div>
    <div id="stop">Stop</div>
  </div>
  <script>
    const audio = document.getElementsByTagName("audio")[0]
    const playButton = document.getElementById("play")
    const stopButton = document.getElementById("stop")
    playButton.addEventListener('click', () => {
      audio.play()
    })
    stopButton.addEventListener('click', () => {
      audio.pause()
    })
  </script>
</body>
</html>

初めての技術解説(?)投稿ですが、どこまで詳しく書くのかしっかり決めてから書き始めないとだめですね。 ちょっと細かく書きすぎたので次はもうちょっと適当に書きます。