在音频持续时间内播放音频，仅在音频完整时才跳到下一个

Question

所以我的应用程序要做的是从api获取音频文件，然后播放该音频文件。音频文件的持续时间也在api中给出。我还具有浏览不同音频文件的功能。但是我似乎无法完成这项工作。您能告诉我我做错了吗？另外，如果您看到错误的代码，请务必告诉我，这是我第一次编写应用程序，因此所有内容看起来都有些混乱，而且我敢肯定它是

class VisualQuran extends Component {

  componentDidMount() {
    //window.addEventListener("keydown", this.nextVerseHandler);
    this.intervalID = setInterval(
      () => this.nextVerseHandler(),
    this.state.apiData.verses[this.state.currentVerseCount].audio.duration 
    );



  componentWillUnmount() {
   // window.removeEventListener("keydown", this.nextVerseHandler, true);
   clearInterval(this.intervalID);
  }
  componentDidUpdate() {
    //Only Call Api if user selected a chapter,recitation,translation
    if (this.state.settings.currentChapterId && this.state.settings.currentRecitationId && this.state.settings.currentTranslationId) {

      if (!this.state.apiData ||
        ((this.state.apiData && this.state.changedChapter) || this.state.changedRecitation|| this.state.changedTranslation 
          || this.state.currentPage !== this.state.apiData.meta.current_page)) {

        axios.get(`/chapters/${this.state.settings.currentChapterId}/verses?recitation=${this.state.settings.currentRecitationId}&translations=${this.state.settings.currentTranslationId}&language=en&text_type=words&page=${this.state.currentPage}`)
          .then(response => {
            this.setState({ apiData: response.data, currentVerseCount: 0 ,changedRecitation:false,changedTranslation:false,changedChapter:false})
            console.log(response.data.verses[0].audio.url)

            console.log(`/chapters/${this.state.settings.currentChapterId}/verses?recitation=${this.state.settings.currentRecitationId}&translations=${this.state.settings.currentTranslationId}&language=en&text_type=words&page=${this.state.currentPage}`)
          }).catch(error => {
            console.log(error)
          })

      }
    }
  }

  nextVerseHandler = (event) => {
    const currPage = this.state.currentPage;
    const currVerse = this.state.currentVerseCount;

    //NEXT VERSE
    if ( this.state.apiData ) {
      if (this.state.currentVerseCount !== this.state.apiData.verses.length - 1) {
        this.setState({ currentVerseCount: currVerse + 1 })
      } else if (this.state.currentVerseCount === this.state.apiData.verses.length - 1 && !this.state.apiData.meta.next_page && this.state.repeat) {
        console.log(!this.state.apiData.meta.next_page)
        this.setState({ currentVerseCount: 0 })
      } else if (this.state.currentVerseCount === this.state.apiData.verses.length - 1 && this.state.apiData.meta.next_page) {
        this.setState({ currentPage: currPage + 1 })

        console.log(this.state.currentPage + " current page")

      }
    }
  }

  render() {
    let audio;
    if (this.state.apiData) {
      audio = (<audio className="displayNone" controls autoPlay key={this.state.apiData.verses[this.state.currentVerseCount].audio.url}>
        <source src={this.state.apiData.verses[this.state.currentVerseCount].audio.url} />
      </audio>)
    }

    return ({audio});
  }
}

export default VisualQuran;