typescript 如何在React应用中使用服务器文件夹中的音频文件?

sauutmhj  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(290)

我有两个项目:react应用程序和服务器文件夹。服务器文件夹中有一个上传文件夹,音频存储在该文件夹中。如何在react应用程序中使用此文件夹中的音频?如果我写src = '../../../../server_training/uploads/file_name.ogg'它不工作.
这是我的项目结构:(https://i.stack.imgur.com/gk68W.png
我在努力

<AudioPlayer
    //src='./../../training_server/uploads/file_name.ogg'
    //src = "trainer\training_server\uploads\file_name.ogg"
    //src='../training_server/uploads/file_name.ogg'

    showJumpControls={false}
    layout={'horizontal-reverse'}
    autoPlay={false}
/>

当我尝试导入此文件夹时,出现错误

import * as files from '../../../../training_server/uploads'

无法找到模块“../../.../task/task”或其相应的类型声明。

nhaq1z21

nhaq1z211#

import * as files from '../../../../training_server/uploads'

此语句将导入音频文件并将其保存在.js资源中。这不是一个好主意,因为音频文件比图像大得多。它也不工作,因为加载器还没有被写入。
更好的方法是这样的

<audio
        controls
        src="/media/cc0-audio/t-rex-roar.mp3">
            <a href="/media/cc0-audio/t-rex-roar.mp3">
                Download audio
            </a>
    </audio>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
你可以把src="”替换为音频文件所在的write url结构。

相关问题