how to connect audioAnalyser

[davidalexandercurrie]

Would someone mind showing me how to wire up an audio analyser? I want to be able to change the colour of the meshPhysicalMaterial based on audio level. So I would like to know how to attach the positionalAudio to an audioAnalyzer and read the data. Thanks so much.

import React, { useRef, useState, useEffect } from 'react'
import * as THREE from 'three'
import { useThree, useLoader } from 'react-three-fiber'
import { AudioAnalyser } from 'three'

export default function Sound({ url, node, playAudio }) {
const sound = useRef()
const analyzer = useRef()
const ref = useRef()
const { camera } = useThree()
const [listener] = useState(() => new THREE.AudioListener())
const buffer = useLoader(THREE.AudioLoader, url)
if (playAudio) {
sound.current.play()
}
if (sound.current !== undefined && sound.current.isPlaying && !playAudio) {
sound.current.pause()
}

useEffect(() => {
sound.current.setBuffer(buffer)
sound.current.setRefDistance(1)
sound.current.setLoop(false)

// sound.current.setDirectionalCone(120, 260, 0.3)
camera.add(listener)
console.log(sound)
return () => {
  camera.remove(listener)
  sound.current.pause()
}

}, [])
return (
<mesh castShadow rotation={[0, node.rotation, 0]} key={node.id} position={[node.x, 0, node.z]}>



{/* <AudioAnalyser ref={analyzer} args={[sound.current, 128]} /> */}

)
}

[drcmda]

never used it before, but you use it i the same way you would use it in plain threejs. if you show me a very reduced working plain threejs demo as a codesandbox that would be helpful.

btw you have side effects in your render function, this is not good. sound.current.play/pause() should be inside a useEffect

[davidalexandercurrie]

@drcmda does that example help?

[gsimone]

I tried reproducing your example with r3f and drei here https://codesandbox.io/s/r3f-audo-analyser-cmieg

[davidalexandercurrie]

@gsimone Thanks so much!!

[gsimone]

Keep in mind that there is a tiny tiny detail that I had to work around:
pmndrs/drei#71

Maybe subscribe to this issue ;)

[drcmda]

it's solved in the other thread (/drei)

[gsimone]

For future-proofing, here's the correct answer and example

pmndrs/drei#71 (comment)