MP3音楽プレーヤーをドロワーメニューで表示する方法
MP3音楽プレーヤーをドロワーメニューで表示する方法を紹介します。このサンプルでは、「音楽プレーヤーを開く」ボタンをクリックすると画面左側からドロワーメニューがスライドして表示され、その中に配置したHTMLのaudio要素でMP3音声を再生できます。音楽プレーヤーを普段は画面外へ隠しておき、必要なときだけ表示できるため、ページ内の表示領域を広く使いながら音声コンテンツを設置できます。
音楽の試聴、商品やサービスの音声紹介、会員サイトの音声コンテンツ、学習サイトのリスニング教材など、現在のページを表示したまま音声を再生してもらいたい場面に利用できます。ドロワーメニューを開いている間はページ側へ半透明の背景を表示し、「閉じる」ボタンをクリックすると音声を停止して再生位置を先頭へ戻してからドロワーメニューを閉じます。背景部分をクリックしても閉じないため、閉じる操作はボタンだけに統一しています。
HTMLでは見出し、説明文、MP3ファイル、ボタンの文字を変更でき、CSSではドロワーメニューの横幅、余白、音楽プレーヤーの表示幅、背景色、ボタンの色、スライド速度などを調整できます。JavaScriptではis-activeクラスの追加と削除によってドロワーメニューと背景を切り替え、閉じるときにaudio要素のpause()とcurrentTimeを使用して音声を初期状態へ戻します。画面幅640px以下では余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「音楽プレーヤーを開く」をクリックすると左側からドロワーメニューが表示され、MP3音声を再生できます。音声が再生されるため、事前に端末の音量をご確認ください。「閉じる」をクリックすると音声が停止し、再生位置が先頭へ戻ります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>MP3音楽プレーヤーをドロワーメニューで表示する</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- サンプル表示エリア -->
<div class="mp3-music-drawer-menu_wrap">
<!-- タイトル -->
<div class="mp3-music-drawer-menu_title">
MP3音楽プレーヤー
</div>
<!-- 説明文 -->
<p class="mp3-music-drawer-menu_text">
ボタンをクリックすると、左側から音楽プレーヤーが表示されます。
</p>
<!-- ドロワーメニューを開くボタン -->
<button
class="mp3-music-drawer-menu_open"
type="button"
data-mp3-music-drawer-open="">
音楽プレーヤーを開く
</button>
</div>
<!-- ドロワーメニュー表示中の半透明背景 -->
<div
class="mp3-music-drawer-menu_overlay"
data-mp3-music-drawer-overlay=""></div>
<!-- MP3音楽プレーヤーを表示するドロワーメニュー -->
<div
class="mp3-music-drawer-menu_drawer"
data-mp3-music-drawer=""
role="dialog"
aria-modal="true"
aria-labelledby="mp3-music-drawer-menu-heading">
<!-- ドロワーメニューの見出し -->
<div
class="mp3-music-drawer-menu_heading"
id="mp3-music-drawer-menu-heading">
MP3音楽プレーヤー
</div>
<!-- 音声の説明文 -->
<p class="mp3-music-drawer-menu_description">
ドロワーメニュー内で音楽を再生できます。
</p>
<!-- MP3音楽プレーヤー -->
<div class="mp3-music-drawer-menu_audio">
<audio
controls=""
data-mp3-music-drawer-player="">
<!--
【MP3ファイルの設置方法】
1. sampleフォルダ内へmusicフォルダを作成します。
2. 再生したいMP3ファイルをmusicフォルダへ配置します。
3. このサンプルではファイル名をsample.mp3として読み込みます。
4. 別のファイル名を使用する場合は、下記のsrcも同じ名前へ変更してください。
配置先：
sample/music/sample.mp3
-->
<source
src="music/sample.mp3"
type="audio/mpeg">
お使いのブラウザはaudioタグに対応していません。
</audio>
</div>
<!-- ドロワーメニューを閉じるボタン -->
<button
class="mp3-music-drawer-menu_close"
type="button"
data-mp3-music-drawer-close="">
閉じる
</button>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されており、「音楽プレーヤーを開く」ボタンをクリックすると画面左側からドロワーメニューが表示され、その中でMP3音声を再生できます。HTMLで画面構成と音声ファイルの読み込み、CSSでドロワーメニューや音楽プレーヤーのデザイン、JavaScriptで開閉処理と音声の停止処理を行います。
配布するサンプルにはMP3ファイルは含まれていません。再生したいMP3ファイルを利用者自身で用意し、sampleフォルダ内のmusicフォルダへ配置してください。このサンプルではmusic/sample.mp3を読み込む構成になっているため、用意した音声をsample.mp3というファイル名で保存すれば、そのまま再生できます。
ドロワーメニューを閉じると、再生中の音声を停止して再生位置を先頭へ戻します。半透明の背景部分をクリックしても閉じない仕様で、ドロワーメニューを閉じる操作は「閉じる」ボタンだけで行います。
sample/
├── index.html
├── style.css
├── script.js
└── music/
└── sample.mp3（各自で用意）
各ファイルの役割
index.html
サンプル表示エリア、ドロワーメニュー、半透明背景、MP3音楽プレーヤー、開くボタン、閉じるボタンを配置しています。タイトルや説明文、ボタンの文字、音声ファイルの読み込み先を変更できます。
style.css
サンプル表示エリア、ドロワーメニュー、半透明背景、音楽プレーヤー、ボタンのデザインを管理しています。ドロワーメニューの横幅、背景色、余白、影、音楽プレーヤーの表示幅などを変更できます。
script.js
ドロワーメニューの表示・非表示を制御しています。「音楽プレーヤーを開く」をクリックするとドロワーメニューと半透明背景を表示し、「閉じる」をクリックすると音声を停止して再生位置を先頭へ戻してから閉じます。
music/sample.mp3
ドロワーメニュー内で再生するMP3ファイルです。サンプルには含まれていないため、利用者自身で用意してsample/music/へ配置してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、その中へmusicフォルダを作成します。再生したいMP3ファイルをsample.mp3という名前でmusicフォルダへ保存してください。配置場所はsample/music/sample.mp3です。
MP3ファイル名を変更する場合は、index.htmlにあるsrc="music/sample.mp3"も実際のファイル名へ変更してください。例えばsong.mp3を使用する場合は、ファイルをsample/music/song.mp3へ配置し、src属性をsrc="music/song.mp3"へ変更します。
準備ができたらsample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込む構成になっています。「音楽プレーヤーを開く」をクリックすると左側からドロワーメニューが表示され、audio要素の標準コントロールからMP3音声を再生できます。「閉じる」をクリックすると音声が停止し、再生位置が先頭へ戻ってからドロワーメニューが閉じます。
カスタマイズできる内容
index.htmlでは「MP3音楽プレーヤー」のタイトル、説明文、「音楽プレーヤーを開く」「閉じる」のボタン文字、再生するMP3ファイルを変更できます。別のMP3ファイルを使用する場合はmusicフォルダ内のファイルを差し替え、必要に応じてsource要素のsrc属性を変更します。
style.cssではサンプル表示エリアの横幅や余白、ドロワーメニューの横幅、半透明背景の濃さ、音楽プレーヤーの表示幅、ボタンの色、ドロワーメニューの影、スライド速度などを変更できます。script.jsでは、閉じるときにpause()で音声を停止し、currentTime=0で再生位置を先頭へ戻す処理を行っています。
数値調整
style.css
max-width:700px;
サンプル表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
サンプル表示エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
サンプル表示エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
サンプル表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
padding:12px 26px;
「音楽プレーヤーを開く」ボタンの内側余白です。上下の12pxを大きくすると高さが増え、左右の26pxを大きくすると横幅が広がります。
background:rgba(15,23,42,.35);
半透明背景の濃さです。.35を大きくすると背景が濃くなり、小さくすると薄くなります。
width:420px;
ドロワーメニューの横幅です。値を大きくすると音楽プレーヤーの表示領域も広がり、小さくするとコンパクトになります。
max-width:90%;
ドロワーメニューが画面幅に対して占める最大幅です。値を変更すると狭い画面での表示幅を調整できます。
padding:32px 24px;
ドロワーメニューの内側余白です。上下の32pxと左右の24pxを変更すると、音楽プレーヤーや文章とドロワーメニュー端との間隔を調整できます。
transform:translateX(calc(-100% - 40px));
閉じている状態のドロワーメニューを画面左側へ隠す位置です。40pxを大きくすると、さらに左側へ移動します。
transition:transform .3s ease, visibility .3s ease;
ドロワーメニューを開閉する時間です。.3sを大きくするとゆっくり、小さくすると速く切り替わります。
box-shadow:12px 0 30px rgba(15,23,42,.18);
開いたドロワーメニューの右側へ表示する影です。12pxは横方向の位置、30pxはぼかしの大きさです。
margin:0 0 28px;
音楽プレーヤーと「閉じる」ボタンの間隔です。28pxを大きくすると間隔が広がり、小さくすると狭くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssではサンプル表示エリアへwidth:100%とmax-width:700pxを設定し、ドロワーメニューにはwidth:420pxとmax-width:90%を設定しています。音楽プレーヤーにもwidth:100%を指定しているため、ドロワーメニューの横幅に合わせて表示幅が調整されます。
画面幅640px以下では、サンプル表示エリアをpadding:24px 18px;、ドロワーメニューもpadding:24px 18px;へ変更して左右の余白を抑えています。スマートフォン・タブレット・PCの画面幅に合わせてドロワーメニューと音楽プレーヤーを表示できます。
コメント