在 React 中播放本地音频答案

【问题标题】：Play local audio in React在 React 中播放本地音频
【发布时间】：2023-01-01 02:46:38
【问题描述】：

我需要使用钩子在 React 中播放本地音频。稍后将应用程序部署到某个服务器。

应用程序文件夹包含以下内容：

索引.html
索引.css
索引.js
音频文件夹和首先.mp3和第二.mp3

它看起来像这样：

我添加了屏幕截图，因为如果没有 CSS，我们将无法清楚我需要完成的工作。（只有两个简单的数字会打印在 div 中）。 Codepen link (with CSS)

所以我应该在这些时候播放声音盒子组件被点击。

这是“index.js”文件：

import React, { useState } from 'react';
import ReactDOM from 'react-dom'
import "./index.css"
const sounds = [
  {
    key: "1",
    mp3: "./audio/first.mp3",
  },
  {
    key: "2",
    mp3: "./audio/second.mp3",
  }
];
const App = () => {
  const [keys, setKeys] = useState([
    "1",
    "2"
  ]);
  return (
      <div id="display" className="display">
        {sounds.map((sound, id) => {
          return <Box text={sound.key} audio={sound.mp3} />;
        })}
      </div>
  );
};
const playSound=(props)=>{
  return(
     props.audio.current.play;
  )
}
const Box = (props) => {
  return (
    <div className="box" onClick={playSound(props)}>
      {props.text}
      <audio src={props.audio} className="clip" id={props.text}/>
    </div>
  );
};
ReactDOM.render(<App/>, document.getElementById("root"));

这里的问题是props.audio.current.play;。它不播放声音。

我试过 console.log(props.audio) 并且它为 ex 正确打印。 ./audio/first.mp3

你能帮我解决这个问题吗？

【问题讨论】：

我认为您应该通过获取音频 URL 并尝试播放/暂停来创建音频实例。例如：让 audioEl = new Audio(audioURL); audioEl.play()
我没有音频 URL。我是用软件在本地制作的。有什么方法可以在本地进行，并且在应用程序在线部署时也应该有效吗？
是的，您只需要提供可访问/有效的音频 URL。或者出于测试目的只是将音频放在公共文件夹中？
您可以使用“npm install”和“npm start”在本地运行它吗？
哦，是的，应该不是问题。

标签： javascript reactjs react-hooks

【解决方案1】：

我可以通过提供一个总体思路来帮助您：

let audioEl = new Audio(audioUrl);

// Play
audioEl.play();

// Pause
audioEl.pause();

// Set current time
audioEl.currentTime = 0;

【讨论】：