如何将声音文件导入反应打字稿组件？答案

【问题标题】：How to import a sound file into react typescript component?如何将声音文件导入反应打字稿组件？
【发布时间】：2020-04-02 11:54:59
【问题描述】：

我有一个位于 project_root/src/audio/alarm.mp3 的小 mp3 文件。

我尝试像这样导入：

  import alarm from "./audio/alarm.mp3";

但是当我尝试将它导入 App.tsx 时，我得到了这个编译器错误：

  Cannot find module './audio/alarm.mp3'.

但我可以很好地导入图像。

【问题讨论】：

标签： reactjs typescript audio import

【解决方案1】：

将它放在assets 文件夹中以便访问它。以下是如何将它用于图像，但它对音频文件的工作方式相同：

How to load image (and other assets) in Angular an project?

【讨论】：

我导入文件，创建一个新的 Audio 实例并调用 .play() 并播放，但我仍然收到编译器错误...顺便说一下 assets/ 应该在 src/ 内？
如果你希望它在编译时它应该在 src 文件夹中。编译器无法访问 src 文件夹之外的所有内容。
仍然无法工作...找不到模块'./assets/audio/alarm.mp3'...
打字稿编译器搞砸了，因为在香草 javascript 反应应用程序中导入音频时我没有问题。无论如何谢谢。

【解决方案2】：

找到问题的解决方案。而不是使用 ES6 import 使用 ES5 require() 来处理音频文件。它可以工作，typescript 编译器不会抱怨。

const alarm = require("./audio/alarm.mp3");

【讨论】：

这个答案的问题是@typescript-eslint/no-var-requires 在 ES5 导入时抛出 lint 错误。当然，我可以禁用该规则，但为什么 typescript 不提供 ES6 方法来导入音频文件？
不知道。问他们，让我们知道。

【解决方案3】：

将音频放在资产中，并使用以下代码编写一个名为 audio.d.ts 的自定义输入文件：-

declare module '*.mp3';

并以任何名称将其放在项目的根目录中，例如：./custom_typings/audio.d.ts。

在这里，我刚刚为一个 mp3 文件完成了它。在此之后转到您的 tsconfig.json 并在“typeRoots”下添加 custom_typings 文件夹。

"typeRoots": [
  "node_modules/@types",
  "custom_typings/"
]

完成此操作后，您可以从任何地方导入音频文件并正常使用它。

import {audioFile} from '../../../../assets/audio/audioFile.mp3';

TrackPlayer.add({
id: '1',
url: audioFile,
title: 'Example title',
artist: 'Example Artist',
artwork: 'https://picsum.photos/100',
});

【讨论】：

【解决方案4】：

如果您使用的是打字稿，您可以在 mp3 文件中添加输入。为此，请在根目录中创建一个 types 目录，并使用定义的文件asset.d.ts 并将其包含在您的配置文件中：

类型/asset.d.ts

declare module "*.mp3" {
  const value: any;
  export default value;
}

然后，将其添加到 tsconfig.json：

tsconfig.json

{
  "compilerOptions": {
    //...
  },
  "include": [
    "src/*",
    "types/*"
  ]
}

【讨论】：