使用 react js 播放本地 mp3 文件而不導入

Question

我想使用 react.js 創建一個顯示我選擇的不同歌曲的應用程序 問題是它不適用於本地文件。 路徑沒問題（剛剛在 DOM 中檢查）我已經嘗試過相對路徑和絕對路徑，但它仍然是一樣的。

我嘗試了很多東西，例如導入反應聲音，反應音頻播放器......

我試過用“從“./songs/song.mp3”導入歌曲直接在文件開頭導入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;

有沒有人有想法？

Answer 1

由於安全問題，您將無法從瀏覽器中運行的 JavaScript 以編程方式訪問本地文件。

獲取本地文件的唯一方法是：

1. 用戶通過文件<input>選擇文件
2. 用戶將文件拖放到您的應用程序中

通過這種方式，用戶明確授予您訪問這些文件的權限。

您可以圍繞這些交互設計您的應用程序，或者

您可以在本地啟動一個 Web 服務器，它可以訪問您的音頻文件並將這些文件流式傳輸到您的應用程序或將文件上傳到雲服務。

Answer 2

您是否嘗試過使用<audio />標簽？

這是一個 React 工作音頻示例。

 class App extends React.Component { render() { return ( <div> <audio ref="audio_tag" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls autoPlay/> </div> ); } } ReactDOM.render( <App />, document.getElementById("app") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>

在此處查找有關<audio />標簽的更多信息： https : //www.w3schools.com/html/html5_audio.asp

Answer 3

您可以使用以下代碼來做到這一點：

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的"./"更改為音頻字典的相對路徑，並且僅發送父屬性中的音頻文件的名稱，它將起作用

我希望我能幫助你