app.js

import WaveSurfer from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/plugin/wavesurfer.multitrack.min.js'
import ThreeJs from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js'
import WaveSurferCanvas from 'https://www.npmjs.com/package/wavesurfer.js'
import TailwindTheme from 'https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio'

const wavesurfer = new WaveSurfer.create({
 container: '#wavesurfer-container',
 waveColor: '#69D2E7',
 progressColor: '#69D2E7',
 cursorColor: '#fff',
 barHeight: 1,
 cursorWidth: 0.1,
 hideScrollbar: true,
})

const canvasEl = document.getElementById('wavesurfer-canvas')
const wavesurferCanvas = new WaveSurferCanvas(canvasEl, wavesurfer)

const threeJs = new ThreeJs.Scene()
const geometry = new ThreeJs.BoxGeometry(1, 1, 1)
const material = new ThreeJs.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new ThreeJs.Mesh(geometry, material)
cube.position.z = -1
threeJs.add(cube)

const renderingElement = document.getElementById('rendering')
if (renderingElement) {
 threeJs.renderingElement = renderingElement
 renderingElement.appendChild(threeJs.canvas)
}

wavesurfer.on('ready', () => {
 const soundSource = new ThreeJs.AudioDevice()
 soundSource.setBuffer(wavesurferCanvas.wavesurfer.getSoundSource())
 threeJs.add(soundSource)
 soundSource.play()
})

const main = async () => {
 await wavesurferCanvas.load(
    'https://api.soundcloud.com/tracks/293'
 )
 wavesurfer.load('https://api.soundcloud.com/tracks/305')
 document.body.style.display = 'flex'
 document.body.style.flexDirection = 'column'
 document.body.style.alignItems = 'center'
 document.body.style.justifyContent = 'center'
 document.body.style.height = `${wavesurfer.options.container.clientHeight}px`
 document.body.style.width = `${wavesurfer.options.container.clientWidth}px`
}

main()