部分移动及iPad设备通过Ajax加载音频播放时出现NotAllowedError问题

你遇到的Uncaught (in promise) NotAllowedError是浏览器自动播放政策导致的，尤其是移动端和iPad的Safari限制更严格：音频播放必须直接绑定在用户的真实交互事件（比如点击）上下文里，不能在异步操作（比如Ajax回调）中触发——异步回调会脱离用户交互的上下文，浏览器会判定为“自动播放”而拦截。

另外audio.onerror不触发是因为这个错误属于播放权限问题，不属于媒体文件加载错误，所以不会触发onerror事件，而是play()方法返回的Promise会触发reject。

1. 提前预加载音频（推荐方案） #

把获取音频地址的Ajax请求提前到用户点击之前，比如页面初始化时就请求，这样用户点击按钮时直接用已获取到的地址触发播放，保证操作在用户交互上下文内：

// 页面初始化时先请求音频地址
let audioSrc = '';
$.ajax({
    url: "../audio/audio.json",
    type: 'GET',
    dataType: "json",
    success: function(response) {
        audioSrc = response.sound;
    }
});

$('#play-audio').click(function(){
    const audio = document.getElementById('audio'),
          retry = document.getElementById('retry');

    // 处理音频地址还没加载完成的情况
    if (!audioSrc) {
        retry.style.display = "block";
        retry.onclick = function() {
            audio.src = audioSrc;
            audio.play().catch(err => {
                console.error('播放失败:', err);
            });
        };
        return;
    }

    audio.src = audioSrc;
    // 通过Promise捕获播放权限错误
    audio.play().catch(err => {
        console.error('播放失败:', err);
        retry.style.display = "block";
        retry.onclick = function(){
            audio.play().catch(err => console.error('重试失败:', err));
        };
    });

    audio.onplaying = function(e){
        console.log('audio is playing');
    };
});

2. 保留Ajax但确保播放上下文合法 #

如果必须在用户点击后才发起Ajax请求，可以先在点击事件内触发一次空播放来获取音频权限，再执行异步操作：

$('#play-audio').click(async function(){
    const audio = document.getElementById('audio'),
          retry = document.getElementById('retry');

    // 先触发一次空播放获取权限，解决上下文丢失问题
    try {
        await audio.play();
        audio.pause();
        audio.currentTime = 0;
    } catch(err) {
        console.log('预触发权限:', err);
    }

    // 发起Ajax请求
    const response = await $.ajax({
        url: "../audio/audio.json",
        type: 'GET',
        dataType: "json"
    });

    audio.src = response.sound;
    audio.play().catch(err => {
        console.error('播放失败:', err);
        retry.style.display = "block";
        retry.onclick = function(){
            audio.play().catch(err => console.error('重试失败:', err));
        };
    });

    audio.onplaying = function(e){
        console.log('audio is playing');
    };
});

关键注意事项 #

• 所有audio.play()调用都要通过Promise的catch方法捕获错误，权限类错误不会触发onerror事件
• 移动端浏览器要求播放操作必须直接关联用户的单次交互，异步操作会丢失这个上下文，尽量提前预加载音频地址
• iOS Safari对音频播放的限制最严格，测试时重点覆盖该环境

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