title: Audio file not playing - HowlerJS
body: <p>I have a .mp3 file saved in the project directory. I want to play it in Howler. Is It some error in my src? I cannot figure it out. I tried playing an online hosted audio file with its link and that worked fine. It might be a silly error. But please help me out here. I play the audio file in Slideone.tsx (check pic below). I tried putting the audio file in both the same directory as Slideone.tsx and I also tried putting it in a different directory called Music. I changed the paths accordingly both the time. It did not play the audio. Only linking an online audio is working as of now.  Thanks in advance!</p>
  <p>Code:</p>
  <pre><code>import { IonContent, IonToolbar, IonGrid, IonRow, IonCol, IonIcon, IonRange, IonSlide, IonSlides, IonButton} from '@ionic/react';
  import React, {useRef} from 'react';
  import {rainyOutline, thunderstormOutline, bonfireOutline, leafOutline, constructOutline} from 'ionicons/icons';
  import {Howl, Howler} from 'howler';
  
  import '../components/HSRow.css'
  
  
  const Slideone: React.FC = () =&gt;{
  
      const sound  = new Howl({
          src: [&quot;..components/sound.mp3&quot;]
      });
      const handlePlay = () =&gt;{
          sound.play();
      }
  
      const rainyRef = useRef&lt;HTMLIonRangeElement&gt;(null);
  
      const musicChange = () =&gt;{
          console.log(&quot;Rainy changed&quot;);
          const rainyLevel = rainyRef.current!.value;
          console.log(rainyLevel);
          sound.volume(+rainyLevel/100);
      }
  
      return(
          &lt;&gt;
         
          &lt;IonContent className=&quot;contentsection&quot;&gt;
  
          
          &lt;IonGrid&gt;
          &lt;IonRow&gt;
              &lt;IonCol&gt;
                  &lt;div className=&quot;section&quot;&gt;
                      &lt;IonIcon icon={rainyOutline} className=&quot;iconClass&quot; /&gt;
                   
                      &lt;IonRange min={0} max={100} mode=&quot;ios&quot; className=&quot;customRange&quot; value={0} onIonChange={musicChange} ref={rainyRef}/&gt;   
                  &lt;/div&gt;  
              &lt;/IonCol&gt;
              &lt;IonCol&gt;
                  &lt;div className=&quot;section&quot;&gt;
                      &lt;IonIcon icon={thunderstormOutline} className=&quot;iconClass&quot; /&gt;
                   
                      &lt;IonRange min={0} max={100} mode=&quot;ios&quot; className=&quot;customRange&quot; value={0}/&gt;     
  
                      &lt;IonButton onClick={handlePlay}&gt;Click for Sound&lt;/IonButton&gt;
                  &lt;/div&gt;
              &lt;/IonCol&gt;
  
            &lt;/IonRow&gt;
  
            &lt;IonRow&gt;
              &lt;IonCol&gt;
                  &lt;div className=&quot;section&quot;&gt;
                      &lt;IonIcon icon={bonfireOutline} className=&quot;iconClass&quot; /&gt;
                   
                      &lt;IonRange min={0} max={100} mode=&quot;ios&quot; className=&quot;customRange&quot; value={0}/&gt;   
                  &lt;/div&gt;  
              &lt;/IonCol&gt;
              &lt;IonCol&gt;
                  &lt;div className=&quot;section&quot;&gt;
                      &lt;IonIcon icon={leafOutline} className=&quot;iconClass&quot; /&gt;
                   
                      &lt;IonRange min={0} max={100} mode=&quot;ios&quot; className=&quot;customRange&quot; value={0}/&gt;     
                  &lt;/div&gt;
              &lt;/IonCol&gt;
  
            &lt;/IonRow&gt;
          &lt;/IonGrid&gt;
          &lt;/IonContent&gt;
          &lt;/&gt;
      
      );
  }
  
  export default Slideone;
  </code></pre>
  <p>My project directory tree:</p>
  <p><a href="https://i.stack.imgur.com/XoZ2d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XoZ2d.png" alt="Directory" /></a></p>