WordPress初心者の方も、愛用者の方も、
楽しく学べるフォローサイト!

WP-Master.club ヘッダーロゴ

audioタグで、コントローラーを画面下部に固定して表示する方法

先日、自社のテーマソングをサイトに埋め込んでほしいという依頼がありました。

ご要望を汲み取ると、内容は下記のようになりました。

・サイト表示時に自動再生する(ブラウザや端末によっては自動再生されない場合あり)
・自動再生されてもすぐに音が消せるように、またいつでも再生できるように画面上にわかるように停止ボタンを置く

そのコードはこんな感じです。

CSSはベタ書きしましたが、インラインに書かなくても構いません。

結果はこんな感じです。(chrome デスクトップの場合)

audio_fixed

画面下部の中央に固定配置するところがポイントです。

あんまりニーズないと思いますが、もしもこのようなケースがありましたら、是非お試しください^^;