MP3音楽プレーヤーをドロワーメニューで表示する方法
MP3音楽プレーヤーをドロワーメニューで表示する方法を紹介します。ボタンをクリックすると画面の横からドロワーメニューが表示され、その中でMP3ファイルを再生できるシンプルなサンプルです。HTML・CSS・JavaScriptのみで実装しているため、ライブラリを使わずに導入できます。
サンプルコードでは、ドロワーメニュー内へHTML5のaudioタグを配置し、MP3ファイルの再生・一時停止・シークバー操作・音量調整を利用できます。ドロワーメニューを閉じると音楽も停止するため、ページ遷移や操作中に音声だけが再生され続けることを防げます。MP3ファイルはご自身で用意したものへ簡単に差し替えられます。
商品紹介ページの音声ガイドや、会員サイトの音声コンテンツ、お問い合わせページの音声案内、管理画面での音声確認など、さまざまな場面で活用できます。音楽ファイルの変更やタイトル・説明文、ドロワーメニューの幅や色なども自由に編集できるため、自分のWebサイトに合わせた音楽プレーヤーへカスタマイズしやすい構成です。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
「音楽プレーヤーを開く」をクリックするとドロワーメニューが表示され、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-drawer-menu_wrap">
<!-- タイトル -->
<div class="mp3-drawer-menu_title">
MP3音楽プレーヤー
</div>
<!-- 説明文 -->
<p class="mp3-drawer-menu_text">
ボタンをクリックするとドロワーメニュー内でMP3ファイルを再生できます。
</p>
<!-- MP3ファイルについての案内 -->
<p class="mp3-drawer-menu_notice">
このサンプルにはMP3ファイルは含まれていません。再生するMP3ファイルを用意し、musicフォルダへ配置してください。
</p>
<!-- ドロワーを開くボタン -->
<button
type="button"
class="mp3-drawer-menu_open"
data-drawer-open
>
音楽プレーヤーを開く
</button>
</div>
<!-- ドロワー背景 -->
<div
class="mp3-drawer-menu_overlay"
data-drawer-overlay
>
<!-- ドロワー本体 -->
<div
class="mp3-drawer-menu_drawer"
role="dialog"
aria-modal="true"
aria-labelledby="drawer-title"
>
<!-- タイトル -->
<div
class="mp3-drawer-menu_drawer-title"
id="drawer-title"
>
MP3音楽プレーヤー
</div>
<!-- 説明文 -->
<p class="mp3-drawer-menu_drawer-text">
ドロワーメニュー内でMP3ファイルを再生できます。
</p>
<!-- 音楽プレーヤー -->
<audio
class="mp3-drawer-menu_audio"
controls
>
<!--
MP3ファイル
musicフォルダへ配置したMP3ファイルを指定します。
サンプルにはMP3ファイルは含まれていないため、
ご自身で用意してください。
-->
<source
src="music/sample.mp3"
type="audio/mpeg"
>
お使いのブラウザはaudioタグに対応していません。
</audio>
<!-- ドロワーを閉じるボタン -->
<button
type="button"
class="mp3-drawer-menu_close"
data-drawer-close
>
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された、MP3音楽プレーヤーをドロワーメニューで表示するサンプルです。ボタンをクリックすると画面左側からドロワーメニューが表示され、その中でMP3ファイルを再生できます。HTMLで画面構成、CSSでデザイン、JavaScriptでドロワーメニューの開閉や音楽停止処理を行うため、役割ごとに編集しやすい構成になっています。
配布するサンプルにはMP3ファイルは含まれていません。再生したいMP3ファイルは利用者自身で用意し、musicフォルダへ配置してください。MP3ファイルを差し替えるだけで、好きな音楽や音声ファイルを再生できます。
sample/
├── index.html
├── style.css
├── script.js
└── music/
└── sample.mp3（各自で用意）
各ファイルの役割
index.html
ドロワーメニュー本体、音楽プレーヤー、開閉ボタンを配置します。audioタグのsource要素で読み込むMP3ファイルを指定できます。
style.css
ドロワーメニューの幅、背景色、余白、ボタン、音楽プレーヤー、レスポンシブ表示など見た目全体を管理します。
script.js
ドロワーメニューの開閉処理と、閉じる際に音楽を停止して再生位置を先頭へ戻す処理を行います。
music/sample.mp3
再生するMP3ファイルです。サンプルには含まれていないため、ご自身で用意して配置してください。
設置方法・使い方
sampleフォルダをそのまま利用します。musicフォルダへ再生したいMP3ファイルを配置し、index.html内のaudioタグのsource要素で読み込むファイル名を必要に応じて変更してください。その後、sample/index.htmlをブラウザで開くと利用できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、読み込むMP3ファイルを変更できます。style.cssではドロワーメニューの幅、色、余白、角丸、影、ボタンデザインなどを変更できます。script.jsではドロワーメニューの開閉処理や、閉じる際の再生停止処理などを自由に編集できます。
数値調整
style.cssの「width:420px;」はドロワーメニューの横幅です。値を変更するとドロワーメニューの大きさが変わります。
style.cssの「animation:mp3-drawer-slide .35s ease forwards;」の「.35」は0.35秒を表します。値を大きくすると開くアニメーションがゆっくりになり、小さくすると速く表示されます。
style.cssの「transition:background .2s ease;」の「.2」は0.2秒を表します。値を変更するとボタンの色が変化する速度を調整できます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「max-width:90%;」「width:100%;」「@media (max-width:640px)」を使用しているため、スマートフォン・タブレット・PCでも画面サイズに応じてドロワーメニューや音楽プレーヤーが自動的に調整され、レイアウトが崩れにくくなっています。
コメント