如何在HTML中播放音频及解决WhatsApp后台播放失效问题

一、HTML中实现音频播放的基础方法 #

在HTML中实现音频播放核心依赖<audio>标签，配合<source>标签提供多格式兼容：

• <audio>作为音频容器，支持loop（循环播放）、controls（显示播放控件）等属性
• <source>标签用于指定不同编码的音频文件，确保在不同浏览器中能正常加载

基础实现代码示例：

<audio id="my_audio" loop controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    您的浏览器不支持音频播放
</audio>

<script>
    // 需绑定用户交互触发播放（符合浏览器自动播放政策）
    document.querySelector('#play-btn').addEventListener('click', () => {
        document.getElementById('my_audio').play();
    });
</script>

二、解决WhatsApp中音频无法后台运行的问题 #

WhatsApp内置浏览器严格遵循媒体自动播放政策，且后台会限制非用户触发的媒体播放，针对你的问题，可通过以下方案解决：

1. 强制通过用户交互触发播放 #

WhatsApp内嵌浏览器禁止页面加载时自动播放媒体，必须由用户主动点击、触摸等交互事件触发。修改你的代码，添加触发按钮：

<audio id="my_audio" loop>
    <source src='https://codepediacamp.000webhostapp.com/mp3/you-raise-me-up-josh-groban.mp3' type='audio/mpeg'>
    <source src='https://codepediacamp.000webhostapp.com/mp3/you-raise-me-up-josh-groban.ogg' type="audio/ogg">
</audio>

<button id="play-btn">点击播放音频</button>

<script type="text/javascript">
    document.getElementById('play-btn').addEventListener('click', async () => {
        const audio = document.getElementById("my_audio");
        try {
            await audio.play();
        } catch (err) {
            console.error('播放失败:', err);
        }
    });
</script>

2. 使用Web Audio API替代原生<audio>标签 #

部分内嵌浏览器对Web Audio API的后台支持更好，可尝试改用该API实现播放：

<button id="play-btn">点击播放音频</button>

<script type="text/javascript">
    let audioContext;
    let bufferSource;

    document.getElementById('play-btn').addEventListener('click', async () => {
        if (!audioContext) {
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
        }

        // 加载音频文件
        const response = await fetch('https://codepediacamp.000webhostapp.com/mp3/you-raise-me-up-josh-groban.mp3');
        const arrayBuffer = await response.arrayBuffer();
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

        // 创建播放源并循环播放
        bufferSource = audioContext.createBufferSource();
        bufferSource.buffer = audioBuffer;
        bufferSource.loop = true;
        bufferSource.connect(audioContext.destination);
        bufferSource.start();
    });
</script>

3. 添加移动端网页配置提升后台播放优先级 #

在HTML头部添加以下meta标签，让网页以类原生应用模式运行，有助于提升后台播放的兼容性：

<head>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

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