JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<button id='load'>load music</button>
<button id="controller" style='display:none'> play/pause</button>

JavaScript

THREE.Audio.prototype.pause = function() {
  if (this.hasPlaybackControl === false) {
    console.warn('THREE.Audio: this Audio has no playback control.')
    return
  }

  if (this.isPlaying === true) {
    // this._pausedAt = ( this.context.currentTime - this._startedAt ) * this.playbackRate;
    this._pausedAt = this.context.currentTime * this.playbackRate

    this.source.stop()
    this.source.onended = null

    this.isPlaying = false
  }

  return this
}

let listener = new THREE.AudioListener()
let audio = new THREE.Audio(listener)

let loader = new THREE.AudioLoader()

let loadBtn = document.querySelector('#load')
let controllerBtn = document.querySelector('#controller')

loadBtn.addEventListener('click', () => {
  //this api redirects to mp3 file
  let mp3 = '//api.imjad.cn/cloudmusic/?id=1403150208&raw=true'
  loader.load(mp3, function(buffer) {
    audio.setBuffer(buffer)
    audio.play( 5 ) // start the audio in five seconds
    loadBtn.style.display = 'none'
    controllerBtn.style.display = 'inline-block'
  })
})


controllerBtn.addEventListener('click', () => {
  if (audio.isPlaying) {
    audio.pause()
  } else {
    audio.play()
  }
})