audio 关闭h5页面自动暂停的解决

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