पॉज फंक्शन को रिएक्शन कंपोनेंट के अंदर कहा जा रहा है लेकिन ऐसा कुछ नहीं होता है

Question

मेरे पास प्ले और पॉज़ के लिए टॉगल बटन है। यहाँ कोड है:

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 आग है लेकिन आवाज अभी भी चल रही है ...

कृपया कुछ मदद करें ...

Answer 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;