MP3音楽プレーヤーをモーダルウインドウで表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

MP3音楽プレーヤーをモーダルウインドウで表示する方法

MP3音楽プレーヤーをモーダルウインドウで表示する方法を紹介します。ページ内のボタンをクリックするとモーダルウインドウが開き、その中に配置したHTMLのaudioタグからMP3音源を再生できるサンプルです。音楽プレーヤーを常時表示せず、必要なときだけ開けるため、ページ全体をすっきり見せながら音声コンテンツを案内できます。

JavaScriptではモーダルウインドウの開閉を制御し、右上の「×」ボタンを押したときだけ閉じる仕様にしています。モーダル外をクリックしても閉じないため、再生操作中の誤操作を防ぎやすい構成です。また、モーダルを閉じると再生中の音源を停止し、再生位置を先頭へ戻します。

音声サンプル、商品紹介、サービス案内、ポートフォリオ、会員サイトのコンテンツ紹介など、MP3をページ内で再生したい場面に利用できます。HTML・CSS・バニラJavaScriptを分けているため、ボタンの色、モーダルの幅、余白、角丸、背景色、音源ファイルを編集しやすく、初心者でも導入しやすい構成です。スマートフォン・タブレット・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>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- モーダルを開くボタン -->
  <div class="mp3-music-player-modal-window_demo">

    <!-- デモタイトル -->
    <div class="mp3-music-player-modal-window_title">
      MP3音楽プレーヤー
    </div>

    <!-- 操作説明 -->
    <p class="mp3-music-player-modal-window_text">
      ボタンを押すと音楽プレーヤーが表示されます。
    </p>

    <!-- MP3ファイルの注意書き -->
    <p class="mp3-music-player-modal-window_notice">
      このサンプルにはMP3ファイルは含まれていません。再生するMP3ファイルを用意し、musicフォルダへ配置してご利用ください。
    </p>

    <!-- モーダルを開くボタン -->
    <button
      type="button"
      class="mp3-music-player-modal-window_open"
      id="mp3MusicPlayerModalOpen"
    >
      音楽プレーヤーを開く
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="mp3-music-player-modal-window_overlay"
    id="mp3MusicPlayerModal"
    aria-hidden="true"
  >

    <!-- モーダル本体 -->
    <div
      class="mp3-music-player-modal-window_window"
      role="dialog"
      aria-modal="true"
      aria-labelledby="mp3MusicPlayerModalTitle"
    >

      <!-- モーダル上部 -->
      <div class="mp3-music-player-modal-window_header">

        <!-- モーダルタイトル -->
        <div
          class="mp3-music-player-modal-window_heading"
          id="mp3MusicPlayerModalTitle"
        >
          MP3音楽プレーヤー
        </div>

        <!-- モーダルを閉じるボタン -->
        <button
          type="button"
          class="mp3-music-player-modal-window_close"
          id="mp3MusicPlayerModalClose"
          aria-label="モーダルを閉じる"
        >
          ×
        </button>

      </div>

      <!-- MP3音楽プレーヤー -->
      <audio
        class="mp3-music-player-modal-window_audio"
        id="mp3MusicPlayerAudio"
        controls
      >
        <source src="music/sample.mp3" type="audio/mpeg">
        お使いのブラウザはaudioタグに対応していません。
      </audio>

    </div>

  </div>

  <script src="script.js"></script>

</body>
</html>

/* =========================================
   ページ全体
========================================= */
*{
  box-sizing:border-box; /* 幅と高さに余白・枠線を含める */
}

body{
  margin:0; /* ブラウザ標準の余白を削除 */
  padding:40px 20px; /* ページ周囲の余白 */
  background:#f8fafc; /* ページ背景色 */
  color:#0f172a; /* 基本文字色 */
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif; /* 基本フォント */
}

