时间戳

首页 > 解决方案 > 你能帮我处理 JSX 和 React 吗？

javascript - 你能帮我处理 JSX 和 React 吗？

问题描述

我在 react.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 次，我怎样才能杀死这个错误？

标签： javascriptreactjsjsx

解决方案

如果您的代码代表 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();
    }
  }
}

推荐阅读