반응 구성 요소 내에서 일시 중지 기능이 호출되지만 아무 일도 일어나지 않습니다.
Dec 28 2020
재생 및 일시 중지를위한 토글 버튼이 있습니다. 다음은 코드입니다.
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
불이지만 소리는 여전히 흐르고 있습니다 ...
도와주세요 ...
답변
2 lissettdm Dec 29 2020 at 00:07
구성 요소가 렌더러 일 때마다 새 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;