/* =========================================
   デモ表示エリア
========================================= */
.mp3-music-player-modal-window_demo{
  width:100%; /* 画面幅に合わせる */
  max-width:700px; /* 表示エリアの最大幅 */
  margin:0 auto; /* 水平方向中央配置 */
  padding:32px; /* 内側の余白 */
  border:1px solid #e5e7eb; /* 外枠の色と太さ */
  border-radius:18px; /* 角の丸み */
  background:#ffffff; /* 背景色 */
  text-align:center; /* 内容を中央揃え */
  box-shadow:0 10px 30px rgba(15,23,42,.08); /* カードの影 */
}

/* =========================================
   デモタイトル
========================================= */
.mp3-music-player-modal-window_title{
  margin:0 0 14px; /* 下側の余白 */
  color:#0f172a; /* 文字色 */
  font-size:24px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
}

/* =========================================
   操作説明
========================================= */
.mp3-music-player-modal-window_text{
  margin:0 0 18px; /* 下側の余白 */
  color:#475569; /* 文字色 */
  line-height:1.8; /* 行間 */
}

/* =========================================
   音声再生の注意書き
========================================= */
.mp3-music-player-modal-window_notice{
  margin:0 0 22px; /* 下側の余白 */
  padding:14px 16px; /* 内側の余白 */
  border:1px solid #bfdbfe; /* 枠線の色と太さ */
  border-radius:10px; /* 角の丸み */
  background:#eff6ff; /* 背景色 */
  color:#1e3a8a; /* 文字色 */
  font-size:14px; /* 文字サイズ */
  line-height:1.8; /* 行間 */
  text-align:left; /* 文章を左揃え */
}

/* =========================================
   モーダルを開くボタン
========================================= */
.mp3-music-player-modal-window_open{
  min-height:48px; /* タップしやすい最小高さ */
  padding:12px 28px; /* ボタン内側の余白 */
  border:none; /* 標準の枠線を削除 */
  border-radius:10px; /* 角の丸み */
  background:#2563eb; /* ボタン背景色 */
  color:#ffffff; /* 文字色 */
  font-size:16px; /* 文字サイズ */
  cursor:pointer; /* マウスカーソルを指型に変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

.mp3-music-player-modal-window_open:hover{
  background:#1d4ed8; /* ホバー時の背景色 */
}

/* =========================================
   モーダル背景
========================================= */
.mp3-music-player-modal-window_overlay{
  position:fixed; /* 画面全体へ固定 */
  inset:0; /* 上下左右を0にする */
  display:none; /* 初期状態では非表示 */
  align-items:center; /* 垂直方向中央配置 */
  justify-content:center; /* 水平方向中央配置 */
  padding:20px; /* 画面端との余白 */
  background:rgba(15,23,42,.55); /* 半透明の背景色 */
  z-index:9999; /* 他の要素より前面へ表示 */
}

.mp3-music-player-modal-window_overlay.is-open{
  display:flex; /* モーダル表示時に中央配置 */
}

/* =========================================
   モーダル本体
========================================= */
.mp3-music-player-modal-window_window{
  width:100%; /* 画面幅に合わせる */
  max-width:500px; /* モーダルの最大幅 */
  padding:28px; /* 内側の余白 */
  border-radius:18px; /* 角の丸み */
  background:#ffffff; /* 背景色 */
  box-shadow:0 25px 60px rgba(0,0,0,.25); /* モーダルの影 */
}

/* =========================================
   モーダル上部
========================================= */
.mp3-music-player-modal-window_header{
  display:flex; /* 横並び */
  align-items:center; /* 垂直方向中央揃え */
  justify-content:space-between; /* 両端へ配置 */
  gap:16px; /* 要素間の余白 */
  margin-bottom:18px; /* 下側の余白 */
}

/* =========================================
   モーダルタイトル
========================================= */
.mp3-music-player-modal-window_heading{
  color:#0f172a; /* 文字色 */
  font-size:22px; /* 文字サイズ */
  font-weight:700; /* 文字の太さ */
}

