package web开发 woocommerce graph sass ios7 vue网站 vue手册 docker的安全特性有哪些 java多行注释 bootstrap模态框传参 windows杀进程命令 range函数python python文件写入 python模块大全 python打开文件夹 javaswitch java编程入门 java的数据类型 java集合图 java八大基本数据类型 flash实例教程 销售单打印软件 按键精灵脚本教程 微信砍价活动怎么做 数独软件 暴力猴插件 脚本列表 奥法隐藏外观 cdr字体加粗 蜘蛛皮肤 枪林弹雨辅助 爱奇艺视频下载到电脑 ps字体描边 服务器下载 WVS 苹果8怎么截屏 繁简体 ps怎么做动画 苹果电脑怎么收藏网页
当前位置: 首页 > 学习教程  > 编程语言

使用浏览器合成语音播放

2020/11/24 10:37:14 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

使用浏览器合成语音播放示例注意事项示例 <script type"text/javascript"> //文本合成语音&#xff0c;并播放 function speechSynthesisSpeak(lang, text) {if (!window.speechSynthesis || !window.speechSynthesis.getVoices || !window.SpeechSynthesisUt…

使用浏览器合成语音播放

    • 示例
    • 注意事项

示例

<script type="text/javascript">	

//文本合成语音,并播放
function speechSynthesisSpeak(lang, text) {

    if (!window.speechSynthesis || !window.speechSynthesis.getVoices || !window.SpeechSynthesisUtterance) {
        console.error("浏览器不支持文本合成语音,请更换浏览器使用!");
        return;
    }

    //播放合成语音
    function speak(lang, text) {
        getSpeech(lang).then((voice) => {
            if (!voice) {
                console.error("获取不到语音列表对应的语言语音,无法执行合成!");
            } else {
                //构建语音合成器
                let utterance = new window.SpeechSynthesisUtterance();
                //设置文本
                utterance.text = text;
                //设置速率
                utterance["rate"] = 1;
                //设置语言(从获取的voice设置)
                utterance.lang = voice.lang;
                //设置语言配置
                utterance.voice = voice;
                //播放语音
                window.speechSynthesis.speak(utterance);
            }
        });
    }

    //获取语音配置(异步)
    function getSpeech(lang) {
        return new Promise(function (resolve, reject) {
                let id = setInterval(() => {
                    let voices = window.speechSynthesis.getVoices();
                    let langVoices = window.speechSynthesis.getVoices().filter((d) => d.lang === lang);
                    if (langVoices.length !== 0) {
                        resolve(langVoices[0]);
                        clearInterval(id);
                    } else if (voices.length !== 0) {
                        resolve(null);
                        clearInterval(id);
                    }
                }, 10);
            }
        )
    }

    //执行合成播放
    speak(lang, text);

}
	
</script>	

注意事项

1.SpeechSynthesisUtterance对象需要配置voice,否则某些浏览器使用会合成失败,导致只播放一次,后续的不再合成播放。
2.voice在系统中获取为异步获取,前几次获取可能获取的是空数组,这里使用轮询获取(不够严谨)。
3.IE浏览器不支持该API,其他浏览器有最低版本要求
4.chrome高版本的浏览器不能自动播放声音,需要配置快捷方式,"目标"后面添加参数

 --autoplay-policy=no-user-gesture-required

例如

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required

在这里插入图片描述

5.chrome高版本的浏览器不能自动播放声音,修改"设置"->“隐私设置和安全性”->“网站设置”->“更多内容设置”->“声音”->“允许网站播放声音”
在这里插入图片描述


本文链接: http://www.dtmao.cc/news_show_400296.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?