JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<button class="btn-audio-play" type="button">Play</button>
<button class="btn-audio-pause" type="button">Pause</button>
<button class="btn-audio-toggle" type="button">Play/Pause</button>
<audio class="audio-player" src="http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3"></audio>

JavaScript

var btnAudioPlay = document.querySelector(".btn-audio-play"),
  btnAudioPause = document.querySelector(".btn-audio-pause"),
  btnAudioToggle = document.querySelector(".btn-audio-toggle"),
  audioPlayer = document.querySelector(".audio-player"),
  isPlaying = false

btnAudioPlay.addEventListener('click', function() {
  audioPlayer.play()
})

btnAudioPause.addEventListener('click', function() {
  audioPlayer.pause()
})

btnAudioToggle.addEventListener('click', function() {
  if (isPlaying) {
    audioPlayer.pause()
  } else {
    audioPlayer.play()
  }
})

audioPlayer.onplaying = function() {
  isPlaying = true
}
audioPlayer.onpause = function() {
  isPlaying = false
}