音频文件未播放 - HowlerJS

问题描述

我在项目目录中保存了一个 .mp3 文件。我想在咆哮中播放它。这是我的 src 中的错误吗？我想不明白。我尝试使用其链接播放在线托管音频文件，效果很好。这可能是一个愚蠢的错误。但请在这里帮助我。我在 Slideone.tsx 中播放音频文件（查看下面的图片）。我尝试将音频文件放在与 Slideone.tsx 相同的目录中，我也尝试将其放在名为 Music 的不同目录中。我两次都相应地更改了路径。它没有播放音频。目前仅链接在线音频有效。提前致谢！

代码：

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;

我的项目目录树：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）