/* =========================================
   モーダルを閉じるボタン
========================================= */
.mp3-music-player-modal-window_close{
  flex-shrink:0; /* ボタンの縮小を防ぐ */
  width:40px; /* ボタンの横幅 */
  height:40px; /* ボタンの高さ */
  padding:0; /* 内側の余白を削除 */
  border:none; /* 標準の枠線を削除 */
  border-radius:50%; /* 円形にする */
  background:#e2e8f0; /* 背景色 */
  color:#0f172a; /* 文字色 */
  font-size:24px; /* ×印のサイズ */
  line-height:1; /* 行間を調整 */
  cursor:pointer; /* マウスカーソルを指型に変更 */
  transition:background .2s ease; /* 0.2秒で背景色を変化 */
}

.mp3-music-player-modal-window_close:hover{
  background:#cbd5e1; /* ホバー時の背景色 */
}

/* =========================================
   MP3音楽プレーヤー
========================================= */
.mp3-music-player-modal-window_audio{
  display:block; /* ブロック要素として表示 */
  width:100%; /* モーダル幅に合わせる */
}

/* =========================================
   スマートフォン対応
========================================= */
@media screen and (max-width:640px){

  body{
    padding:24px 12px; /* 小さい画面でページ余白を縮小 */
  }

  .mp3-music-player-modal-window_demo{
    padding:24px; /* 小さい画面で内側の余白を縮小 */
  }

  .mp3-music-player-modal-window_title{
    font-size:21px; /* 小さい画面でタイトルを縮小 */
  }

  .mp3-music-player-modal-window_window{
    padding:22px; /* 小さい画面でモーダル余白を縮小 */
  }

  .mp3-music-player-modal-window_heading{
    font-size:19px; /* 小さい画面で見出しを縮小 */
  }

}

// モーダル表示に使用する要素を取得
const mp3MusicPlayerModal = document.getElementById(
  'mp3MusicPlayerModal'
);

const mp3MusicPlayerModalOpen = document.getElementById(
  'mp3MusicPlayerModalOpen'
);

const mp3MusicPlayerModalClose = document.getElementById(
  'mp3MusicPlayerModalClose'
);

const mp3MusicPlayerAudio = document.getElementById(
  'mp3MusicPlayerAudio'
);

// 開くボタンを押したときにモーダルを表示
mp3MusicPlayerModalOpen.addEventListener('click', () => {

  mp3MusicPlayerModal.classList.add('is-open');
  mp3MusicPlayerModal.setAttribute('aria-hidden', 'false');

});

