Блог

Пытался создать приложение для фортепиано и для этого думал использовать react-sound. У меня есть несколько звуков mp3, которые я хочу воспроизвести после нажатия кнопки. Однако по какой-то причине звуки не воспроизводятся, несмотря на то, что я создал отдельный компонент Tune, следуя руководству из библиотеки react-sound. В консоли также нет особых ошибок. Метод, который должен запускать звуковую консоль.регистрирует данные при нажатии определенной клавиши, поэтому я подозреваю, что взаимодействие с кнопками работает нормально. У кого-нибудь когда-либо была проблема с этим пакетом?

 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;
  

и компонент 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.

Я делаю это следующим образом без react-sound:

 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;
  

У меня есть файлы, размещенные в общей папке, и у меня все работает нормально.