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

モーダルウインドウ

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

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

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

音声サンプル、商品紹介、サービス案内、ポートフォリオ、会員サイトのコンテンツ紹介など、MP3をページ内で再生したい場面に利用できます。HTML・CSS・バニラJavaScriptを分けているため、ボタンの色、モーダルの幅、余白、角丸、背景色、音源ファイルを編集しやすく、初心者でも導入しやすい構成です。スマートフォン・タブレット・PCの画面幅に合わせて表示が調整されます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

MP3音楽プレーヤー モーダルデモ

ボタンを押すとモーダルウインドウが表示され、サンプル音源を再生できます。

「音楽プレーヤーを開く」をクリックするとモーダルウインドウが表示され、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>

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成された、MP3音楽プレーヤーをモーダルウインドウで表示するサンプルです。モーダルを開くと音楽プレーヤーが表示され、「×」ボタンで閉じると再生中の音楽も停止します。

配布するサンプルにはMP3ファイルは含まれていません。再生する音源は利用者自身で用意し、musicフォルダへ配置してください。HTML・CSS・JavaScriptを分離しているため、それぞれの役割が分かりやすくカスタマイズもしやすい構成です。 

sample/
├── index.html
├── style.css
├── script.js
└── music/
    └── sample.mp3（各自で用意）

各ファイルの役割
index.html：モーダルウインドウ、音楽プレーヤー、開閉ボタンを配置します。
style.css：画面デザイン、ボタン、モーダルウインドウ、レスポンシブ表示を設定します。
script.js：モーダルの開閉処理と、閉じた際に音楽を停止する処理を行います。
music/sample.mp3：再生するMP3ファイルです。サンプルには含まれないため各自で配置してください。

設置方法・使い方
sampleフォルダをそのまま利用します。musicフォルダへ再生したいMP3ファイルを配置し、必要に応じてindex.html内のaudioタグの読み込み先を変更してください。その後、sample/index.htmlをブラウザで開くと動作を確認できます。

カスタマイズできる内容
index.htmlではタイトル、説明文、ボタンの文字、読み込むMP3ファイルを変更できます。style.cssでは色、余白、角丸、影、モーダルサイズなどを変更できます。script.jsではモーダルの動作や閉じた際の処理を変更できます。

数値調整
style.cssのmax-widthはモーダルの最大幅です。paddingは余白、border-radiusは角丸の大きさを変更できます。transitionを変更するとボタンのアニメーション速度が変わります。

レスポンシブ対応
style.cssでレスポンシブ対応を行っています。max-width、width:100%、メディアクエリを使用しており、スマートフォン・タブレット・PCでも画面幅に合わせてモーダルウインドウと音楽プレーヤーが表示されます。

こちらもおすすめ

モーダルウインドウ
モーダルウインドウのサンプルコード一覧

この記事の他にも、コピペですぐ使える実用的なサンプルコードを掲載しています。デモを確認しながら、用途に合うコードを探せます。

その他のコードを探す
トップページ
コピペですぐ使えるサンプルコードを探す

実用的なサンプルコードをカテゴリ・新着記事・人気記事から探せます。用途に合ったコードを見つけて、そのままコピペで利用できます。

トップページで探す！

コメント