useAudio

创建 <audio> 元素，追踪其状态并暴露播放控件。

用法

  1. import {useAudio} from 'react-use';
  3. const Demo = () => {
  4.   const [audio, state, controls, ref] = useAudio({
  5.     src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
  6.     autoPlay: true,
  7.   });
  9.   return (
  10.     <div>
  11.       {audio}
  12.       <pre>{JSON.stringify(state, null, 2)}</pre>
  13.       <button onClick={controls.pause}>Pause</button>
  14.       <button onClick={controls.play}>Play</button>
  15.       <br/>
  16.       <button onClick={controls.mute}>Mute</button>
  17.       <button onClick={controls.unmute}>Un-mute</button>
  18.       <br/>
  19.       <button onClick={() => controls.volume(.1)}>Volume: 10%</button>
  20.       <button onClick={() => controls.volume(.5)}>Volume: 50%</button>
  21.       <button onClick={() => controls.volume(1)}>Volume: 100%</button>
  22.       <br/>
  23.       <button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
  24.       <button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
  25.     </div>
  26.   );
  27. };

参考

  1. const [audio, state, controls, ref] = useAudio(props);
  2. const [audio, state, controls] = useAudio(<audio {...props}/>);

audio 是 React 的 <audio> 元素，你必须在渲染树中的某处插入，例如：

  1. <div>{audio}</div>

state 追踪音频的状态，并具有以下状态：

  1. {
  2.   "buffered": [
  3.     {
  4.       "start": 0,
  5.       "end": 425.952625
  6.     }
  7.   ],
  8.   "time": 5.244996,
  9.   "duration": 425.952625,
  10.   "isPlaying": false,
  11.   "muted": false,
  12.   "volume": 1
  13. }

controls 是一个方法列表集合，运行你控制音频的播放，它有以下接口：

  1. interface AudioControls {
  2.   play: () => Promise<void> | void;
  3.   pause: () => void;
  4.   mute: () => void;
  5.   unmute: () => void;
  6.   volume: (volume: number) => void;
  7.   seek: (time: number) => void;
  8. }

ref 是对 HTML <audio> 元素的 React 引用，你可以通过 ref.current 访问该元素，注意它可能是 null。

最后，props — <audio> 接收所有的属性。