javascript - 如何使音频在React中更流畅地循环播放？

Question

问题

我正在尝试使用create-react-app在使用useEffect创建的React应用中循环播放一些音频。我已经开始工作了，但是音频结束和重新启动之间的延迟很短。我想将音频用作弹奏吉他的背景音乐，因此我需要使其完美流畅地循环播放。我相信磁道长度是正确的，我自己录制了该磁道，并精确导出了8条，并且在iTunes中可以循环播放。

当前代码

感谢this question中可接受的答案，我的音频播放器功能可以正常工作，当前看起来像这样:

import React, { useState, useEffect } from 'react'

const useAudio = audioPath => {
  const [audio] = useState(new Audio(audioPath))
  const [playing, setPlaying] = useState(false)

  const toggle = () => setPlaying(!playing)

  useEffect(() => {
      playing ? audio.play() : audio.pause()
    },
    [playing, audio]
  )

  useEffect(() => {
    audio.addEventListener('ended', () => {
      audio.currentTime = 0
      audio.play()
      setPlaying(true)
    })
  }, [audio])

  return [playing, toggle]
}

const Player = ({ audioPath }) => {
  const [playing, toggle] = useAudio(audioPath)

  return (
    <div>
      <button onClick={toggle}>{playing ? 'Pause' : 'Play'}</button>
    </div>
  )
}

export default Player

audioPath传入并且只是一个相对路径，可以很好地加载。它可以正常播放，可以暂停，也可以循环播放，循环之间只有很小的延迟。

我尝试过的

从代码中可以看到，我一直在尝试劫持音频 ended事件，并将音频设置回轨道的开头，但是显然这不是即时的-我不确定如何处理。我已经在我的第一个 useEffect函数中尝试过检查音频的时间，以及是否在轨道结束后的500毫秒之内将时间设置为0，但我无法正常工作，而且看起来还是很笨拙和不可靠。理想情况下，我需要一个适合任何轨道的正确解决方案，因为我想添加更多轨道。

演示版

转到 GitHub pages site所在的最底部，展开最底部的面板，然后点击播放。

Answer 1

我最近也在玩音频，发现react-h5-audio-player npm软件包对我来说是最好的选择。

它有很好的 Storyboard 示例，包括循环和自定义控件等，如果您想保留当前具有的单个播放/暂停按钮，则可能只需使用CSS隐藏显示即可。