[CSS] audioタグのデザインを変えたい

公開日:2018/11/28 更新日:2019/05/31

やりたいこと

サイト上で音源の再生を行うために、HTML5からaudioタグが実装されました
しかしこのaudioタグで生成されるインターフェースは、ブラウザによって見た目にかなり差が出ます
また、再生＆一時停止ボタンの他にシークバーや音量調節ボタンなどが付随しており、これらのオンオフを切り替えることができません
そんなときはaudioタグの機能を拡張してくれるプラグイン「audio.js」の利用がオススメです。音源再生用のインターフェースを自由にスタイルすることができます

「audio.js」をWordPress環境に導入する

こちらのサイトからプラグインをダウンロードします
ダウンロードファイルを解凍し、中にある「audiojs」をサーバーにアップロードします（他のファイルは不要です）
プラグインのソースコード「audio.min.js」をインクルードする（下記のサンプルコードを参照）

<?php
function enqueue_my_script() {
    wp_enqueue_script( 'functions_js', get_stylesheet_directory_uri() . '/js/audiojs/audio.min.js', array('jquery'), false, false );
}
add_action('wp_enqueue_scripts', 'enqueue_my_script');
?>

「audio.js」を実行する（下記のサンプルコードを参照）

jQuery(function($) {
    audiojs.events.ready(function() {
        var as = audiojs.createAll();
    });
});

音源を再生したいページに、audioタグを設置する（下記のサンプルコードを参照）

<audio src="./music.mp3" preload="auto">

再生ボタンだけのデザインにスタイルし直す

audio.jsで生成された音源再生用のインターフェースには、各ボタンにクラスが割り当てされているため自由にスタイルを書き換えることができます
一例として、シンプルな再生＆一時停止ボタンだけに見た目と機能を絞るスタイル例を紹介します

.audiojs,
.audiojs > .play-pause,
.audiojs > .play-pause > p {
    width: 30px;
    height: 30px;
}

.audiojs {
    display: table;
    margin: 0px;
    background: none;
    box-shadow: none;
    border: 2px solid #000;
}

.audiojs > .play-pause {
    padding: 0px;
    border: none;
}

.audiojs > .play-pause > p {
    position: relative;
    background: none;
}

.audiojs > .play-pause > .play::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-25%) translateY(-50%);
    width: 0px;
    height: 0px;
    border: 8px solid transparent;
    border-left: 12px solid #000;
    content: "";
}

.audiojs > .play-pause > .pause::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 4px;
    height: 12px;
    border-left: 4px solid #000;
    border-right: 4px solid #000;
    content: "";
}

.audiojs > .scrubber {
    display: none;
}

.audiojs > .time {
    display: none;
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。