Блог

Я хочу создать приложение, которое показывает разные песни, которые я выбрал, с react.js Проблема в том, что он не работает с локальными файлами. Путь в порядке (только что проверено в DOM) Я пробовал использовать относительный путь и абсолютный путь, но он все тот же.

Я перепробовал много вещей, таких как импорт react-sound, react-audio-player…

Я попытался напрямую импортировать mp3-файл в начале файла с помощью команды «импортировать песню из «./songs / song.mp3», и это работает, но бесполезно, так как вам нужно добавить его вручную, если вы хотите добавлять / удалять песни.

Когда я нажимаю кнопку воспроизведения, она всегда не выполняет обещание и возвращает мне сообщение об ошибке :

DOMException: не удалось загрузить, поскольку не найден поддерживаемый источник.

 import React from "react";

const SongCard = (props) => {

const playAudio = () => {
  const audio = new Audio(props.song.path)
  const audioPromise = audio.play()
  if (audioPromise !== undefined) {
    audioPromise
      .then(() => {
        // autoplay started
        console.log("works")
      })
      .catch((err) => {
        // catch dom exception
        console.info(err)
      })
  }
}

  return (
    <div className="songCard">
      <div className="coverContainer">
        <img src=""/>
      </div>
      <div className="infoContainer">
        <div className="playPauseButton" onClick={playAudio}>►</div>
        <div className="songTitle">{props.song.nom}</div>
      </div>
    </div>
  );
};

export default SongCard;
 

У кого-нибудь есть идея?

Из-за проблем с безопасностью вы не сможете получить программный доступ к локальным файлам из JavaScript, запущенного в браузере.

Единственный способ получить доступ к локальным файлам — это:

1. Пользователь выбирает файл с помощью файла <input>
2. Пользователь перетаскивает файлы в ваше приложение

Таким образом, пользователь явно предоставляет вам доступ к этим файлам.

Вы можете либо спроектировать свое приложение с учетом этих взаимодействий, либо

Вы можете запустить локальный веб-сервер, где у него есть доступ к вашим аудиофайлам, и передавать их в ваше приложение или загружать файлы в облачный сервис.

вы можете сделать это с помощью этого кода:

 const SongCard = (props) => {
const playAudio = () => {
    let path = require("./"   props.song.path).default;
    const audio = new Audio(path);
    const audioPromise = audio.play();
    if (audioPromise !== undefined) {
        audioPromise
            .then(() => {
                // autoplay started
                console.log("works");
            })
            .catch((err) => {
                // catch dom exception
                console.info(err);
            });
    }
};

return (
    <div className="songCard">
        <div className="coverContainer">
            <img src="" />
        </div>
        <div className="infoContainer">
            <div className="playPauseButton" onClick={playAudio}>
                ►
            </div>
            <div className="songTitle">{props.song.nom}</div>
        </div>
    </div>
);
};

export default SongCard;
 

это сработает, если вы измените "./" в require на относительный путь словаря аудио и отправите только имя аудиофайла в реквизитах родительского файла

Надеюсь, я вам помог