Web Design Leaves

.mejs__container {
  background-color: #496096;
}

.mejs__container:focus {
  /* フォーカス時のコンテナのアウトラインを非表示に */
  outline: none;
}

.mejs__controls:not([style*='display: none']) {
  background: transparent;
}

.mejs__loop-button>button,
.mejs-loop-button>button {
  /* 独自のループアイコンを表示するため元のアイコンを非表示に */
  background: none;
}

.mejs__loop-button.mejs__loop-on>button::before,
.mejs-loop-button.mejs__loop-on>button::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='lightgreen' viewBox='0 0 16 16'%3E  %3Cpath d='M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z'/%3E%3C/svg%3E");
}

.mejs__loop-button.mejs__loop-off>button::before,
.mejs-loop-button.mejs__loop-off>button::before {
  content: "";
  display: inline-block;
  height: 18px;
  width: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cccccc' viewBox='0 0 16 16'%3E  %3Cpath d='M11 5.466V4H5a4 4 0 0 0-3.584 5.777.5.5 0 1 1-.896.446A5 5 0 0 1 5 3h6V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192Zm3.81.086a.5.5 0 0 1 .67.225A5 5 0 0 1 11 13H5v1.466a.25.25 0 0 1-.41.192l-2.36-1.966a.25.25 0 0 1 0-.384l2.36-1.966a.25.25 0 0 1 .41.192V12h6a4 4 0 0 0 3.585-5.777.5.5 0 0 1 .225-.67Z'/%3E%3C/svg%3E");
}

.playlist {
  position: relative;
  margin: 50px 0;
  width: 100%;
  max-width: 480px;
  border: 1px solid #eee;
  padding: 0;
}

.playlist h3 {
  margin: 0 0 1px;
  font-size: 16px;
  background-color: #eee;
  padding: 0.5rem;
}

.playlist .tracks ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.playlist .tracks ul li {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 2px 0;
  background-color: #eee;
  padding: 0.5rem 0.25rem;
}

.playlist .tracks ul li:last-of-type {
  margin-bottom: 0;
}

.playlist .tracks .track-title {
  font-size: 14px;
}

.playlist .tracks button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  position: relative;
}

.playlist .tracks button.play::before {
  content: "";
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: -10px;
  margin-right: 8px;
  background-repeat: no-repeat;
}

.playlist .tracks ul li .controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-left: 20px;
}

.playlist .tracks ul li .controls .current-time,
.playlist .tracks ul li .controls .duration {
  font-size: 13px;
  color: #999;
}

.playlist .now-playing {
  padding: 10px;
  background-color: #496096;
  color: #efefef;
}

.playlist .current-title {
  margin-left: 1rem;
  font-size: 12px;
  color: #4d6fbe;
  color: #fff;
}

/* Play ボタン*/
.playlist .tracks button.play::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234d6fbe' viewBox='0 0 16 16'%3E  %3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E  %3Cpath d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/%3E%3C/svg%3E");
  /* transition: background-image .1s; */
}

/* Play ボタン :hover*/
.playlist .tracks button.play:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234d6fbe' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814l-3.5-2.5z'/%3E%3C/svg%3E");
}

/* Pause ボタン */
.playlist .tracks button.play.playing::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23eb213c' class='bi bi-pause-circle-fill' viewBox='0 0 16 16'%3E  %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5zm3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5z'/%3E%3C/svg%3E");
}

.audio-wrapper {
  max-width: 480px;
  margin: 30px 0;
}

a {
  text-decoration: none;
}

const playLists2 = document.querySelectorAll('.audio-list2');

playLists2.forEach((elem) => {
  // 対象の要素をプレイリストで表示
  setupAudioPlayList2(elem, setupMejsAudio);
});

/**
* MediaElementPlayer で初期化する関数（setupAudioPlayList2 の第2引数に指定）
* @param {HTMLElement}  elem  audio 要素 ※必須
*/
function setupMejsAudio(elem) {
  const mejsPlayer = new MediaElementPlayer(elem, {
    stretching: 'responsive',
    // loop は指定しない（機能しないので）
    features: ['playpause', 'playlist', 'current', 'progress', 'duration', 'volume'],
  });
}

