解决移动设备上AJAX触发音频播放的NotAllowedError

<audio id="audio" preload="auto"></audio>
<button id="play-audio">播放音频</button>
<button id="retry-audio" style="display:none;">重试播放</button>

document.addEventListener('DOMContentLoaded', function() {
    const audio = document.getElementById('audio');
    const playButton = document.getElementById('play-audio');
    const retryButton = document.getElementById('retry-audio');

    // 辅助函数：尝试播放音频并处理NotAllowedError
    function tryPlayAudio() {
        // audio.load() 在设置src后通常是隐式调用的，但在某些情况下显式调用可能有用
        // audio.load(); 

        const playPromise = audio.play();

        if (playPromise !== undefined) {
            playPromise.then(() => {
                console.log('音频正在播放');
                retryButton.style.display = 'none'; // 成功播放则隐藏重试按钮
            }).catch(error => {
                console.error('播放音频失败:', error);
                // NotAllowedError通常通过Promise rejection捕获
                if (error.name === 'NotAllowedError') {
                    console.warn('浏览器阻止了音频播放，可能需要用户再次交互。');
                    retryButton.style.display = 'block'; // 显示重试按钮
                } else {
                    // 其他播放错误，如网络问题等
                    console.error('音频播放发生其他错误:', error);
                    retryButton.style.display = 'block';
                }
            });
        }
    }

    // 初始播放按钮的事件处理
    // 对于触摸设备，可以同时监听click和touchend，或者使用更高级的库进行事件归一化
    playButton.addEventListener('click', function() {
        fetchAudioAndPlay();
    });

    // 针对移动设备，为重试按钮使用touchend事件
    // 注意：这里使用addEventListener，而不是jQuery的on('click')
    retryButton.addEventListener('touchend', function() {
        console.log('重试按钮被触摸，尝试重新播放...');
        tryPlayAudio(); // 再次尝试播放
    });

    // 如果希望playButton在移动设备上也更可靠，可以添加touchend监听
    playButton.addEventListener('touchend', function(event) {
        // 阻止默认的touchend行为，防止可能与click事件冲突
        event.preventDefault(); 
        fetchAudioAndPlay();
    });


    function fetchAudioAndPlay() {
        // 禁用按钮防止重复点击
        playButton.disabled = true;
        retryButton.style.display = 'none'; // 隐藏重试按钮

        fetch("../audio/audio.json")
            .then(response => response.json())
            .then(data => {
                audio.src = data.sound;
                tryPlayAudio(); // 尝试播放音频
            })
            .catch(error => {
                console.error('获取音频路径失败:', error);
                // 显示重试按钮或其他错误提示
                retryButton.style.display = 'block';
            })
            .finally(() => {
                playButton.disabled = false; // 重新启用按钮
            });
    }

    // 监听audio元素的onplaying事件（如果需要）
    audio.onplaying = function() {
        console.log('音频正在播放中...');
    };

    // 对于非NotAllowedError的错误，onerror仍然可能触发，但NotAllowedError通常通过Promise捕获
    audio.onerror = function(e) {
        console.error('audio元素捕获到错误事件:', e);
        // 如果错误不是NotAllowedError，则可能在这里处理
        retryButton.style.display = 'block';
    };
});