Mac版Chrome内置TTS功能失效，Windows版正常，求技术支持

以下代码在Windows版Google Chrome中运行正常，但在Mac OS版Chrome中无法工作，需求是页面加载后自动或通过代码触发播放按钮，启动朗读功能。

相关代码片段 #

自动触发播放按钮的代码 #

$("#play").trigger('click');

全局变量定义 #

let utterance;
let isMuted = false;
let speechRate = 1;
let wasStopped = false;

播放按钮点击事件处理 #

$( "#smart-review-container" ).on( "click", "#play", function() {
if (speechSynthesis.paused && !wasStopped) {
        speechSynthesis.resume();        
    } else {
        speakReview();              
    }
});

获取可用语音的函数 #

function getSelectedVoice(voices, voiceGender = 'female') {
    const indianVoices = voices.filter(v =>
        v.lang.toLowerCase().includes('hi-in') || 
        v.name.toLowerCase().includes('neerja') || 
        v.name.toLowerCase().includes('ravi') || 
        v.name.toLowerCase().includes('prabhat') || 
        v.name.toLowerCase().includes('shruti')
    );

    const generalVoices = voices;

    if (voiceGender === 'male') {
        return indianVoices.find(v =>
            v.name.toLowerCase().includes('male') || 
            v.name.toLowerCase().includes('ravi') || 
            v.name.toLowerCase().includes('prabhat')
        ) || generalVoices.find(v =>
            v.name.toLowerCase().includes('male') || 
            v.name.toLowerCase().includes('david') || 
            v.name.toLowerCase().includes('mark') || 
            v.name.toLowerCase().includes('google uk english male')
        );
    } else {
        return indianVoices.find(v =>
            v.name.toLowerCase().includes('female') || 
            v.name.toLowerCase().includes('neerja') || 
            v.name.toLowerCase().includes('shruti')
        ) || generalVoices.find(v =>
            v.name.toLowerCase().includes('female') || 
            v.name.toLowerCase().includes('zira') || 
            v.name.toLowerCase().includes('google uk english female') || 
            v.name.toLowerCase().includes('google us english')
        );
    }
}

朗读主函数 #

function speakReview(voiceGender = 'female') {
    const content = document.getElementById('smart-review-tts')?.innerText;
    if (!content) {
        console.log('Smart review content not found.');
        return;
    }

    let voices = speechSynthesis.getVoices();
    const speakText = () => {
        const voice = getSelectedVoice(voices, voiceGender);
        const utter = new SpeechSynthesisUtterance(content);
        utter.voice = voice;
        utter.rate = speechRate; // normal speed
        setTimeout(() => {
            speechSynthesis.speak(utter);
        }, 50);
    };

    if (voices.length) {
        speakText();
    } else {
        speechSynthesis.onvoiceschanged = () => {
            voices = speechSynthesis.getVoices();
            speakText();
        };
    }    
}

问题原因与修复方案 #

1. macOS Chrome的用户交互限制 #

macOS下的Chrome对自动播放媒体（包括语音合成）有更严格的限制，必须由用户主动触发的事件（如真实点击）才能启动语音合成，代码模拟的trigger('click')不算用户主动交互。

修复方案：

• 引导用户先进行一次真实的页面点击操作后再触发朗读，或者将自动触发逻辑绑定到用户首次交互事件上：

// 监听用户首次点击页面，之后触发朗读
document.addEventListener('click', function initSpeech() {
    $("#play").trigger('click');
    document.removeEventListener('click', initSpeech); // 只执行一次
}, { once: true });

2. 语音合成初始化时机问题 #

macOS Chrome中speechSynthesis.getVoices()的返回时机可能更晚，原代码中的onvoiceschanged绑定可能存在覆盖或未正确触发的情况。

修复方案：

• 改用监听voiceschanged事件的方式确保语音列表加载完成，避免依赖超时：

function speakReview(voiceGender = 'female') {
    const content = document.getElementById('smart-review-tts')?.innerText;
    if (!content) {
        console.log('Smart review content not found.');
        return;
    }

    const initSpeech = () => {
        const voices = speechSynthesis.getVoices();
        const voice = getSelectedVoice(voices, voiceGender);
        const utter = new SpeechSynthesisUtterance(content);
        utter.voice = voice;
        utter.rate = speechRate;
        speechSynthesis.speak(utter);
        // 移除事件监听，避免重复触发
        speechSynthesis.removeEventListener('voiceschanged', initSpeech);
    };

    // 先尝试直接获取语音
    const voices = speechSynthesis.getVoices();
    if (voices.length) {
        initSpeech();
    } else {
        // 等待语音加载完成
        speechSynthesis.addEventListener('voiceschanged', initSpeech);
    }
}

3. 语音选择逻辑兼容性 #

macOS Chrome的语音名称可能与Windows不同，比如部分语音名称不包含"male"/"female"关键字，导致getSelectedVoice无法找到合适的语音。

修复方案：

• 增加对macOS常见语音的匹配，或者 fallback 到第一个可用语音：

function getSelectedVoice(voices, voiceGender = 'female') {
    const indianVoices = voices.filter(v =>
        v.lang.toLowerCase().includes('hi-in') || 
        v.name.toLowerCase().includes('neerja') || 
        v.name.toLowerCase().includes('ravi') || 
        v.name.toLowerCase().includes('prabhat') || 
        v.name.toLowerCase().includes('shruti')
    );

    const generalVoices = voices;

    if (voiceGender === 'male') {
        return indianVoices.find(v =>
            v.name.toLowerCase().includes('male') || 
            v.name.toLowerCase().includes('ravi') || 
            v.name.toLowerCase().includes('prabhat') ||
            // 适配macOS语音
            v.name.toLowerCase().includes('alex')
        ) || generalVoices.find(v =>
            v.name.toLowerCase().includes('male') || 
            v.name.toLowerCase().includes('david') || 
            v.name.toLowerCase().includes('mark') || 
            v.name.toLowerCase().includes('google uk english male') ||
            v.name.toLowerCase().includes('alex')
        ) || generalVoices[0]; // 兜底返回第一个可用语音
    } else {
        return indianVoices.find(v =>
            v.name.toLowerCase().includes('female') || 
            v.name.toLowerCase().includes('neerja') || 
            v.name.toLowerCase().includes('shruti') ||
            // 适配macOS语音
            v.name.toLowerCase().includes('samantha') ||
            v.name.toLowerCase().includes('victoria')
        ) || generalVoices.find(v =>
            v.name.toLowerCase().includes('female') || 
            v.name.toLowerCase().includes('zira') || 
            v.name.toLowerCase().includes('google uk english female') || 
            v.name.toLowerCase().includes('google us english') ||
            v.name.toLowerCase().includes('samantha') ||
            v.name.toLowerCase().includes('victoria')
        ) || generalVoices[0]; // 兜底返回第一个可用语音
    }
}

4. 超时时间不足 #

原代码中设置的50ms超时可能在macOS Chrome中不足以完成语音初始化，导致speechSynthesis.speak()调用失败。

修复方案：

• 移除不必要的超时，直接在语音加载完成后调用speak()，或者延长超时时间（优先用事件监听方案）。

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