PositionalAudio issue - Githubissues

Russo-creation commented 3 years ago

three version: ^0.128.0
@react-three/fiber version: ^6.2.2
@react-three/drei version: ^6.0.1
node version: v12.18.4
yarn version: 1.22.5

Problem description:

I noticed that PositionalAudio component not playing sound even on storybook https://drei.pmnd.rs/?path=/story/abstractions-positionalaudio--positional-audio-scene-st.

I followed https://codesandbox.io/s/r3f-drei-positionalaudio-forked-khx5p?file=/src/index.js:442-527 and sometimes sound on sample codesandbox works (when focused on codesandbox iframe from beginning).

I don't think it is related with autoplay policy https://sundaykuloksun.medium.com/video-play-not-working-html5-autoplay-policy-beed81d64ca5 but more like a bug.

Relevant code:

import { PositionalAudio } from "@react-three/drei";
...
 <mesh>
          <boxBufferGeometry attach="geometry" />
          <meshBasicMaterial attach="material" color="hotpink" />
          <PositionalAudio
            url="/assets/audio/ice_cream_music.mp3"
            distance={1}
            loop
          />
</mesh>

Suggested solution:

Using suggested code from https://codesandbox.io/embed/r3f-positional-audio-246wl works fine.

import React, { Suspense, useRef, useEffect, useState } from "react";
import { useThree, useLoader } from "@react-three/fiber";
...
  function Sound({ url }) {
    const sound = useRef();
    const { camera } = useThree();
    const [listener] = useState(() => new THREE.AudioListener());
    const buffer = useLoader(THREE.AudioLoader, url);
    useEffect(() => {
      sound.current.setBuffer(buffer);
      sound.current.setRefDistance(1);
      sound.current.setLoop(true);
      sound.current.play();
      camera.add(listener);
      return () => camera.remove(listener);
    }, []);
    return <positionalAudio ref={sound} args={[listener]} />;
  }
...
<mesh>
          <boxBufferGeometry attach="geometry" />
          <meshBasicMaterial attach="material" color="hotpink" />
          <Sound url="/assets/audio/ice_cream_music.mp3" />
</mesh>