时间戳

首页 > 解决方案 > 使用 react js 播放本地 mp3 文件而不导入

javascript - 使用 react js 播放本地 mp3 文件而不导入

问题描述

我想使用 react.js 创建一个显示我选择的不同歌曲的应用程序问题是它不适用于本地文件。路径没问题（刚刚在 DOM 中检查过）我尝试过使用相对路径和绝对路径，但它仍然是一样的。

我已经尝试了很多东西，比如导入 react-sound、react-audio-player ......

我尝试在文件开头使用“./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}>►&lt;/div>
        <div className="songTitle">{props.song.nom}</div>
      </div>
    </div>
  );
};

export default SongCard;

有人有想法吗？

标签： javascriptreactjsaudio

解决方案

由于安全问题，您将无法通过在浏览器中运行的 JavaScript 以编程方式访问本地文件。

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

  1. 用户通过文件选择文件<input>
  2. 用户将文件拖放到您的应用程序中

通过这种方式，用户明确授予您访问这些文件的权限。

您可以围绕这些交互设计您的应用程序，或者

您可以在本地启动一个 Web 服务器，它可以访问您的音频文件并将这些文件流式传输到您的应用程序或将文件上传到云服务。

推荐阅读