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

Question

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

我尝试像这样导入：

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

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

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

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

Answer 1

找到了问题的解决方案。import使用 ES5代替 ES6require()用于音频文件。它有效并且打字稿编译器没有抱怨。

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 项目中加载图像（和其他资源）？