Audio file not playing - HowlerJS

Question

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!

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 = () =>{

    const sound  = new Howl({
        src: ["..components/sound.mp3"]
    });
    const handlePlay = () =>{
        sound.play();
    }

    const rainyRef = useRef<HTMLIonRangeElement>(null);

    const musicChange = () =>{
        console.log("Rainy changed");
        const rainyLevel = rainyRef.current!.value;
        console.log(rainyLevel);
        sound.volume(+rainyLevel/100);
    }

    return(
        <>
       
        <IonContent className="contentsection">

        
        <IonGrid>
        <IonRow>
            <IonCol>
                <div className="section">
                    <IonIcon icon={rainyOutline} className="iconClass" />
                 
                    <IonRange min={0} max={100} mode="ios" className="customRange" value={0} onIonChange={musicChange} ref={rainyRef}/>   
                </div>  
            </IonCol>
            <IonCol>
                <div className="section">
                    <IonIcon icon={thunderstormOutline} className="iconClass" />
                 
                    <IonRange min={0} max={100} mode="ios" className="customRange" value={0}/>     

                    <IonButton onClick={handlePlay}>Click for Sound</IonButton>
                </div>
            </IonCol>

          </IonRow>

          <IonRow>
            <IonCol>
                <div className="section">
                    <IonIcon icon={bonfireOutline} className="iconClass" />
                 
                    <IonRange min={0} max={100} mode="ios" className="customRange" value={0}/>   
                </div>  
            </IonCol>
            <IonCol>
                <div className="section">
                    <IonIcon icon={leafOutline} className="iconClass" />
                 
                    <IonRange min={0} max={100} mode="ios" className="customRange" value={0}/>     
                </div>
            </IonCol>

          </IonRow>
        </IonGrid>
        </IonContent>
        </>
    
    );
}

export default Slideone;

My project directory tree:

Answer 1

If your component is in the same directory as the audio file should it not be

src: ["./sound.mp3"]