audio 关闭h5页面自动暂停的解决
beforeunload:判断是否离开当前页面 pagehide:当用户通过“前进/后退”按钮,离开当前页面时触发。 popstate:监听 popstate 事件监听物理返回键 微信浏览器返回事件,关闭页面 visibilitychange:浏览器标签页被隐藏或显示的时候会触发 visibilitychange 事件
import React, { useEffect, useState } from 'react';
import { Toast } from '@components/common/Toast';
import { useUnmount } from 'ahooks';
export interface AudioProp {
audioSrc: string;
}
export default function Audio(props: AudioProp) {
const { audioSrc } = props;
const [audioPlayer, setAudioPlayer] = useState<HTMLAudioElement | null>(null);
const handleLoad = (audio: HTMLAudioElement | null) => {
if (!audio) return;
setAudioPlayer(audio);
const canPlayType = typeof (audio.canPlayType);
if (!canPlayType) {
Toast.show({ msg: 'sorry,你的浏览器不支持html5 语音播放' });
}
console.log(audio.paused);
if (audio.paused) { // 判读是否播放
audio.play(); // 没有就播放
}
};
const beforeunload = () => {
audioPlayer && audioPlayer.pause();
};
useEffect(() => {
// 判断是否离开当前页面
window.addEventListener('beforeunload', beforeunload);
// 当用户通过“前进/后退”按钮,离开当前页面时触发。
window.addEventListener('pagehide', beforeunload);
// 监听 popstate 事件监听物理返回键 微信浏览器返回事件,关闭页面
window.addEventListener('popstate', beforeunload);
// 浏览器标签页被隐藏或显示的时候会触发 visibilitychange 事件
document.addEventListener('visibilitychange', () => {
document.visibilityState === 'hidden' && beforeunload();
});
return () => {
window.removeEventListener('beforeunload', beforeunload);
window.removeEventListener('pagehide', beforeunload);
window.removeEventListener('popstate', beforeunload);
document.removeEventListener('visibilitychange', () => {
document.visibilityState === 'hidden' && beforeunload();
});
};
}, [audioPlayer]);
// 在组件卸载时,执行函数。
useUnmount(() => {
console.log('在组件卸载时,执行函数。');
beforeunload();
});
return (
<audio
autoPlay
ref={handleLoad}
src={audioSrc}
/>
);
}
参考资料:https://www.jianshu.com/p/294159985c7a