详谈audio标签自动播放的问题

问题1：audio标签设置autoplay自动播放不生效

import { useEffect, useRef } from "react";

export default function MusicPage() {

  return (
    <div>
      <h1>音乐播放</h1>
      <audio controls src="/music.mp3" autoPlay loop preload="auto">
        Your browser does not support the <code>audio</code> element.
      </audio>
    </div>
  );
}

原因：浏览器（如 Chrome）做了限制，不允许自动播放

问题2：主动调用play方法自动播放不生效

import { useEffect, useRef } from "react";

export default function MusicPage() {
  const audioRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    if (audioRef.current) {
      const playAudio = async () => {
        try {
          await audioRef.current?.play();
        } catch (error) {
          console.error("Audio playback failed:", error);
        }
      };
      playAudio();
    }
  }, []);

  return (
    <div>
      <h1>音乐播放</h1>
      <audio ref={audioRef} controls src="/music.mp3" loop preload="auto">
        Your browser does not support the <code>audio</code> element.
      </audio>
    </div>
  );
}

会报以下错误：

Audio playback failed: DOMException: play() failed because the user didn't interact with the document first.

原因：浏览器阻止了自动播放，因为没有用户的交互行为。

解决方案：和用户交互

可以在用户点击或执行其他操作时通过 js手动触发播放

import React, { useEffect, useRef } from "react";

export default function MusicPage() {
  const audioRef = useRef<HTMLAudioElement | null>(null); // 创建引用

  useEffect(() => {
    // 确保在点击事件触发前 audioRef 已绑定到 DOM 元素
    const handleClick = async () => {
      if (audioRef.current) {
        try {
          await audioRef.current.play(); // 播放音频
          console.log('Audio playing...');
        } catch (error) {
          console.error('Audio playback failed:', error);
        }
      }
    };

    // 监听 body 上的点击事件
    document.body.addEventListener('click', handleClick);

    // 清理事件监听
    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <h1>音乐播放</h1>
      <audio
        ref={audioRef}  // 绑定 ref 到 audio 元素
        src="/music.mp3"
        preload="auto"
        playsInline
        controls
      >
        Your browser does not support the <code>audio</code> element.
      </audio>
    </div>
  );
}