Reactjs 使用React.js循环音频

我认为这是一个相当简单的问题，但我正在尝试自学React.js，对音频循环的方式有点困惑。我理解在呈现和返回纯html音频标记时的循环，但我不知道没有它怎么做。到目前为止，由于我发现了另一个StackOverflow问题，我已经学会了如何切换播放和暂停按钮，但不知道如何使音频循环。如果可能的话，我想保留当前的代码（我尝试在渲染时使用上面提到的音频标记，但是很难再次合并图像切换），只需要学习如何将循环合并到其中。任何帮助或资源都将不胜感激！以下是迄今为止我将其简化为的代码：

导出类播放声音扩展组件{
建造师（道具）{
超级（道具）；
此.state={
剧本：真的
};
this.url=”https://actions.google.com/sounds/v1/water/waves_crashing_on_rock_beach.ogg";
this.audio=新音频（this.url）；
this.togglePlay=this.togglePlay.bind（this）；
}
切换播放（）{
这是我的国家({
play:！this.state.play
});
this.state.play？this.audio.play（）：this.audio.pause（）；
}
render（）{
返回(
{this.state.play？：}
);
}
}

您可以将

结束的

侦听器添加到您的

音频

对象中，在该对象中，您可以将时间设置回

0

，然后重新开始播放

class PlaySound extends Component {
  constructor(props) {
    super(props);

    this.state = {
      play: true
    };

    this.url = "https://actions.google.com/sounds/v1/water/waves_crashing_on_rock_beach.ogg";
    this.audio = new Audio(this.url);
    this.audio.addEventListener('ended', function () {
      this.currentTime = 0;
      this.play();
    }, false);
    this.togglePlay = this.togglePlay.bind(this);
  }

  // ...
}

class PlaySound扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
剧本：假
};
this.url=”https://actions.google.com/sounds/v1/water/air_woosh_underwater.ogg";
this.audio=新音频（this.url）；
this.audio.addEventListener（'end'，function（）{
这个.currentTime=0；
这个。play（）；
}，假）；
this.togglePlay=this.togglePlay.bind（this）；
}
切换播放（）{
const wasPlaying=this.state.play；
这是我的国家({
播放：！正在播放
});
如果（正在玩）{
this.audio.pause（）；
}否则{
this.audio.play（）
}
}
render（）{
返回(
{this.state.play？“暂停”：“play”}
);
}
}
render（，document.getElementById（“根”））
您只需设置
loop=true


togglePlay（）{
这是我的国家({
play:！this.state.play
});
this.state.play？this.audio.play（）：this.audio.pause（）；
this.audio.loop=true；
}
我找不到这本书的文档。你能帮我吗？