How to import a sound file into react typescript component?

Question

I have a small mp3 file located in project_root/src/audio/alarm.mp3.

I try to import like so:

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

But when I try to import it into App.tsx, I get this compiler error:

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

But I can import images just fine.

score 21 · Answer 1 · answered Dec 11 '20 at 07:26

Place the audio in the assets and write a custom typing file called audio.d.ts with the following code :-

declare module '*.mp3';

and place it in the root of your project under any name, ex: ./custom_typings/audio.d.ts.

Here, I have just done it for an mp3 file. After this go to your tsconfig.json and under "typeRoots" add the custom_typings folder.

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

Once this is done you can just import the audio file from anywhere and use it normally as you would.

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

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

This didn't work for me, I had to use a variation of your and Yan's answer. I put `declare module '*.m4a';` in `/typings/audio.d.ts`, then had changed my `"include"` to `"include": ["src", "typings"]`. Changing `typeRoots` did nothing for me for some reason. — Carcigenicate, Mar 17 '22 at 19:11

score 17 · Answer 2 · answered Dec 23 '19 at 13:30

17

Found a solution to the issue. Instead of using ES6 import use ES5 require() for audio files. It works and the typescript compiler doesn't complain.

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

answered Dec 23 '19 at 13:30

PatMan10

568
2
5
15

3

The problem with this answer is that `@typescript-eslint/no-var-requires` throws lint errors on an ES5 import. Sure, I can disable the rule but why would typescript not provide a ES6 method to import audio files? – codejedi365 Nov 23 '20 at 21:19
Don't know. Ask them, and let us know. – PatMan10 Nov 29 '20 at 10:19

score 1 · Answer 3 · answered Aug 06 '21 at 18:19

You can add typing to the mp3 files, if you are using typescript. To do this, create a types directory at the root directory with a defined file asset.d.ts and include in your configuration file:

types/asset.d.ts

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

Then, add this to tsconfig.json:

tsconfig.json

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

score 0 · Answer 4 · answered Dec 09 '19 at 11:46

0

Place it in the assets folder in order to access it. The following is on how to use it with images, however it works the same with audio files:

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

answered Dec 09 '19 at 11:46

PieterSchool

499
4
15

1

I import the file, create a new Audio instance and call .play() and it plays, but I still get the compiler error... btw is assets/ supposed to be inside src/ ? – PatMan10 Dec 09 '19 at 12:03
If you want it on compile time it should be inside the src folder. Everything outside of the src folder is not accesable for the compiler. – PieterSchool Dec 09 '19 at 12:09
2

Still not working... Cannot find module './assets/audio/alarm.mp3'... – PatMan10 Dec 09 '19 at 12:35
The typescript compiler is messed up, cause I have no issues when importing audio in a vanilla javascript react app. Thanks any way. – PatMan10 Dec 09 '19 at 12:54

How to import a sound file into react typescript component?

4 Answers4