编辑:如何在React应用程序中导入MP3文件

s

更新该问题归因于我在工作的环境中缺乏知识,但以下给出的答案对于遇到类似问题的其他人应该是有用的。

编辑:似乎问题在于尝试将mp3导入我的React应用程序/组件时有些时髦。当前的问题是,当我尝试使用时:

import soundfile from "../neure-resources/test.mp3"

我最终出现以下错误:

“找不到模块“ ../neure-resources/test.mp3”

解决任何其他导入组件的问题,就是要确保要导入的组件也已定义为可导出,但是如何对MP3文件执行此操作呢?


因此,首先我不确定我的问题是否与导入/链接mp3文件有关,或者与如何在React中播放音频剪辑(或其他问题)有关。一旦弄清楚我的问题是什么,我将编辑标题。

因此,我有一个应用程序,在网页上有一个按钮,用户可以按此按钮来播放mp3文件。简单的东西,但我经常遇到以下错误:

HTTP加载失败,状态为404。媒体资源“ ...”的加载失败。

现在,尽管我对文件路径等不是很精通。但我可以通过查看指南和示例来弄清楚,但我一直无法做到。

我的缩写文件结构类似(有关详细说明,请参见文章底部):

学生/ src /组件

在组件下,我的实际应用程序放在一个文件夹中,而在我计划存储“资源”的组件下,还有另一个文件夹,因此:

组件/my-app-folder/my-actual-app.tsx

组件/my-resources/my.mp3

对于我理解的文件路径

“ ..”

表示从当前位置上方的一个文件夹开始的路径,这将是我的

“ / components”-文件夹

我的资源文件夹位于component文件夹下,所以我认为应该没问题。我查询了有关在React中播放音频的其他一些SO问题,发现了一个大致建议以下问题的问题:

在我的内心

render()

let path = "../my-resources/test.mp3";
let audio = new Audio(path);

然后对于JSX部分:

audioPlayer = (
            <div className="count-number-equivelance-audioPlayer">
                <button id="equivalence-audio-button" onClick={() => audio.play()}>Soundclip!</button>
            </div>
        ); 

我试过了:

let path = "../my-resources/test.mp3";

let path = "../../my-resources/test.mp3";

因为我不确定一个“ ..”是否指向实际应用程序所在的文件夹,并需要另一个“ ..”指向“ components”文件夹中的实际位置,但是它们都产生相同的错误。我还尝试使用整个路径并将mp3移至与应用程序本身相同的文件夹中,但结果相同。

因此,对于我是否只是在应用程序中使用外部资源感到困惑,还是我的实际代码和/或对React的知识应归咎于此,我感到非常困惑。我收到的错误会让我相信资源放置不正确,但是我不确定这是否只是错误代码的副作用。

编辑:我也在虚拟环境中工作,如果这会改变情况,则在本地运行我自己的堆栈。

还可以参考文件树的图片:

图片中打开的文件包含有问题的应用程序及其正在尝试使用的资源:

文件树

通往组件的路径如下(如果我尝试在一幅图中抓住整个路径,图片将非常大)。

/ Users /“用户名” / arvio / client / student / src / components

拉胡尔

嗨,Ksk,这可能是文件路径错误的错误。请在浏览器的单独标签中测试文件路径(最好是chrome)。在新选项卡中输入URL或使用inspect元素在新选项卡中打开URL并检查您是否能够访问mp3文件。

如果音频文件在单独的浏览器选项卡中播放,请共享文件结构图像。

<-------------------新编辑------------------->

嗨,ksk要播放mp3文件或以反应方式渲染图像,您必须首先将其作为别名导入,然后在该路径处可以使用该别名。以该示例为例,可以清楚地理解。

import React, { Component } from ‘react’;
import soundfile from ‘../assets/alert.mp3’

上面的mp3文件位于代码目录之外的目录中,然后位于资产文件夹中。..运算符将移至当前目录之外。

导入mp3文件后,您可以使用html语法将其呈现为

    export default class Alert extends Component {
render() {
 return (
   <Sound
   url={soundfile}
   playStatus={Sound.status.PLAYING}
   onLoading={this.handleSongLoading}
   onPlaying={this.handleSongPlaying}
   onFinishedPlaying={this.handleSongFinishedPlaying}
   />
  );
 }
}

在这里,此示例使用react-sound模块,您也可以使用defualt html5 mp3播放器并根据需要对其进行自定义。

现在转到您上传的图像,并假设代码位于NeureCountNumberEquivalence.tsx和mp3文件中,作为test.mp3,您的导入语法将如下所示。

import soundfile from ‘../neure-resources/test.mp3’

<audio controls>
  <source src={soundfile} type="audio/ogg">
  <source src={soundfile} type="audio/mpeg">
Your browser does not support the audio element.
</audio>

就是这样:p希望这个对您有用。

为了进一步参考,您可以使用

反应中的mp3

html5音频组件

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章