reactjs - nhập tệp mp3 trong CRA/TypeScript

Tôi có một ứng dụng đơn giản được xây dựng bằng CRA v3.2.0. Tôi sử dụng TypeScript với các cài đặt mặc định (xem tsconfig.ts bên dưới). Trong /src/sounds/ tôi có một file mp3 "click_hi.mp3" mà tôi muốn sử dụng trong một component, nhưng tôi không thể import file mp3 đó với lỗi Cannot find module 'sounds/click_hi.mp3'.ts(2307).

Tôi đã thử đặt tệp vào cùng thư mục với thành phần để chắc chắn tránh sai chính tả trong đường dẫn. Nhưng không thành công... Làm sao tôi có thể nhập tệp mp3?

App.tsx

import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { Sampler } from "tone";
import ClickHi from 'sounds/click_hi.mp3'


export default function ExercisePage() {
  const [isLoaded, setLoaded] = useState(false);
  const sampler = useRef(null);

  useEffect(() => {
    sampler.current = new Sampler(
      { "A1": ClickHi },
      {
        onload: () => {
          setLoaded(true);
        }
      }
    ).toMaster();
  }, []);

  const handleClick = () => sampler.current.triggerAttack("A1");

  return (
    <div>
      <button disabled={!isLoaded} onClick={handleClick}>
        start
      </button>
    </div>
  );
}

tsconfig.ts

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

Câu trả lời #1

Đối với bất kỳ ai vẫn gặp vấn đề này, và giống như tôi, không muốn đặt các tài nguyên vào thư mục public, hãy làm như sau, sử dụng "default":

const path = require('../assets/audio/some_audio.mp3');
setAudio(new Audio(path.default));

Lưu ý: Tôi chỉ gặp vấn đề này khi sử dụng TypeScript. Bạn cần khai báo một module cho mp3, bằng cách thêm vào thư mục src của dự án một tệp có tên tương tự như "audio.d.ts" và nội dung giống như declare module '.*mp3';

Ví dụ về ứng dụng đơn giản hoạt động, sử dụng điều này: https://geocarlos.github.io/leiamos/

Câu trả lời số 2

Tôi đã sửa nó bằng cách đặt tệp âm thanh vào thư mục public và tham chiếu nó như sau:

useEffect(() => {
    sampler.current = new Sampler(
      { A1: `${process.env.PUBLIC_URL}/audio/click_hi.mp3`},
      () => {
          setLoaded(true);
      }
    ).toMaster();
  }, []);