你能帮我处理 JSX 和 React 吗？

Question

I do a music player on react.js, but i have a problem Its my code:

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>
)

}

/// I want to do single play/pause button, but when i was doing that, i had many bugs with audio its playing 2 times, but stopping only 1, how i can kill this bug?

Answer 1

If your code represents ReactJS component than you could try something like that:

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();
    }
  }
}

Answer 2

Few things I can notice:

1. You can use useState hook to keep track of wether the audio is playing or not.

2. You are not instantiating the audio in every render. Whenever you want to introduce side effects to your component you should take advantage of useEffect hook. You might want to read https://reactjs.org/docs/hooks-effect.html

you can take a look at that example:

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>
  )}