解决移动设备上通过AJAX播放音频的NotAllowedError

<audio id="audio"></audio>
<button id="play-audio">Play Audio</button>
<button id="retry" style="display:none">Retry To Play Audio</button>

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

    // 辅助函数：尝试播放音频并处理Promise
    function tryPlayAudio() {
        // audioPlayer.load(); // 可以在播放前调用load()，但通常不是解决NotAllowedError的关键
        const playPromise = audioPlayer.play();

        if (playPromise !== undefined) {
            playPromise.then(() => {
                console.log('Audio is playing successfully.');
                retryButton.style.display = "none"; // 播放成功则隐藏重试按钮
            }).catch(error => {
                // NotAllowedError 会在这里被捕获
                console.error('Audio play failed:', error.name, error.message);
                if (error.name === 'NotAllowedError' || error.name === 'AbortError') {
                    // 即使onerror不触发，Promise的catch也能捕获到
                    console.log('Displaying retry button due to play error.');
                    retryButton.style.display = "block";
                }
            });
        }
    }

    // 初始播放按钮的点击事件
    playButton.addEventListener('click', function() {
        $.ajax({
            url: "../audio/audio.json", // 假设这是一个返回 { "sound": "path/to/audio.mp3" } 的JSON
            type: 'GET',
            dataType: "json",
            success: function(response) {
                audioPlayer.src = response.sound;
                // 尝试播放音频
                tryPlayAudio();
            },
            error: function(xhr, status, error) {
                console.error('Failed to fetch audio path:', status, error);
                // 可以在这里显示错误信息或重试按钮
                retryButton.style.display = "block";
            }
        });
    });

    // 关键优化：为重试按钮添加touchend事件监听
    // 对于移动设备，touchend通常比click更可靠地触发用户手势策略
    retryButton.addEventListener('touchend', function(event) {
        event.preventDefault(); // 阻止默认的触摸行为，如滚动
        console.log('Retry button touched, attempting to play audio...');
        tryPlayAudio(); // 再次尝试播放
    });

    // 也可以保留click事件作为桌面设备的备用，但touchend优先级更高
    retryButton.addEventListener('click', function() {
        // 如果touchend已经处理，这里可能不会执行或不重要
        console.log('Retry button clicked (fallback), attempting to play audio...');
        tryPlayAudio();
    });

    // 监听audio元素的错误事件（作为补充，即使它可能不总是触发NotAllowedError）
    audioPlayer.onerror = function(e) {
        console.error('Audio element onerror event fired:', e);
        // 如果这里捕获到错误，也显示重试按钮
        retryButton.style.display = "block";
    };

    audioPlayer.onplaying = function() {
        console.log('Audio is actually playing.');
    };
});