[英]React-sound doesn't play mp3 files from a project folder
一直在尝试构建一个钢琴应用程序并为此目的,我正在考虑使用 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;
我没有看到您导入任何 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;
我将文件放在公共文件夹中,对我来说效果很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.