JSFiddle - React, Tailwind, and code Playground

JavaScript

import React, { Component } from 'react';
 import albumData from './../data/albums';
 import PlayerBar from './PlayerBar';


 class Album extends Component {
   constructor(props) {
   super(props);


   //We want to set an album property on our state,
   //but first we'll need to find the album object in
   //albumData that    that has a slug property that's
   //equal to  this.props.match.params.slug, the route param.
   //JavaScript's .find() array method
   // is the perfect method for the job.

   const album = albumData.find( album => { 
      return album.slug === this.props.match.params.slug
    });

    this.state = {
      album: album,
      //we'll want to display song data on the screen so
      //we'll want to store it on the component's state.
      currentSong: album.songs[0],
      //want to display whether or not the song is playing.
      isPlaying: false,
      isPaused: false,
      volume: 100,
      songHover: album.songs[0],
      currentTime: 0,
      duration: album.songs[0].duration,
      mouseOverStatus: false
    };
    // we're not assigning audioElement to the component's state.
    this.audioElement = document.createElement('audio');
    //when playing an album, we expect playback to start on the first
    //track, so let's set the src property of this.audioElement to
    //the audio source of the first song on the album.
    this.audioElement.src = album.songs[0].audioSrc;
   }

   play() {
     this.audioElement.play();
     this.setState({ isPlaying: true });
   }

   pause() {
     this.audioElement.pause();
     this.setState({ isPlaying: false });
     this.setState({ isPaused: true });
   }

   componentDidMount() {
     this.eventListeners = {
       timeupdate: e => {
         //please confirm: we are accessing the currentTime pre-defined property, which tracks the real time value of the song as it plays in this point of the code
         this.setState({ currentTime: this.audioElement.currentTime });
       },
      ...