如何将使用ReactHowler的类组件转为函数组件并调用seek方法

实现代码 #

import React, { useRef, useEffect, useState } from 'react';
import ReactHowler from 'react-howler';

// 示例音轨列表，可根据实际业务替换
const trackList = [
  'http://goldfirestudios.com/proj/howlerjs/sound.ogg',
  // 其他音轨地址
];

function App() {
  // 用useRef存储ReactHowler实例，替代类组件的this.player
  const playerRef = useRef(null);
  // 内部维护当前播放音轨的索引，切换时更新该状态即可
  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);

  // 对应原类组件的方法实现
  const getHowler = () => {
    return playerRef.current?.howler;
  };

  const getDuration = () => {
    return playerRef.current?.duration();
  };

  const getSeek = () => {
    return playerRef.current?.seek();
  };

  const setSeek = (time) => {
    playerRef.current?.seek(time);
  };

  // 切换音轨的方法
  const switchTrack = (targetIndex) => {
    setCurrentTrackIndex(targetIndex);
  };

  // 监听音轨索引变化，每次切换自动将进度重置为0，实现从头播放
  useEffect(() => {
    setSeek(0);
  }, [currentTrackIndex]);

  return (
    <>
      <ReactHowler
        src={trackList[currentTrackIndex]}
        playing={true}
        ref={playerRef}
      />
      {/* 切换音轨操作示例 */}
      <button onClick={() => switchTrack(1)}>切换到第二首音轨</button>
    </>
  );
}

export default App;

关键说明 #

• useRef创建的playerRef用来存储ReactHowler组件实例，调用实例方法前加可选链操作符?.可以避免组件未挂载完成时调用方法报错，这也是之前使用useRef报错的常见原因。
• 如果音轨地址是从组件外部传入，只需要把useEffect的依赖项替换为传入的音轨地址props即可，不需要在组件内部维护索引状态。

内容的提问来源于stack exchange，提问作者user12208384