# ThreeJS sound keeps playing after moving to other page with React Link & UseEffect

**URL:** <https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219>\
**Category:** Questions\
**Tags:** react, audio\
**Created:** [December 3, 2020, 4:25pm UTC](https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219 "2020-12-03T16:25:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sveny](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sveny/32/14643_2.png) [@Sveny](https://discourse.threejs.org/u/Sveny)\
**Post date:** [December 3, 2020, 4:25pm UTC](https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219/1 "2020-12-03T16:25:02Z")

</div>

I’m currently working on a project with ThreeJS and sound. I have a scene with different kind of object that have audio. All these objects are coming from a Firebase database. I use Mobx as statemanager. There is a button on the page to go to a different page. The problem I have is that when I go to this new page, the audio from the last page keeps playing. And when I come back to the first page, the audio is doubled.

This is the code I use:

```javascript
React.useEffect(
  () =>
    autorun(() => {
      const createPins = () => {
        pinStore.pins.map((pin) => {
          let geo = new THREE.DodecahedronGeometry(1, 0);
          let mat = new THREE.MeshPhongMaterial({
            color: 16643437,
            shininess: 10,
            flatShading: true,
          });

          const pointer = new THREE.Mesh(geo, mat);
          scene.add(pointer);

          const audio = new THREE.PositionalAudio(listener);
          audioLoader.load("../../assets/audio/techno.mp3", (buffer) => {
            audio.setBuffer(buffer);
            audio.setLoop(true);
            audio.setRefDistance(3);
            audio.play();
          });
          pointer.add(audio);
        });
      };
    }),
  []
);

return (
  <>
    <Link to="/create">CREATE</Link>
  </>
);

```

Is there a way that when I go to a new page, the audio from the objects stop playing and when I come back to the page I hear the audio again.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 3, 2020, 4:56pm UTC](https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219/2 "2020-12-03T16:56:01Z")

</div>

Well, you just have to call `audio.stop()` when you navigate to another page. Figuring out the right point for calling this method depends on your UI library.

BTW: Do not load background music like `techno.mp3` with `AudioLoader`. Doing so will download the entire file at once and transform it into an audio buffer. It’s better to stream the audio like so:

```javascript
const mediaElement = new Audio( "../../assets/audio/techno.mp3" );
mediaElement.play();

audio.setMediaElementSource( mediaElement );

```

---

<div class="post-metadata">

**Author:** ![Sarge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sarge/32/23494_2.png) [@Sarge](https://discourse.threejs.org/u/Sarge)\
**Post date:** [December 3, 2020, 4:59pm UTC](https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219/3 "2020-12-03T16:59:04Z")

</div>

Never dealt with audio in react but maybe adding a return function to `useEffect` could help.

```
useEffect(() => {
  const yourAudio = getYourAudio()
  yourAudio.play()
  ....

  return () => { 
    yourAudio.pause()
    yourAudio.currentTime = 0
  }
}, [])
```

---

<div class="post-metadata">

**Author:** ![uvfauna](https://avatars.discourse-cdn.com/v4/letter/u/a183cd/32.png) [@uvfauna](https://discourse.threejs.org/u/uvfauna)\
**Post date:** [March 7, 2022, 8:58am UTC](https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219/4 "2022-03-07T08:58:36Z")

</div>

Did you manage to fix it?  
I want to achieve exactly the same goal. Keep the audio playing of the first page when going to the second, and then reuse the previous audio (or reinitialise if necessary) of the first page when going back. But nomatter what I do (positionalAudioInstance.source.stop OR audioListenerInstance.context.close), the audio is always doubled and becomes a crackling sound.

Thnx

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 7, 2022, 9:29am UTC](https://discourse.threejs.org/t/threejs-sound-keeps-playing-after-moving-to-other-page-with-react-link-useeffect/21219/5 "2022-03-07T09:29:21Z")

</div>

i take you you’re mixing imperative three with react, that is like react-dom and parts of the app go querySelector and addChild, you loose all integration and benefits that way. with react-three-fiber there’s no difference between scene and dom contents, routes are _within the canvas_ and assets are managed and cached via react-suspense. hanging on to this or that asset or controlling state and side effects is the same as if you’d have to solve it in react-dom.

on top of that there are components and helpers for practically everything in [drei](https://github.com/pmndrs/drei).

side effect free positional audio: [Lulaby city - CodeSandbox](https://codesandbox.io/s/gkfhr?file=/src/App.js)  
routes: [Router transitions - CodeSandbox](https://codesandbox.io/s/router-transitions-4j2q2)