React-sound 不播放项目文件夹中的 mp3 文件

Posted 2023-02-25

【中文标题】React-sound 不播放项目文件夹中的 mp3 文件

【英文标题】：React-sound doesn't play mp3 files from a project folder

【发布时间】：2019-03-07 23:27:32

【问题描述】：

一直在尝试构建一个钢琴应用程序并做到这一点，我正在考虑使用 react-sound。单击按钮后，我想播放一些 mp3 声音。但是，由于某种原因，尽管我按照 react-sound 库中的手册创建了一个单独的 Tune 组件，但并没有播放声音。控制台中也没有特别的错误。单击特定键后应触发声音 console.logs 数据的方法，因此我怀疑按钮交互工作正常。有没有人遇到过这个包的问题？

import React,  Component  from 'react';
import logo from './logo.svg';
import './App.css';
import Key from './Components/Key.js';
import Tone from './Components/Tone.js';

class App extends Component 
  state = 
   combinationsOfKeys: [
  'A': [0,7],
  'Ab' : [1,7],
  'B': [0,7],
  'Bb': [0.7],
  'C': [1,8],
  'D': [1,7],
  'Db': [1,8],
  'E': [1,7],
  'Eb': [1,7],
  'F': [1,7],
  'G': [1,7],
  'Gb': [1,7]
]


 handlePlayingMp3File = (fileId) => 
   console.log('Clicked'+ fileId)
   return (
  <Tone keyName=fileId/>
  )


render() 
const keys = []
const namesOfKeys = []

for(let i=0; i<this.state.combinationsOfKeys.length; i++)
  let nameOfMp3File = ''
  let currentObject = this.state.combinationsOfKeys[i];
  let keyOfTheObject = Object.keys(currentObject)
  let valueOfTheObjectArrayWithKeyLimits = currentObject[keyOfTheObject[0]]
  for(let n = valueOfTheObjectArrayWithKeyLimits[0];
    n < valueOfTheObjectArrayWithKeyLimits[1]+1; n++)
      nameOfMp3File = keyOfTheObject + n + '.mp3'
      namesOfKeys.push(nameOfMp3File)
    
;

console.log(this.state.combinationsOfKeys.length)
for(let i=0; i<namesOfKeys.length; i++)
  let nameOfAnMP3File = namesOfKeys[i];
  keys.push(<Key
    key=i
    keyName=nameOfAnMP3File.replace('.mp3', '')
    fileName=nameOfAnMP3File
    playMusic=() => this.handlePlayingMp3File(nameOfAnMP3File)/>)

return (
  <div>
    keys
  </div>
);


export default App;

以及带有 Key 组件的 Tone 组件

import React,  Component  from 'react';
import Sound from 'react-sound'

class Tone extends Component 

constructor(props)
  super(props);


render() 
 return (
   <Sound
   url='/piano-keys-sounds/A1.mp3'
   playStatus=Sound.status.PLAYING
   />
  );
 


export default Tone;

import React, Component from 'react'
import Sound from 'react-sound';

const key = (props) => 
  return (
    <button onClick=props.playMusic>props.keyName</button>
  )


export default key;

【参考方案1】：

我没有看到您导入任何 mp3 文件。

我这样做没有反应声音：

import React,  useState  from "react";
import sound1 from "../audio/sound1.wav";

const Example = () => 

  const [playSound, setPlaySound] = useState(0);

  return (
    <div>
      <button onClick=() => setPlaySound(!playSound)>Toggle</button>
      playSound ? <audio src=shuffle1 autoPlay /> : null
    </div>
  );
;

export default Example;

【参考方案2】：

我将文件放在公用文件夹中，它对我来说很好。