title: How to keep audio play and image movement in LP when I got back from another link
body: <p>I have the code below that plays or pauses audio and move image within a function of react.
  Currently, the audio plays even when I navigated to other pages like /Bio , /music or /contact.
  Then when I return to LP, the audio still playing but I can't stop with click. And the image is stoping like a before click.
  I want keep the audio play and the image movement when I go to other pages and got back to the LP too. And I want I can stop them when I got back to the LP.</p>
  <p>LP</p>
  <pre><code>const LandingPage = ({ playing, setPlaying }) =&gt; {
  
    const [active, setActive] = useState(false);
    const classToggle = () =&gt; {
      setActive(!active);
  
      return [playing];
    };
   
  
    return (
      &lt;&gt;
      &lt;div class=&quot;sample01&quot;&gt;
   &lt;p&gt;Next live ※Tokio※14 / 8 / 2022 in shibuyavalley ※Gifu※ 19 / 8 / 2022 in slowroom ※Delta del Ebro※ 15 / 10 / 2022 in Mind Fest &lt;/p&gt; 
   &lt;/div&gt;
   
        &lt;h2 id=&quot;pleaseClick&quot;&gt;Please click on the images!!&lt;/h2&gt;
        &lt;Container className=&quot;lpPhotos&quot;&gt;
          &lt;Row id=&quot;item1&quot;&gt;
            &lt;Col md={2} sm={2} xs={2}&gt;
              &lt;img src={Blank} id=&quot;blank&quot; className=&quot;img-fluid&quot; alt=&quot;blankimg&quot; /&gt;
            
            &lt;/Col&gt;
            &lt;ClickableImage
              imgSrc={Bell}
              activeClass=&quot;bell&quot;
              imgAlt=&quot;picture of a bell&quot;
              audioSrc={BellAudio}
            /&gt;
            &lt;Col md={2} sm={2} xs={2}&gt;
              &lt;img src={Blank} id=&quot;blank&quot; className=&quot;img-fluid&quot; alt=&quot;blankimg&quot; /&gt;
            &lt;/Col&gt;{&quot; &quot;}
  
            &lt;ClickableImage
            imgSrc={Boat}
            activeClass=&quot;boat&quot;
            imgAlt=&quot;picture of a boat&quot;
            active={playing === &quot;picture of a boat&quot;}
            onClick={() =&gt; setPlaying (&quot;picture of a boat&quot;)} 
              // imgSrc={Boat}
              // activeClass=&quot;boat&quot;
              // imgAlt=&quot;picture of a boat&quot;
              // audioSrc={FuneAudio}
            /&gt;
            
            &lt;ClickableImage
              imgSrc={Grass}
              className=&quot;grass&quot;
              imgAlt=&quot;picture of a grass&quot;
              audioSrc={GrassAudio}
            /&gt;
            &lt;ClickableImage
              imgSrc={Pingpong}
              className=&quot;pingpong&quot;
              imgAlt=&quot;picture of a pingpong&quot;
              audioSrc={PingpongAudio}
            /&gt;
          &lt;/Row&gt;
          &lt;Row id=&quot;item2&quot;&gt;
            &lt;ClickableImage
              imgSrc={Bus}
              imgAlt=&quot;picture of a bus&quot;
              audioSrc={BusAudio}
            /&gt;
            &lt;Col md={2} sm={2} xs={2}&gt;
              &lt;img src={Blank} id=&quot;blank&quot; className=&quot;img-fluid&quot; alt=&quot;blankimg&quot; /&gt;
            &lt;/Col&gt;
            &lt;ClickableImage
              imgSrc={Macba01}
              imgAlt=&quot;picture of a macba&quot;
              audioSrc={MacbaAudio}
            /&gt;
            &lt;ClickableImage
              imgSrc={Metro}
              imgAlt=&quot;picture of a metro&quot;
              audioSrc={InsideMetro}
            /&gt;
            &lt;ClickableImage
              imgSrc={MorningSun}
              imgAlt=&quot;picture of a morningSun&quot;
              audioSrc={MorningSunAudio}
            /&gt;
            &lt;Col md={2} sm={2} xs={2}&gt;
              &lt;img src={Blank} id=&quot;blank&quot; className=&quot;img-fluid&quot; alt=&quot;blankimg&quot; /&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  };
  
  export default LandingPage;
  </code></pre>
  <p>App</p>
  <pre><code>const audio = new Audio();
  audio.loop = true;
  // // 
  // function App() {
  const App = () =&gt; { 
  
  
    const [playing, setPlaying] = useState();
    useEffect(() =&gt; {
      switch (playing) {
        case &quot;picture of a boat&quot;:
          audio.src = FuneAudio;
          audio.play();
          break;
          default:
      }
      return () =&gt; {
        audio.pause();
      };
    }, [playing]);
    
    return (
        &lt;Router&gt;
      &lt;div className=&quot;App&quot;&gt;
        &lt;Links /&gt;
        &lt;Routes&gt;
        &lt;Route exact path=&quot;/&quot; element={&lt;LandingPage playing={playing} setPlaying={setPlaying}/&gt;} /&gt;
        &lt;Route exact path=&quot;Bio&quot; element={&lt;Bio /&gt;} /&gt;
        &lt;Route exact path=&quot;Music&quot; element={&lt;Music /&gt;} /&gt;
        &lt;Route exact path=&quot;Contact&quot; element={&lt;Contact /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/div&gt;
        &lt;/Router&gt;
    );
    
  }
  
  export default App;
  </code></pre>
  <p>ClickableImage</p>
  <pre><code>export function ClickableImage({ imgSrc, imgAlt, audioSrc, onClick, active }) {
    let audio = useMemo(() =&gt; new Audio(audioSrc), [audioSrc]);
  
    const [playing, setPlaying] = useState(false);
  
    // const toggleAudio = () =&gt; setPlaying(!playing);
  
    useEffect(() =&gt; {
      playing ? audio.play() : audio.pause();
      audio.loop = true;
    }, [playing, audio]);
  
    useEffect(() =&gt; {
      const stopPlaying = () =&gt; setPlaying(false);
      audio.addEventListener(&quot;ended&quot;, stopPlaying);
      return () =&gt; audio.removeEventListener(&quot;ended&quot;, stopPlaying);
    }, [audio]);
  
    const classToggle = () =&gt; {
      setPlaying(!playing);
    };
  
    return (
      &lt;Col md={2} sm={2} xs={2}&gt;
        &lt;img
          src={imgSrc}
          className={&quot;img-fluid&quot; + (playing ? ` img-playing` : &quot;&quot;)}
          alt={imgAlt}
          onClick={() =&gt; {
            classToggle();
          }}
        /&gt;
      &lt;/Col&gt;
    );
  }
  
  export default ClickableImage;
  </code></pre>
  <p><a href="https://github.com/yusuke85/kazumi_hp" rel="nofollow noreferrer">enter link description here</a></p>