Funkcja pauzy jest wywoływana wewnątrz komponentu reagowania, ale nic się nie dzieje
Dec 28 2020
Mam przycisk przełączania do odtwarzania i wstrzymywania. oto kod:
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
pali się, ale dźwięk nadal działa ...
proszę o pomoc ...
Odpowiedzi
2 lissettdm Dec 29 2020 at 00:07
Za każdym razem, gdy komponent jest renderowany, Howl
tworzona jest nowa instancja. Aby zachować odwołanie do instancji, musisz użyć 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;