uni-app在hbuider套壳html的app中无法使用window.speechSynthesis这个api，如何解决

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app在hbuider套壳html的app中无法使用window.speechSynthesis这个api，如何解决

let speechSynthesis = new SpeechSynthesisUtterance();  
speechSynthesis.lang = "zh-CN"; // 设置语言  
speechSynthesis.volume = 1; // 设置说话的音量  
speechSynthesis.rate = 1; // 设置说话的速度(值越大语速越快,越小语速越慢)  
speechSynthesis.pitch = 1; // 设置话语的音调(值越大越尖锐,越低越低沉)  
speechSynthesis.text = "设置说话时的文本设置说话时"; // 设置说话时的文本  
window.speechSynthesis.speak(speechSynthesis)

Harmonyos Next教程
5 回复

SpeechSynthesisUtterance 有兼容问题: https://caniuse.com/?search=SpeechSynthesisUtterance
你可以换一个兼容性比较好的，或者代码里判断一下


尝试了一些第三方库都失败了，暂时没找到可替代SpeechSynthesisUtterance的；还有请教一下，兼容问题是如何排查的，在安卓用浏览器打开都是正常的，但是打包成apk就失效了；

回复 1***@qq.com: 打包之后失效应该不是兼容性问题，多打印一些日志，然后接入vconsole看看打印？

楼主，请问解决了吗，我也遇到这个问题了

在uni-app中，由于它主要面向跨平台开发（包括小程序、App、H5等），某些Web API（如window.speechSynthesis）在原生App环境中可能并不直接可用，尤其是当使用HBuilderX打包成原生App时。这是因为原生环境（如iOS和Android）与Web环境存在差异，原生App没有直接暴露所有Web API。

为了解决这个问题，你可以考虑以下几种方案：

方案一：使用原生插件

  1. iOS：使用AVFoundation框架中的AVSpeechSynthesizer。
  2. Android：使用TextToSpeech类。

在uni-app中，你可以通过调用原生插件来实现文本转语音功能。以下是一个简单的示例，展示如何在uni-app中调用原生插件：

1. 创建原生插件（以Android为例）

在Android Studio中创建一个插件，使用TextToSpeech实现文本转语音功能，并将该功能暴露给uni-app调用。

2. 在uni-app中调用原生插件

在uni-app的manifest.json中配置插件，然后在代码中调用：

// 假设插件ID为com.example.texttospeech
const plugin = require('com.example.texttospeech');

// 调用插件的文本转语音方法
plugin.speak({
    text: 'Hello, uni-app!',
    success: function(res) {
        console.log('Text spoken successfully');
    },
    fail: function(err) {
        console.error('Failed to speak text', err);
    }
});

方案二：使用Web Speech API的替代方案

如果你坚持要在H5环境中使用类似的功能，可以考虑使用第三方服务（如Google Cloud Text-to-Speech API、IBM Watson Text to Speech等）。这些服务通常提供REST API接口，可以通过HTTP请求调用。

以下是一个使用fetch API调用第三方文本转语音服务的示例：

async function speakText(text) {
    const apiKey = 'YOUR_API_KEY';
    const url = `https://texttospeech.googleapis.com/v1/text:synthesize?key=${apiKey}`;

    const requestBody = {
        input: { text: text },
        voice: { languageCode: 'en-US', name: 'en-US-Wavenet-D' },
        audioConfig: { audioEncoding: 'MP3' }
    };

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestBody)
    });

    const blob = await response.blob();
    const urlObject = URL.createObjectURL(blob);
    const audio = new Audio(urlObject);
    audio.play();
}

speakText('Hello, uni-app with third-party service!');

请注意，使用第三方服务可能需要处理认证和API调用限制。

通过上述方法，你可以在uni-app中实现文本转语音功能，即使在使用HBuilderX打包的原生App中。

回到顶部