/**
* プレイリストの ul 要素を受け取りコントロールを生成する関数
* 別途定義した audio 要素をカスタマイズする関数を第2引数 func に指定
* @param {HTMLElement}  audio 2つ以上の source 要素を持つ audio 要素 ※必須
* @param {Function}  func audio 要素をカスタマイズする関数
*/
function setupAudioPlayList2(audio, func) {

  // 第1引数の audio が存在しない場合やそれが audio 要素でなければ終了
  if (!audio || audio.tagName !== 'AUDIO') {
    console.warn('Parameter 1 shoudl be audio element');
    return;
  }

  // source 要素が2未満の場合は終了
  if (audio.querySelectorAll('source').length < 2) {
    console.warn('Need at least two source element for the list');
    return;
  }

  // オーディオプレーヤーをラップする div 要素（ラッパー）を作成
  const playList = document.createElement('div');
  playList.className = 'playlist';
  // audio（引数に受け取った audio 要素）の前にラッパーを挿入
  audio.parentNode.insertBefore(playList, audio);
  // audio をラッパーに追加
  playList.appendChild(audio);

  // 再生中のタイトル、スキップボタン、リストのループボタン、audio 要素の HTML
  const htmls = `<h3 class="playlist-title"></h3>
    <div class="now-playing">
      <div class="current-title"></div>
      <div class="audio-controls">
        <div class="skip-controls">
          <button class="skip-backward skip-backward-btn" type="button" aria-label="Skip Backward"></button>
          <button class="skip-forward skip-forward-btn" type="button" aria-label="Skip Forward"></button>
        </div>
      </div>
      <div class="list-control"><button class="list-loop list-loop-btn" type="button" aria-label="Loop List"></button></div>
    </div>
    <div class="tracks">
      <ul></ul>
    </div>`;

  playList.insertAdjacentHTML('afterbegin', htmls);

  // .audio-controls に audio を追加（移動）
  playList.querySelector('.audio-controls').appendChild(audio);
  // controls 属性を true にして表示
  audio.controls = true;

  //.tracks ul 要素を取得（上記 htmls で追加）
  const trackList = playList.querySelector('.tracks ul');

  // source 要素を全て取得
  const sources = audio.querySelectorAll('source');

  // 各 source 要素について
  sources.forEach((source) => {
    // li 要素を作成
    const li = document.createElement('li');
    // li 要素の data-audio-src 属性に source の src を設定
    li.setAttribute('data-audio-src', source.src);

    if (source.dataset.href) {
      // data-href 属性が指定されている場合はリンク（a 要素）を生成
      const link = document.createElement('a');
      // source の data-track-title のテキストをリンクで囲み li 要素の HTML とする
      li.innerHTML =
         `<a href="${source.dataset.href}">${source.dataset.trackTitle}</a>`
    } else {
      //  li 要素のテキストに source の data-track-title を設定
      li.textContent = source.dataset.trackTitle;
    }
    // リスト（.tracks ul）に li 要素を追加
    trackList.appendChild(li);
  });

  // プレイリストのタイトルを表示する要素を取得
  const titleTag = playList.querySelector('.playlist-title');

  // 引数 audio の data-playlist-title の値をプレイリストのタイトルに
  titleTag.textContent = audio.dataset.playlistTitle;

  // 全てのトラック（li 要素）を取得
  const tracks = playList.querySelectorAll('.tracks li');

  // 選択された（再生中の）トラックを表す変数の初期化
  let currentTrack = tracks[0];

  // audio 要素に最初のトラックの音声データを指定
  audio.src = currentTrack.dataset.audioSrc;

  // 引数に audio 要素をカスタマイズする関数が指定されていれば実行
  if (func) {
    // 引数を渡して関数を実行
    func(audio);
  }

  // 現在再生中のタイトルを表示する要素
  const currentTitle = playList.querySelector('.now-playing .current-title');

  // currentTrack の更新などを行う関数を実行して初期化
  updateTrack(currentTrack);

  // 各トラックで
  tracks.forEach((track) => {

    // ボタンを表示する要素をタイトルのテキストの前に追加
    const playBtnElem =
      `<button class="play" type="button" aria-label="Play"></button>`;
    track.insertAdjacentHTML('afterbegin', playBtnElem);

    // 各トラックに追加した再生ボタン
    const playBtn = track.querySelector('button.play');

    // 上記ボタンをクリックした際の処理
    playBtn.addEventListener('click', (e) => {
      // 再生・一時停止を実行する関数を呼び出す
      toggleBtn(track);
    }, false);
  });

  // 音声データを再生する非同期関数（引数にトラックの li 要素を受け取る）
  async function playAudio(track) {
    try {
      // 現在再生中と異なるトラック（項目）が選択された場合
      if (track !== currentTrack) {
        audio.src = track.dataset.audioSrc;
        const btn = track.querySelector('button.play');
        //currentTrack を更新
        currentTrack = btn.parentElement;
      }
      await audio.play();
      // currentTitle を更新
      currentTitle.textContent = currentTrack.textContent;
      // トラックの情報を更新
      updateTrack(track);
    } catch (err) {
      console.warn(err);
    }
  }

  // 各トラックに追加した再生ボタンの click イベントのリスナー
  function toggleBtn(track) {
    if (audio.paused) {
      // 停止中であれば playAudio() を呼び出して再生
      playAudio(track);
    } else {
      if (track === currentTrack) {
        // 再生中であれば停止
        audio.pause();
      } else {
        // 全てのトラックのボタンを初期状態にリセット
        reseAllBtns();
        // 再生
        playAudio(track);
      }
    }
  }

  // 全てのトラックのボタンを初期状態にリセットする関数
  function reseAllBtns() {
    tracks.forEach((track) => {
      // トラックのボタン
      const btn = track.querySelector('button.play');
      btn.setAttribute('aria-label', 'Play');
      btn.classList.remove('playing');
    });
  }

  // play イベントでボタンのクラスと aria-label を変更
  audio.addEventListener('play', (e) => {
    const btn = currentTrack.querySelector('button.play');
    btn.classList.add('playing');
    btn.setAttribute('aria-label', 'Pause');
  }, false);

  // pause イベントで全てのトラックのボタンを初期状態にリセット
  audio.addEventListener('pause', (e) => {
    reseAllBtns();
  }, false);

  // currentTrack の更新と track の li 要素のクラスの着脱及びタイトルの更新
  function updateTrack(li) {
    tracks.forEach((track) => {
      track.classList.remove('active');
    });
    currentTrack = li;
    li.classList.add('active');
    currentTitle.textContent = li.textContent;
  }

  // リストのループボタン
  const ListLoopBtn = playList.querySelector('.list-loop');
  // ループが有効かどうかのフラグを定義して初期化
  let isLoopActive = false;
  // ループボタンにクリックイベントを設定
  ListLoopBtn.addEventListener('click', () => {
    if (isLoopActive) {
      isLoopActive = false;
      ListLoopBtn.classList.remove('looped');
      // aria-label 属性の値を更新
      ListLoopBtn.setAttribute('aria-label', 'Loop List');
    } else {
      isLoopActive = true;
      ListLoopBtn.classList.add('looped');
      // aria-label 属性の値を更新
      ListLoopBtn.setAttribute('aria-label', 'Unloop List');
    }
  });

  // Skip Forward ボタン（次のオーディオへ進むボタン）
  const skipForwardBtn = playList.querySelector('.skip-forward');
  // Skip Forward ボタンにクリックイベントを設定
  skipForwardBtn.addEventListener('click', skipForward, false);
  function skipForward() {
    // 次の兄弟要素を取得
    const nextTrack = currentTrack.nextElementSibling;
    // 次のトラックが存在すれば（兄弟要素があれば）
    if (nextTrack) {
      audio.pause();
      updateTrack(nextTrack)
      // src に次のトラックを設定
      audio.src = nextTrack.dataset.audioSrc;
      reseAllBtns();
      playAudio(nextTrack);
    } else {
      // 次のトラックが存在しなければ先頭のトラックを再生
      updateTrack(tracks[0])
      // src に最初のトラックを設定
      audio.src = tracks[0].dataset.audioSrc;
      reseAllBtns();
      playAudio(tracks[0]);
    }
  }

  // Skip Backward ボタン（前のオーディオへ進むボタン）
  const skipBackwardBtn = playList.querySelector('.skip-backward');
  // Skip Backward ボタンにクリックイベントを設定
  skipBackwardBtn.addEventListener('click', skipFBackward, false);
  function skipFBackward() {
    const prevTrack = currentTrack.previousElementSibling;
    // 前のトラックが存在すれば（前の兄弟要素があれば）
    if (prevTrack) {
      audio.pause();
      updateTrack(prevTrack)
      // src に前のトラックを設定
      audio.src = prevTrack.dataset.audioSrc;
      reseAllBtns();
      playAudio(prevTrack);
    } else {
      updateTrack(tracks[tracks.length - 1])
      // src に最後のトラックを設定
      audio.src = tracks[tracks.length - 1].dataset.audioSrc;
      reseAllBtns();
      playAudio(tracks[tracks.length - 1]);
    }
  }

  // .audio-player（音声プレーヤー）のトグルボタン（カスタマイズする関数が適用されている場合）
  const audioToggleBtn = playList.querySelector('.audio-player .controls .toggle');

  // 再生終了時に発火するイベント
  audio.addEventListener('ended', audioEnded, false);
  function audioEnded() {
    const nextTrack = currentTrack.nextElementSibling;
    // 次のトラックが存在すれば
    if (nextTrack) {
      audio.pause();
      updateTrack(nextTrack);
      // src に次のトラックを設定
      audio.src = nextTrack.dataset.audioSrc;
      // 次のトラックを再生
      playAudio(nextTrack);
    } else {
      if (!isLoopActive) {
        // カスタマイズする関数が適用されている場合
        if (audioToggleBtn) {
          // .audio-player（音声プレーヤー）のトグルボタンのクラスの削除と aria-label の変更
          audioToggleBtn.classList.remove('playing');
          audioToggleBtn.setAttribute('aria-label', 'Play');
        }
      } else {
        audio.pause();
        updateTrack(tracks[0]);
        // src に次のトラック（先頭のトラック）を設定
        audio.src = tracks[0].dataset.audioSrc;
        playAudio(tracks[0]);
      }
    }
  }
};