JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="audio green-audio-player loading">
  <div class="controls">
    <div class="loading">
      <div class="spinner"><i class="fa fa-circle-o-notch fa-spin"></i></div>
    </div>

    <div class="play-pause-btn">
      <i class="fa fa-play"></i>
      <i class="fa fa-stop"></i>
    </div>

    <div class="wave">
      <div class='sound-icon'>
        <div class='sound-wave'>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
          <i class='bar'></i>
        </div>
      </div>
    </div>
  </div>
  <div class="playing-title">
    Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  </div>
</div>

CSS

.audio.green-audio-player {
  width: 100%;
  height: 56px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07);
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid #dedede;
  background-color: #efefef;
  overflow: hidden;
}

.audio.green-audio-player .controls {
  width: 100%;
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.audio.green-audio-player .playing-title {
  margin: 0 -24px;
  padding: 0 24px;
  background-color: #e6e6e6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 19px;
}

.audio.green-audio-player .play-pause-btn {
  cursor: pointer;
  width: 28px;
  height: 28px;
  font-size: 18px;
  display: -webkit-box;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.audio.green-audio-player .play-pause-btn:active {
  background-color: #dedede;
}

.audio.green-audio-player .loading,
.audio.green-audio-player.loading .play-pause-btn {
  display: none;
}

.audio.green-audio-player.loading .loading,
.audio.green-audio-player .play-pause-btn .fa-play,
.audio.green-audio-player.playing .play-pause-btn .fa-stop {
  display: block;
}

.audio.green-audio-player.playing .play-pause-btn .fa-play,
.audio.green-audio-player .play-pause-btn .fa-stop {
  display: none;
}

.audio.green-audio-player .spinner {
  width: 28px;
  height: 28px;
  font-size: 18px;
  display: -webkit-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.audio.green-audio-player .wave {
  display: -webkit-box;
  display: flex;
  font-size: 16px;
  line-height: 18px;
  color: #55606E;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 24px;
}

.sound-icon {
  width: 100%;
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sound-wave {
  width: 100%;
  height: 36px;
 ...

JavaScript

var autoPlay = false;
var $audioElement = $('.green-audio-player');

// Simulate loading
setTimeout(function() {
  $audioElement.removeClass('loading');

  if (autoPlay) {
    $audioElement.addClass('playing');
  }
}, 500);

$('.play-pause-btn').on('click', function() {
  $audioElement.toggleClass('playing');
});

// If a user comes back to a screen where the audio was playing you need to just trigger the animation
// USING:
// $('.green-audio-player').removeClass('loading');
// $('.green-audio-player').addClass('playing');