如何使用Expo AV添加自动播放的背景音乐且无需播放按钮？

核心实现方案 #

通过HTML5 <audio> 标签配合JavaScript，实现音频自动播放，同时隐藏默认播放控件，只保留自定义的暂停/停止按钮。

代码示例 #

HTML结构

<!-- 配置音频自动播放、循环，隐藏默认控件 -->
<audio id="bgAudio" autoplay loop style="display: none;">
  <source src="你的背景音乐文件路径.mp3" type="audio/mpeg">
  你的浏览器不支持音频播放功能
</audio>

<!-- 自定义操作按钮 -->
<button id="pauseBtn">暂停</button>
<button id="stopBtn">停止</button>

JavaScript逻辑

const audio = document.getElementById('bgAudio');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');

// 暂停/继续切换逻辑
pauseBtn.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    pauseBtn.textContent = '暂停';
  } else {
    audio.pause();
    pauseBtn.textContent = '继续';
  }
});

// 停止播放逻辑（重置进度到开头）
stopBtn.addEventListener('click', () => {
  audio.pause();
  audio.currentTime = 0;
  pauseBtn.textContent = '暂停';
});

关键注意点 #

• 浏览器自动播放限制：多数现代浏览器要求音频需在用户交互后才能自动播放，若页面加载后音频未自动启动，可添加页面首次点击触发播放的逻辑（比如监听document.body的click事件，触发一次audio.play()）。
• 音频格式兼容性：建议同时提供MP3和OGG格式的音频源，覆盖更多浏览器。

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