更新该问题归因于我在工作的环境中缺乏知识,但以下给出的答案对于遇到类似问题的其他人应该是有用的。
编辑:似乎问题在于尝试将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希望这个对您有用。
为了进一步参考,您可以使用
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句