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

Posted 2023-02-25

【中文标题】如何让音频在 React 中更流畅地循环播放？

【英文标题】：How do I get audio to loop more smoothly in React?

【发布时间】：2020-04-14 13:14:08

【问题描述】：

问题

我正在尝试使用useEffect 在使用create-react-app 创建的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，但我无法让它工作，而且它看起来很 hacky 和反正不靠谱。理想情况下，我正在寻求一个合适的解决方案，该解决方案适用于我想添加更多的任何轨道。

演示

转到托管此内容的GitHub pages site 的最底部，展开最底部的面板并点击播放。

【问题讨论】：

一个 元素不擅长这个，你应该使用网络音频 api。请参阅***.com/questions/42968873/… 虽然我不知道它如何适合反应组件

@Kaiido 我读过这个问题，虽然我也不确定它如何适合 React 并且浏览器支持有点粗略，但这是有道理的。最终我认为你是对的，这不会发生在

【参考方案1】：

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

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

【讨论】：

我希望最好是免费打包，但它看起来非常适合我的用例，我会试一试，谢谢。我会看看是否有任何纯 JS 答案，但如果这对我有用，我会接受这个答案！

有趣的是，虽然我认为它可能会稍微短一些，但我仍然会延迟使用它，如果它在 iTunes 中不能完美运行，我会开始认为这是轨道本身的开始