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.

Stratigraphy

Answer 1

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',
});

Ratel

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. – Assiduity

Answer 2

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");

Stratigraphy

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? – Senility

Don't know. Ask them, and let us know. – Stratigraphy

Answer 3

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/*"
  ]
}

Bopp

Answer 4

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?

Tho

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/ ? – Stratigraphy

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. – Tho

Still not working... Cannot find module './assets/audio/alarm.mp3'... – Stratigraphy

The typescript compiler is messed up, cause I have no issues when importing audio in a vanilla javascript react app. Thanks any way. – Stratigraphy