Question

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

我尝试这样导入：

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

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

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

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

Answer 1

将音频放入资产中，并使用以下代码编写一个名为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 2

将其放置在assets文件夹中以进行访问。以下是有关如何在图像上使用它的方法，但是对于音频文件也是如此：

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

Answer 3

找到了解决该问题的方法。代替ES6 import使用ES5 require()处理音频文件。它可以正常工作，typescript编译器也不会抱怨。

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

Answer 4

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

类型/资产.d.ts

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

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

tsconfig.json

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

如何将声音文件导入React Typescript组件？

4 个答案: