在 TypeScript 中导入音频文件

Question

我在我的 TypeScript/React 应用（使用 create-react-app 制作）中导入音频文件时遇到问题。

我正在尝试像这样导入文件：

import note from "./audio/note1s.mp3";

但我收到的 TypeScript 错误提示：

找不到模块 './audio/note1s.mp3' 或其对应的类型声明。

如果我在该行上方添加// @ts-ignore 以忽略错误，则代码运行良好并且我可以按预期使用该文件。

如何配置我的项目以消除这些错误？我对 TypeScript 相当陌生，所以我确定我缺少一些东西。我不想每次导入文件时都添加那些 @ts-ignore 行。

Answer 1

import 语句通常用于导入 JavaScript/TypeScript 文件。 Create-react-app extends 这个包含样式表、图像和字体的列表。

音频或视频等资源应移至create-react-app 中的public/ 文件夹，并可直接从HTML 输出中引用。

例如： 将您的note1s.mp3 文件放到public/audio/note1s.mp3。

Embed 使用 /audio/note1s.mp3（不带 public/）的 App.js 中的音频：

return (
        <div className="App">
            <figure>
                <figcaption>Play audio file:</figcaption>
                <audio
                    controls
                    src="/audio/note1s.mp3">
                    Your browser does not support the
                    <code>audio</code> element.
                </audio>
            </figure>
        </div>
    );