h5开发语音播报功能

文章探讨了使用Window自带的speechSynthesis属性在手机浏览器中面临的兼容性问题,推荐使用UniApp的createInnerAudioContext方法来创建语音实例,以实现更好的兼容性并提供语音播放功能。通过autoplay属性和设置src,可以在大部分手机浏览器上顺利播放语音。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、使用window自带的api,但是手机浏览器多数不支持,兼容性差(不推荐)

1.使用到了window的speechSynthesis属性,如下如1.1

                                                                        图1.1

 2.主要用到了播报方法speak()和取消播报方法cancel(),然后初始进入该页面定时播报一次,如果进入该播报页面没有停留太久则使用定时器可以直接取消掉,全部代码如图2.1

                                                                               图2.1

二、使用uniapp自带的api,兼容性几乎覆盖绝大部分手机浏览器(推荐使用)

1.使用uniap的createInnerAudioContext()方法创建语音实例,给实例加上autoplay属性以及语音播放链接src,具体可以参考uni.createInnerAudioContext() | uni-app官网

核心完整代码如下图所示:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值