title: How to resolve this reference error : Audio is not defined
body: <h4>Problem</h4>
  <p>I'm trying to play some audio files in some specific situations.
  e.g)</p>
  <ul>
  <li>When users access to login page, the audio plays 'Please enter your phone number'</li>
  <li>when an error message alert comes up, audio file is played such as 'your phone number has been already registered'</li>
  </ul>
  <p>So far, the audio files are played successfully when you access some pages, but I got the reference error in the image after I added two lines of code below in the root component (app.tsx)</p>
  <p><a href="https://i.stack.imgur.com/rQtFX.png?s=256" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rQtFX.png?s=256" alt="error message screenshot" /></a></p>
  <blockquote>
  <pre><code>import {kioskAudio} from '../src/common/utils/kioskAudio';
  </code></pre>
  </blockquote>
  <blockquote>
  <pre><code>const {playAudio, stopAudio} = kioskAudio();
  </code></pre>
  </blockquote>
  <br />
  <h3>What I've tried to resolve this issue</h3>
  <p>First try:
  I imported 'kioskAudio' method into KioskAlertError component directly. But I got the same reference error.</p>
  <p>Second try:
  So I thought, <strong>'Then should I import the 'kioskAudio' method to the root component(app.tsx)</strong>  and deliver the props(playAudio, stopAudio) to the  component like this :</p>
  <blockquote>
  <pre><code>                &lt;KioskAlertError playAudio={playAudio} stopAudio={stopAudio} /&gt; 
  </code></pre>
  </blockquote>
  <p>But I still got the reference error. How can I resolve this issue?</p>
  <h4>Source Code</h4>
  <h6>app.tsx</h6>
  <pre><code>import KioskAlert, {IKioskAlertProps} from './component/KioskAlert';
  import KioskAlertError from './component/KioskAlertError';
  import {kioskAudio} from '../src/common/utils/kioskAudio';
  
  
  export default function CustomApp({Component, pageProps}) {
      const router = useRouter();
      const [shouldStartRender, setShouldStartRender] = useState(false);
      const [kioskAlertInfo, setKioskAlertInfo] = useState({isShow: false, onOK: null} as IKioskAlertProps);
      const {playAudio, stopAudio} = kioskAudio();
  
      useEffect(() =&gt; {
          setShouldStartRender(true);
      }, [router]);
  
  
  
      return (
          &lt;&gt;
  
              &lt;KioskAlertContext.Provider
                  value={{
                      kioskAlertState: kioskAlertInfo,
                      openKioskAlert: openKioskAlert,
                      closeKioskAlert: closeKioskAlert,
                  }}
              &gt;
                  &lt;SWRConfig
                      value={{
                          refreshInterval: 0,
                          revalidateOnReconnect: true,
                          revalidateOnFocus: true,
                          onErrorRetry: (error, key, config, revalidate, {retryCount}) =&gt; {
                              if (error.response?.status === 401) {
                                  localStorage.removeItem('accessToken');
                                  return;
                              }
  
                              if (retryCount &gt;= 5) return;
  
                              setTimeout(() =&gt; {
                                  revalidate({retryCount});
                              }, 5000);
                          },
                      }}
                  &gt;
                      {shouldStartRender ? (
                          &lt;DomRouter&gt;
                              &lt;DomRoutes&gt;
                                  &lt;DomRoute path=&quot;/home/home.html&quot; element={&lt;Home /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/clause.html&quot; element={&lt;Clause /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/loginPhone.html&quot; element={&lt;LoginPhone /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/loginPin.html&quot; element={&lt;LoginPin /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/signUp-phone.html&quot; element={&lt;SignUpPhone /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/signUp-authCode.html&quot; element={&lt;SignUpAuthCode /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/signUp-pin.html&quot; element={&lt;SignUpPin /&gt;} /&gt;
                                  &lt;DomRoute path=&quot;/home/CheckUserByPin.html&quot; element={&lt;CheckUserByPin /&gt;} /&gt;
  
                              &lt;/DomRoutes&gt;
                          &lt;/DomRouter&gt;
                      ) : null}
                      &lt;KioskAlertError playAudio={playAudio} stopAudio={stopAudio} /&gt; 
                      &lt;KioskAlert {...kioskAlertInfo} /&gt;
                  &lt;/SWRConfig&gt;
              &lt;/KioskAlertContext.Provider&gt;
          &lt;/&gt;
      );
  }
  
  
  
  </code></pre>
  <h5>KioskAudio.ts</h5>
  <pre><code>export const kioskAudio = () =&gt; {
      const audio = new Audio();
      const playAudio = (folder: string, file: string) =&gt; {
          stopAudio();
          audio.setAttribute('src', `/sounds/${folder}/${file}.mp3`);
          audio.play();
      };
      const stopAudio = () =&gt; {
          audio.pause();
          audio.currentTime = 0;
      };
      return {
          playAudio,
          stopAudio,
      };
  };
  
  
  
  </code></pre>
  <h5>KioskAlertError.tsx</h5>
  <pre><code>const KioskAlertError: React.FC&lt;IKioskAlertErrorProps&gt; = ({playAudio, stopAudio}) =&gt; {
      const [isShow, setIsShow] = useState(false);
      const [content, setContent] = useState('');
  
      useEffect(() =&gt; {
          document.addEventListener('error', (data: CustomEvent) =&gt; {
              const message = JSON.parse(data.detail);
              const errorMessage = message.message;
  
              setContent(getErrorMessage(message.message));
              setIsShow(true);
  
              switch (errorMessage) {
                  case 'Already Registered':
                      console.log('Already joined');
                      playAudio('alert', '2');
                      break;
                  case 'Can't find your numbers':
                      console.log('userNotFound');
                      playAudio('alert', '1');
                      break;
              }
          });
  
          return () =&gt; {
              document.removeEventListener('error', null);
          };
      }, []);
  
      const getErrorMessage = (messageCode) =&gt; {
          return messageCode;
      };
  
      return isShow ? (
          &lt;Alert
              content={content}
              okText={'OK'}
              onOK={() =&gt; setIsShow(false)}
              wrapperStyle={defaultWrapperStyle}
              alertStyle={defaultAlertStyle}
              upperSectionStyle={defaultUpperSectionStyle}
              lowerSectionStyle={defaultLowerSectionStyle}
              titleStyle={defaultTitleStyle}
              contentStyle={defaultContentStyle}
              cancelStyle={defaultButtonStyle}
              okStyle={defaultButtonStyle}
          /&gt;
      ) : null;
  };
  
  export default KioskAlertError;
  </code></pre>