Next.js应用中Audio API在移动设备无法播放问题求助

我正在开发一个使用HTML5 Audio API播放音频的Next.js应用，该应用在桌面浏览器中运行正常，但在iOS和Android移动设备上无法播放音频，且控制台无任何错误提示。

以下是我使用的简化代码：

import { useEffect } from "react"

const AudioPlayer = () => {
  useEffect(() => {
    const audio = new Audio("/path/to/audio/file.mp3")
    audio.play().catch(error => {
      console.error("Error playing audio:", error)
    });
  }, []);
  return <div>Audio Player</div>
};

export default AudioPlayer

我已尝试以下解决方案但均未成功：

• 确认音频文件路径正确
• 测试不同音频格式（MP3、WAV）
• 通过用户交互触发音频播放（如按钮点击）
• 检查移动设备特定限制或权限

请问是否有人遇到过类似问题，或有解决建议？
感谢您的帮助！

内容的提问来源于stack exchange，提问作者Elliot