tapes/assets/script/RecordPlayer.js

export default class RecordPlayer {
  //--------------------------
  // constructor
  //--------------------------
  constructor() {
    this.audio = null;
    this.tracklist = "";
    this.currentTrackIndex = -1;
    this.trackListCount = 0;
    this.playing = false;
    this.controlText = document.querySelector(".control-text");
    this.tapePlaylist = document.getElementById("playlist");
    this.nextBtn = document.getElementById("control-next");
    this.backBtn = document.getElementById("control-back");
    this.progress = document.querySelector(".audio-progress");

    this.setUpAudio();
  }

  setUpAudio() {
    let self = this;
    //create element
    this.audio = document.createElement("audio");
    this.audio.controls = false;
    //set event listners
    this.audio.addEventListener(
      "timeupdate",
      (e) => this.handleTimeUpdate(e),
      false
    );

    this.audio.addEventListener("ended", () => self.control("next"), false);

    this.nextBtn.addEventListener("click", () => {
      self.control("next");
    });

    this.backBtn.addEventListener("click", () => {
      self.control("back");
    });
  }

  setTrackList(tracklist) {
    this.tracklist = tracklist;
    this.trackListCount = this.tracklist.length;
    this.buildPlaylist(this.tracklist);
  }

  buildPlaylist(tracklist) {
    //clear playlist
    this.tapePlaylist.innerHTML = "";
    //build playlist ui
    for (var i = 0, length = tracklist.length; i < length; i++) {
      let sleeve = document.createElement("div");
      let select = document.createElement("button");
      sleeve.className = "sleeve";
      sleeve.id = "sleeve_" + i;
      select.id = tracklist[i].file;
      select.className = "selectBtn";
      let recordTitle = document.createElement("label");
      recordTitle.id = "title_" + i;
      recordTitle.innerText = tracklist[i].title;
      let recordAlbum = document.createElement("label");
      recordAlbum.id = "album_" + i;
      recordAlbum.innerText = tracklist[i].album;
      let recordArtist = document.createElement("label");
      recordArtist.id = "artist_" + i;
      recordArtist.innerText = tracklist[i].artist;

      sleeve.appendChild(select);
      sleeve.appendChild(recordTitle);
      sleeve.appendChild(recordAlbum);
      sleeve.appendChild(recordArtist);

      this.tapePlaylist.appendChild(sleeve);

      select.addEventListener("click", (e) => this.handleButton(e), false);
    }
  }

  playRecord(file) {
    for (var i = 0, length = this.tracklist.length; i < length; i++) {
      let sleeve = document.getElementById("sleeve_" + i);
      let album = document.getElementById("album_" + i);
      let artist = document.getElementById("artist_" + i);
      //handle pause state
      if (file == this.tracklist[i].file) {
        //if index is same, play our pause
        if (i === this.currentTrackIndex) {
          if (this.playing) {
            this.audio.pause();
            sleeve.style.opacity = 0.5;
            this.playing = false;
            return;
          } else {
            console.log("play");
            this.audio.play();
            sleeve.style.opacity = 1;
            this.playing = true;
            return;
          }
        } else {
          //if index is different play next track
          this.currentTrackIndex = i;
          this.controlText.innerText = this.tracklist[i].title;
          sleeve.classList.add("playing");
          sleeve.classList.remove("not-playing");
          album.classList.add("label-playing");
          album.classList.remove("label-notplaying");
          artist.classList.add("label-playing");
          artist.classList.remove("label-notplaying");
        }
      } else {
        sleeve.classList.add("not-playing");
        sleeve.classList.remove("playing");
        album.classList.add("label-notplaying");
        artist.classList.add("label-notplaying");
      }
    }

    let record =
      "assets/audio/tapes/" +
      this.tracklist[this.currentTrackIndex].tape +
      "/" +
      this.tracklist[this.currentTrackIndex].file;

    this.audio.src = record;
    this.audio.volume = 0.5;
    this.playing = true;
    this.audio.play();
  }

  control(task) {
    this.playing = false;
    let fresh = "";
    switch (task) {
      case "next":
        fresh = this.currentTrackIndex + 1;
        if (fresh > this.tracklist.length - 1) fresh = 0;

        break;
      case "back":
        fresh = this.currentTrackIndex - 1;
        if (fresh < 0) fresh = this.tracklist.length - 1;
        break;
    }
    this.playRecord(this.tracklist[fresh].file);
  }

  //event handlers
  handleButton(e) {
    e.stopPropagation();
    e.preventDefault();
    this.playRecord(e.target.id);
  }

  handleTimeUpdate(e) {
    var s = parseInt(this.audio.currentTime % 60);
    if (s < 10) {
      s = "0" + s;
    }
    var m = parseInt((this.audio.currentTime / 60) % 60);
    if (m < 10) {
      m = "0" + m;
    }

    var currentProgress = this.audio.currentTime / this.audio.duration;
    var visProgress = 350 * currentProgress;
    this.progress.style.width = visProgress + "px";
  }
}