Можете ли вы помочь мне с JSX и React?

Question

Я играю на музыкальном c игроке, реагируя. js, но у меня есть проблема. Это мой код:

const Player = () => {
const audio = new Audio('https://z1.fm//download/17440536')
audio.load();
audio.autoplay = false
return (
    <div className="player-box">
<div className="MainPlayer">
<i className="fa fa-backward  player-btn"/>
<i 
onClick={ () => {
  audio.play()
  } 
} className='fa fa-play player-btn'/>
<i 
onClick={ () => {
  audio.pause()
  } 
} className='fa fa-pause player-btn'/>
<i className="fa fa-forward player-btn" />
<i className="fa fa-random player-btn"/>
<i className="fa fa-refresh player-btn"/>
<input type="range"  className="slider" id="myRange"/> 
</div>
</div>
)

}

/// Я хочу сделать одиночная кнопка воспроизведения / паузы, но когда я делал это, у меня было много ошибок со звуком, когда он воспроизводился 2 раза, но остановился только на 1, как я могу убить эту ошибку?

Answer 1

Мало что я могу заметить:

1. Вы можете использовать ловушку UseState, чтобы отслеживать, воспроизводится или нет звук.

2. Вы не создаете экземпляр аудио в каждом рендере. Всякий раз, когда вы хотите ввести побочные эффекты в ваш компонент, вы должны воспользоваться хуком useEffect. Возможно, вы захотите прочитать https://reactjs.org/docs/hooks-effect.html

, вы можете взглянуть на этот пример:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Player/>
    </div>
  );
}

const Player = () => {
  const [isPlaying, setIsPlaying] = React.useState(false);
  const [audio, setAudio] = React.useState()


    React.useEffect(() => {
      const audio = new Audio('https://z1.fm//download/17440536')
      audio.load();
      audio.autoplay = false
      setAudio(audio);
    }, [])
  const play = () => {
    setIsPlaying(true);
    audio.play();
  }

  const pause = () => {
    setIsPlaying(false);
    audio.pause();
  }
  return (
      <div className="player-box">
  <div className="MainPlayer">
  <i className="fa fa-backward  player-btn"/>
  {isPlaying ? <span 
  onClick={pause} 
   className='fa fa-pause player-btn'>pause</span> :  <span
  onClick={play} 
   className='fa fa-play player-btn'>play</span>}


  <i className="fa fa-forward player-btn" />
  <i className="fa fa-random player-btn"/>
  <i className="fa fa-refresh player-btn"/>
  <input type="range"  className="slider" id="myRange"/> 
  </div>
  </div>
  )}

Answer 2

Если ваш код представляет собой ReactJS компонент, вы можете попробовать что-то подобное:

class AudioPlayer extends React.Component {
  constructor(props) {
    this.audioPlayer = new Audio(props.initialSource);
    this.audioPlayer.load();
  }

  render() {
    <div className="player-box">
      <div className="MainPlayer">
        <i className="fa fa-backward  player-btn"/>
        <i 
          onClick={this.onTogglePlayClick} 
          className='fa fa-play player-btn'
        />
        <i className="fa fa-forward player-btn" />
        <i className="fa fa-random player-btn"/>
        <i className="fa fa-refresh player-btn"/>
        <input type="range"  className="slider" id="myRange"/> 
      </div>
    </div>
  }

  onTogglePlayClick() {
    const audioPlayer = this.audioPlayer;
    if (audioPlayer.paused) {
      audioPlayer.play();
    } else {
      audioPlayer.pause();
    }
  }
}