File size: 1,848 Bytes
cd95f47 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
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() |