HTML5のaudioタグはスタイルをカスタマイズできる？実装方法を解説

HTML5のaudioタグのスタイリングは可能

HTML5の<audio>タグは、スタイルをカスタマイズすることが可能です。controls属性を使用した場合、ブラウザ標準のプレイヤーが表示されますが、この標準UIを使わずに独自のデザインを実装することもできます。

controls属性を外して独自UIを作る

デフォルトのブラウザプレイヤーには、ChromeやFirefox、Safariなど各ブラウザごとに異なる見た目があり、細かいデザイン調整が難しいという課題があります。

そこで、controls属性を削除すると、ブラウザ組み込みのユーザーインターフェースを非表示にできます。その上で、JavaScriptから音声を操作する独自のコントロールボタンを配置しましょう。

<audio id = "player" src = "kalimba.mp3"></audio>
<div>
    <button onclick = "document.getElementById('player').play()">再生</button>
    <button onclick = "document.getElementById('player').pause()">一時停止</button>
    <button onclick = "document.getElementById('player').volume += 0.2">音量+</button>
    <button onclick = "document.getElementById('player').volume -= 0.2">音量-</button>
</div>

上記の例では、以下の4つのボタンを実装しています。

• 再生ボタン：play()メソッドで音声を再生します。
• 一時停止ボタン：pause()メソッドで再生を一時停止します。
• 音量アップボタン：volumeプロパティに0.2を加算して音量を上げます。
• 音量ダウンボタン：volumeプロパティから0.2を減算して音量を下げます。

CSSで自由にデザインする

さらに、これらの各要素にCSSクラスを追加すれば、ボタンの色やサイズ、ホバー時のエフェクトなど、サイトのデザインに合わせて自由にスタイリングできます。

.custom-btn {
    background-color: #4a90d9;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}
.custom-btn:hover {
    background-color: #357abd;
}

まとめ

controls属性を付ければ手軽に標準プレイヤーを利用でき、外せばJavaScriptとCSSを組み合わせてオリジナルのオーディオプレイヤーを構築できます。ブランドイメージに合わせた統一感のあるデザインを目指す場合は、後者の方法がおすすめです。