Web Audio API 基础MP3音频播放无输出问题求助

AI 小北

2026-10-4

问题核心原因

你使用createMediaElementSource()方法将<audio>元素绑定到AudioContext上下文后，Chrome内核会直接切断该元素原本的默认音频输出通路，你没有把创建的MediaElementSourceNode节点手动连接到AudioContext的输出目标节点，所以音频没有输出到扬声器。
火狐、Safari对未连接AudioContext节点的<audio>元素保留了默认输出逻辑，所以能看到播放进度但Chrome没有对应表现，你测试振荡器功能正常是因为振荡器示例一般都会主动连接到aCtx.destination输出节点。

解决方案

在JS代码中补充节点连接逻辑即可，修改后的完整代码如下：

'use-strict'

const aCtx = new AudioContext();
const el = document.querySelector('audio');
const track = aCtx.createMediaElementSource(el);
const button = document.querySelector('button');

// 新增这一行：把音频源节点连接到AudioContext的输出端
track.connect(aCtx.destination);

button.addEventListener('click', async function() {
    console.log(this);
    
    if (aCtx.state === 'suspended') {
        // 补充await等待异步resume操作完成，避免状态异常
        await aCtx.resume();
    }
    
    if (this.dataset.playing === 'false') {
        el.play();
        this.dataset.playing = 'true';
        // 同步更新按钮可访问性属性
        this.setAttribute('aria-checked', 'true');
    } else {
        el.pause();
        this.dataset.playing = 'false';
        this.setAttribute('aria-checked', 'false');
    }
}, false);