切换播放/暂停以响应音频

Posted 2023-02-25

【中文标题】切换播放/暂停以响应音频

【英文标题】：toggle play/pause in react with audio

【发布时间】：2016-09-29 20:35:04

【问题描述】：

我做了一个音频播放器，一键播放和暂停。如果playing 为假，这将执行播放操作，如果playing 为真，则将暂停。

我不确定是不是因为在 React 中思考对我来说仍然不是 100% 自然，但我不知道该怎么做。

谁能指出我正确的方向？

请看下面我的代码。

var Player = React.createClass(

   getInitialState: function()
       return
           songs:[],
           playing: false
       
   ,

   audio: new Audio,

   playSong: function()
       this.setState(playing = true);
       this.audio.src = this.state.songs[this.props.song];
       this.audio.play();
   ,

   pauseSong: function() 
       this.setState(playing = false);
       this.audio.pause();
   ,

  render: function()
      return(
        <p onClick=...>Play/Pause<p/>
      )
  

我想我可以创建另一个函数来切换播放和暂停，如下所示。这是最好的方法吗？

togglePlayPause:function() 
    if(this.state.playing === false) 
        this.playSong();
    else 
        this.pauseSong();
    
,
render: function()
      return(
        <p onClick=this.togglePlayPause>Play/Pause<p/>
      )
  

【参考方案1】：

var Player = React.createClass(

  getInitialState: function() 
    return 
      songs: [],
      playing: false
    
  ,

  audio: new Audio,

  playSong: function() 
    console.log("play")
    this.setState( playing: true );
    this.audio.src = this.state.songs[this.props.song];
    this.audio.play(); 
  ,

  pauseSong: function() 
    console.log("pause");
    this.setState( playing: false );
    this.audio.pause();
  ,

  render: function() 
    return(
      <p onClick=this.state.playing ? this.pauseSong : this.playSong>Play/Pause</p>
    )
  

);

ReactDOM.render(
  <Player/>,
  document.getElementById('container')
);

您可以使用三元 onclick 来执行此操作，您可以决定要调用哪个函数。 可能是错字，但你需要做this.setState(key:value); 而不是this.setState(key = value);

https://jsfiddle.net/69z2wepo/183621/

【讨论】：

jsfiddle 链接指向默认的“Hello World”示例：|

太棒了，谢谢！如果«Play/Pause»按钮会随着点击而改变，这个例子会变得更好。