在反应组件内部调用暂停函数但没有任何反应答案

【问题标题】：Pause function is being called inside react component but nothing happens在反应组件内部调用暂停函数但没有任何反应
【发布时间】：2020-12-28 15:39:26
【问题描述】：

我有一个用于播放和暂停的切换按钮。这是代码：

export default (props) => {
  let [soundState, setSoundState] = useState({ state: 'off' })
  let [soundId, setSoundId] = useState(null)
  let [soundSeek, setSoundSeek] = useState(null)
  var sound = new Howl({
    src: [props.url],
    html5: true,
    volume: 1,
    myMusicID: '',
    saveSeek: null,
    onpause: () => {
      console.log('pause', soundId)
    }
  })

  const onPlayHandle = () => {
    setSoundState({ state: 'playing' })
    let id = sound.play()
    setSoundId(id)
    sound.seek(soundSeek, soundId)
  }
  const onPauseHandle = () => {
    console.log('onPauseHandle', soundId)
    sound.pause(soundId)
    setSoundSeek(sound.seek(soundId))
  }
 
}

onpause 被触发，但声音仍在播放...

请帮忙...

【问题讨论】：

嗨@lissettdm，由于您的问题是关于暂停声音，而不是播放它，我建议使用您的代码创建一个jsFiddle，以便其他人可以更轻松地帮助您，并更容易确保任何建议确实有效。这是一个类似问题的示例，有人问过包含 jsFiddle 的反应音频。祝你好运stackoverflow.com/questions/39779527/…

标签： javascript reactjs howler.js

【解决方案1】：

每次你的组件是渲染器时，都会创建一个新的Howl 实例。您需要使用useRef 来保留实例引用：

const soundRef = useRef(new Howl({
    src: ["http://listen.vo.llnwd.net/g3/prvw/6/5/8/3/1/2255913856.mp3"],
    html5: true,
    volume: 1,
    myMusicID: "",
    saveSeek: null,
    onpause: () => {
      console.log("pause", soundId);
    }
  }));
const sound = soundRef.current;

【讨论】：