Как я могу использовать аудиофайлы в next.js13?

Question

Я пытаюсь использовать аудиофайлы в Next.js 13: «Вам может понадобиться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack.js.org/concepts#loaders . (Исходный код для этого двоичного файла опущен)" Возникает эта ошибка. Что я должен делать?

• Звуковой Компонент

      "use client";

import tickSound from "../../sounds/tick1.wav";

export default function Sound() {
  const tick = new Audio(tickSound);
  const metronomeSoundHandler = () => {
    tick.play();
  };

  return (
    <>
      <button onClick={metronomeSoundHandler}>Play</button>
    </>
  );
}

• Next.config.js

      /** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

Я хочу использовать аудиофайл

Answer 1

если вы используете ts с nextjs

добавьте объявление типа в файл с именем sound.d.ts[или используйте свое имя]

объявить модуль '*.mp3' { const content: строка экспорта содержимого по умолчанию } необходимо новое определение в файле tsConfig, если у вас его еще нет.

В хуке убедитесь, что вы встроили путь к звуковому файлу вместо использования оператора импорта: import useSoundfrom "use-sound"; const [playsound] = useSound('/sounds/my-recod.mp3')