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

Question

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

我尝试像这样导入：

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

但是当我尝试将其导入 App.tsx 时，我收到此编译器错误：

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

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

Answer 1

找到了问题的解决方案。 对于音频文件，不要使用 ES6 import而是使用 ES5 require() 。 它有效并且打字稿编译器没有抱怨。

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

Answer 2

将音频放在资产中，并使用以下代码编写一个名为 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',
});

Answer 3

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

如何在 Angular 项目中加载图像（和其他资产）？

Answer 4

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

类型/资产.d.ts

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

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

配置文件

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