JSFiddle - React, Tailwind, and code Playground

by SUDOCS

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

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()
    loadBtn.style.display = 'none'
    controllerBtn.style.display = 'inline-block'
  })
})


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