react音频播放解决方案

• 实现useSound useMusic

React播放音频的解决方案:

• 对于用户交互之后然后播放音频，直接使用useSound库即可
• 对于在回调函数中、或者useEffect中播放音频，需要自己处理，不能直接使用useSound库
  • 参考：https://github.com/joshwcomeau/use-sound/issues/22

浏览器音频问题

• chrome不允许自动播放音频
• ios下无法通过javascript调整audio的音量

解决方案

为了处理IOS下的volume的兼容性问题，使用库：howler.js 该库使用了web audio api并降级到html5 audio,gzip之后体积为7kb,可以同步引入，也可以异步引入。

此外，有一个库 use-sound 是基于howler.js的react hooks封装，代码只有200行，大小为1k左右，使用也十分方便 ,

举个简单的例子:

import useSound from 'use-sound';
import boopSfx from '../../sounds/boop.mp3';
const BoopButton = () => {
  const [play] = useSound(boopSfx);
  return <button onClick={play}>Boop!</button>;
};

官方示例

use-sound 适用于在用户的交互事件(click、onChange、mousedown)中播放音频，但该库存在一个问题，就是【无法在回调函数中播放音频】，例如

useEffect(()=>{
	play() //这样播放音频不支持
},[])

具体Bug原因参考 issue-22

如果要在回调函数中播放音频，就只能不适用use-sound，自己重新封装一个hook。

在封装之前可以先参考use-sound的核心代码,只有159行