Hi

hi.markdown

Hi

A Pen by elijah on CodePen.

License.

index.html

<img src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.2/plyr.svg" alt="">
<div id="hm-player">
  <div class="hm-player-wrapper">
    <div class="hm-player-cover">
      
    </div>
    <div class="hm-player-track">
      <div class="hm-player-track-info">
        <div id="hm-player-track-name">Loading...</div>
      </div>
    </div>
    <audio src="" id="hm-audio-player"></audio>
  <ul id="hm-player-playlist"></ul>
  </div>
</div>

script.js

import Plyr from 'https://cdn.skypack.dev/plyr@~3.6.3';
const player = new Plyr(document.getElementById('hm-audio-player'), {
  title: 'ssss',
  controls: [
    'play-large',
    'play',
    'rewind',
    'fast-forward',
    'progress',
    'current-time',
    'duration',
    'mute',
    'volume',
    'settings',
    'download',
  ],
  settings:[
    'speed',
  ],
  seekTime: 15,
});

const playlist = [
  {
    title: 'deadmans wonderland',
    file: 'https://res.cloudinary.com/dqgre4b9j/video/upload/v1684515842/Test/deadmans2_pzjqlz.mp3',
    duration: '3:12',
  },
   {
    title: 'deadmans wonderland',
    file: 'https://res.cloudinary.com/dqgre4b9j/video/upload/v1684515842/Test/deadmans2_pzjqlz.mp3',
    duration: '3:12',
  },
  {
    title: 'XXXTENTACION TAKE A STEP BACK',
    file: 'https://res.cloudinary.com/dqgre4b9j/video/upload/v1684516587/Test/Takeastepback_rbact3.mp3',
    duration: '3:30',
  },
  {
    title: 'Is Belarus in the midst of a generational upheaval?',
    file: 'https://archive.org/download/mythium/BS_ATKM.mp3',
    duration: '9:20',
  },
  {
    title: 'New Age communities are driving QAnon conspiracies in Brazil',
    file: 'https://archive.org/download/mythium/BS_ATKM.mp3',
    duration: '12:06',
  },
];

playlist.forEach((track, index) => {
    let trackNumber = index + 1,
        trackName = track.title,
        trackDuration = track.duration;
  if (trackNumber.toString().length === 1) {
      trackNumber = '0' + trackNumber;
  }
   const playlistEl = document.getElementById('hm-player-playlist');
  console.log('playlistEl', playlistEl);
    playlistEl.innerHTML += '<li> \
      <span class="plNum">' + trackNumber + '.</span> \
      <span class="plTitle">' + trackName + '</span> \
      <span class="plLength">' + trackDuration + '</span> \
    </li>';
});

const playlistElements = document.querySelectorAll('#hm-player-playlist li');
const playTrack = (index, autoplay) => {
   const track = playlist[index];
   player.source = {
      type: 'audio',
      title: track.title,
      sources: [
        {
          src: track.file,
          type: 'audio/mp3',
        },
      ]
   }
  const titleEl = document.getElementById('hm-player-track-name');
  titleEl.innerText = track.title;
  if (autoplay) player.play();
}

const track = playlist[0];
 player.source = {
    type: 'audio',
    title: track.title,
    sources: [
      {
        src: track.file,
        type: 'audio/mp3',
      },
    ]
 }
const titleEl = document.getElementById('hm-player-track-name');
titleEl.innerText = track.title;
playlistElements.forEach((element, index) => {
     element.addEventListener('click',function(e){
        //stop default behaviour
        e.preventDefault();
        playTrack(index, true);
        //select current active element
        let active = document.querySelector('.selected');
        if (active) active.classList.remove('selected'); 
        this.classList.add('selected');
  });
});

style.scss

@import url('https://rsms.me/inter/inter.css');
:root {
  --plyr-color-main: #F7B81E;
}
body {
  background: #f0f2f5;
}
#hm-player {
  font-family: 'Inter', sans-serif;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
  border-radius: 4px;
  max-width: 600px;
  margin: 0 auto;
  &-track-name {
    padding: 20px 12px 0px 18px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
    text-overflow: ellipsis;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
  }
  &-playlist {
    padding-left: 0;
    padding-bottom: 10px;
    li {
      cursor:pointer;
      display:block;
      margin:0;
      padding:21px 12px 21px 20px;
      position:relative;
      display: grid;
      font-size: 14px;
      grid-template-columns: 30px auto 50px;
      font-weight: 500;
      &.selected {
        color: var(--plyr-color-main);
      }
      &:hover {
        background-color:rgba(0, 0, 0, .1);
      }
      .plLength {
        text-align: right;
      }
      .plNum {
        opacity: 0.3;
      }
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.2/plyr.css" rel="stylesheet" />