// ×ボタンを押したときだけモーダルを閉じる
mp3MusicPlayerModalClose.addEventListener('click', () => {

  // 再生中のMP3音源を停止
  mp3MusicPlayerAudio.pause();

  // 再生位置を先頭へ戻す
  mp3MusicPlayerAudio.currentTime = 0;

  // モーダルを非表示にする
  mp3MusicPlayerModal.classList.remove('is-open');
  mp3MusicPlayerModal.setAttribute('aria-hidden', 'true');

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルを開くボタン、モーダル本体、MP3音楽プレーヤーを配置し、CSSではデモ表示エリアやモーダル背景、ボタン、音楽プレーヤーなどのデザインを設定します。JavaScriptではモーダルの開閉を行い、モーダルを閉じたときに再生中のMP3音源を停止して再生位置を先頭へ戻します。再生するMP3ファイルはZIPには含まれていないため、利用者自身で用意してmusicフォルダへ配置します。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlはモーダルとMP3音楽プレーヤーを構成するファイルです。「MP3音楽プレーヤー」のタイトル、操作説明、注意書き、ボタンの文字、モーダルタイトルを変更できます。audio要素のmusic/sample.mp3で、利用者自身が用意するMP3ファイルを読み込みます。

style.cssはデモ表示エリア、モーダル背景、モーダル本体、開くボタン、閉じるボタン、MP3音楽プレーヤーのデザインを設定するファイルです。横幅、余白、背景色、文字色、枠線、角丸、影などを変更できます。

script.jsはモーダルの開閉を制御するファイルです。「音楽プレーヤーを開く」ボタンをクリックするとis-openクラスを追加してモーダルを表示します。「×」ボタンをクリックすると、MP3音源を停止して再生位置を先頭へ戻したあと、is-openクラスを削除してモーダルを非表示にします。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。MP3ファイルはZIPに含まれていないため、sampleフォルダ内にmusicフォルダを作成し、利用者自身で用意したMP3ファイルをsample.mp3というファイル名で配置してください。配置後はsample/music/sample.mp3となります。別のファイル名を使用する場合は、index.htmlの<source src="music/sample.mp3" type="audio/mpeg">にあるmusic/sample.mp3を、実際に配置したMP3ファイルのパスへ変更します。

すべての準備ができたらsample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsを読み込んで動作します。「音楽プレーヤーを開く」をクリックするとモーダルが表示され、audio要素の再生ボタンからMP3音源を再生できます。モーダル右上の「×」ボタンをクリックすると、再生中の音源が停止し、再生位置が先頭へ戻ってからモーダルが閉じます。

カスタマイズできる内容
index.htmlでは「MP3音楽プレーヤー」のタイトル、操作説明、注意書き、開くボタンの文字、モーダルタイトル、再生するMP3ファイルのパスを変更できます。別のMP3ファイルを使用する場合は、audio要素内のsrc="music/sample.mp3"を実際の配置先に合わせて変更してください。

style.cssではデモ表示エリアやモーダル本体の横幅、余白、背景色、文字色、枠線、角丸、影、ボタンのサイズや色などを変更できます。モーダル背景のbackground:rgba(15,23,42,.55);を変更すると、モーダル表示中の背景色や透明度を調整できます。

数値調整
style.css
padding:40px 20px;
ページ全体の余白です。40pxが上下、20pxが左右の余白で、値を大きくすると画面端との間隔が広がり、小さくすると狭くなります。

max-width:700px;
デモ表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

padding:32px;
デモ表示エリアの内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
デモ表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:24px;
デモタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。

padding:14px 16px;
MP3ファイルについての注意書きの内側余白です。14pxが上下、16pxが左右の余白で、値を大きくすると文章と枠線の間隔が広がります。

min-height:48px;
「音楽プレーヤーを開く」ボタンの最小高さです。値を大きくするとボタンの最低限の高さが大きくなります。

padding:12px 28px;
「音楽プレーヤーを開く」ボタンの内側余白です。12pxが上下、28pxが左右の余白で、値を大きくするとボタンが大きくなります。

transition:background .2s ease;
開くボタンと閉じるボタンの背景色が切り替わる時間です。.2sは0.2秒を表し、値を大きくするとゆっくり、小さくすると速く変化します。

padding:20px;
モーダル背景の内側余白です。値を大きくすると画面端とモーダル本体の間隔が広がり、小さくすると狭くなります。

max-width:500px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。

padding:28px;
モーダル本体の内側余白です。値を大きくすると内容とモーダル端の間隔が広がり、小さくすると狭くなります。

gap:16px;
モーダル上部にあるタイトルと「×」ボタンの間隔です。値を大きくすると要素同士の間隔を広く確保できます。

margin-bottom:18px;
モーダル上部とMP3音楽プレーヤーの間隔です。値を大きくすると上下の間隔が広がり、小さくすると狭くなります。

font-size:22px;
モーダルタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

width:40px;・height:40px;
モーダル右上にある「×」ボタンの横幅と高さです。両方を同じ値にすると、border-radius:50%;によって円形のボタンになります。値を大きくするとボタン全体が大きくなります。

font-size:24px;
「×」の文字サイズです。値を大きくすると「×」が大きくなり、小さくすると小さくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのデモ表示エリアにwidth:100%とmax-width:700px、モーダル本体にwidth:100%とmax-width:500pxを設定しているため、利用できる画面幅に合わせて横幅が縮小されます。また、MP3音楽プレーヤーにもwidth:100%を指定しているため、モーダル本体の横幅に合わせて表示されます。

640px以下ではメディアクエリを適用し、bodyの余白をpadding:24px 12px;、デモ表示エリアをpadding:24px;、モーダル本体をpadding:22px;へ変更します。さらにデモタイトルを21px、モーダルタイトルを19pxへ縮小するため、スマートフォン・タブレット・PCの画面幅に合わせて利用できます。