Webでオーディオ再生
ホームページ上で音楽を流す方法はいくつかあります。
最も手っ取り早いのはHTML5で追加された
audioタグを使う方法です。これにはブラウザ標準のコントローラが使えるのでとても手軽です。
HTMLに
audioタグを書くだけ。HTML
<audio src="sample.mp3" controls></audio>Google Chrome 71ではこのようになります。
めちゃくちゃ簡単です。
しかし、標準コントローラはブラウザごとにUIが異なるのでホームページでデザインを統一したい時などに厄介です。
例えば、Edgeのコントローラはこんな感じ。
サイズも結構違って、Chromeは 300 x 54、Edgeは 300 x 30 です。
単純に音楽を流したいだけならこの方法が最も手軽です。
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と書きます笑
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>初めての技術解説(？)投稿ですが、どこまで詳しく書くのかしっかり決めてから書き始めないとだめですね。
ちょっと細かく書きすぎたので次はもうちょっと適当に書きます。