Question

我正在编写一个应用程序来播放不同的音频文件（循环播放）。在应用程序中，我希望多个文件能够同时播放，但它们需要从同一点开始。这意味着我激活的其他音轨只会在已播放的音频文件的循环完成后开始播放。

我的组件目前有两个 -

App.js（呈现不同的音频文件），父级。
Play.js（显示播放和停止每个音频文件的选项），child。一旦音频文件开始播放，我试图将更新（通过挂钩）传递给父级，但每次我进行这样的更新时，我都会失去孩子的功能，即我可以开始播放文件但无法停止

这是我孩子的代码：

import React from 'react';


export function Play(props) {

 
 let currentlyPlaying = false;
 
 let audio = new Audio(props.audioClip.sound);
 const start = () => {
   console.log(currentlyPlaying);
   if (!currentlyPlaying) {
     props.onStart(); //problematic line, stops re-rendering of child
     audio.play()
     currentlyPlaying = true;
     audio.loop = true;
   }
 }

 const stop = () => {
   currentlyPlaying = false;
   audio.pause()
   audio.currentTime = 0;
 }


 return (
   <div>

     <p>Hear the sound of {props.audioClip.label}!: </p>
     <button onClick={start}  >Playyyy day</button>
     <button onClick={stop}>Stop me!</button>
   </div >
 );
}

export default Play

这是我父母的代码：

function App () {
    const [counter, setCounter] = useState(0);
    // const [playingAnySong, setPlaying] = useState(false);
    const [audioClips, setAudioClips] = useState([
      { sound: Bass, label: 'Funky Bass', playing: false },
      { sound: futureFunk, label: 'Future Funk', playing: false },
      { sound: stutterBeats, label: 'Stuttering Beats', playing: false },
      { sound: electricGuitar, label: 'Electric country guitar', playing: false },
      { sound: StompySlosh, label: 'Stompin rythm', playing: false },
      { sound: groove, label: 'Groovyyy', playing: false },
      { sound: MazePolitics, label: 'The Maze', playing: false },
      { sound: pas3, label: 'Sachi drums', playing: false },
      { sound: organSynth, label: 'Psychedelic Organ', playing: false },
    ])


    return (
      <div className="container">
        {audioClips.map((audio, i) => {
          return <Play key={i} onStart={value => setCounter(counter + 1)} audioClip = {audio} />
        })}
      </div>
    );
  }




export default App;

我有一种感觉，我在更新父级的状态方面做错了。你能找出我每次更新父级时我的应用停止运行的原因吗？

Answer 1

在您的播放组件中，当前播放和音频的使用状态。

import React, {FC, useState} from 'react';


export const Play: FC <any> = ({audioClip, onStart}) => {

 const [currentlyPlaying, setCurrentlyPlaying] = useState(false)
 const [audio] = useState(new Audio(audioClip.sound)) // to keep track of the audio of the component

 const start = () => {
   console.log(currentlyPlaying);
   if (!currentlyPlaying) {
     onStart(); //problematic line, stops re-rendering of child
     audio.play()
     audio.loop = true;
     setCurrentlyPlaying(true)
   }
 }

 const stop = () => {
   setCurrentlyPlaying(false);
   audio.pause();
   audio.currentTime = 0;
 }

 return (
   <div>
     <p>Hear the sound of {audioClip.label}!: </p>
     <button onClick={start}  >Playyyy day</button>
     <button onClick={stop}>Stop me!</button>
   </div >
 );
}

export default Play

在您的 App 组件中，为 onStart 道具声明一个函数，因为您当前的代码会在 App 组件每次更新时重新渲染播放组件。

function App () {
const [counter, setCounter] = useState(0);
// const [playingAnySong, setPlaying] = useState(false);
const [audioClips, setAudioClips] = useState([
  { sound: Bass, label: 'Funky Bass', playing: false },
  { sound: futureFunk, label: 'Future Funk', playing: false },
  { sound: stutterBeats, label: 'Stuttering Beats', playing: false },
  { sound: electricGuitar, label: 'Electric country guitar', playing: false },
  { sound: StompySlosh, label: 'Stompin rythm', playing: false },
  { sound: groove, label: 'Groovyyy', playing: false },
  { sound: MazePolitics, label: 'The Maze', playing: false },
  { sound: pas3, label: 'Sachi drums', playing: false },
  { sound: organSynth, label: 'Psychedelic Organ', playing: false },
])
const handleStart = value => setCounter(counter + 1)


return (
  <div className="container">
    {audioClips.map((audio, i) => {
      return <Play key={i} onStart={handleStart} audioClip = {audio} />
    })}
  </div>
);

}

export default App;

孩子没有在反应中重新渲染

1 个答案: