vue js 语音播报 语音读文字 window.speechSynthesis new SpeechSynthesisUtterance (补充无声音 问题解决办法)

存在问题1 : 在google chrome 89版本之后 默认使用的线上服务来合成语音 所以在国内可能会没有声音
解决办法 : 通过getVoices 获取 localService为true 的字段 (localService = true 表示 使用本地合成服务)

getWindowVoice(){  // 获取浏览器中语音 (中文 + 本地服务)
   return window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN')
}

存在问题2 : google chrome 播放语音可能会卡住 所以无声音
解决办法 : 在播放语音之前先 调用一下cancel方法

window.speechSynthesis.cancel()

播放和停止函数

		// 语音停止
        handleStop(e) {
            if(window.speechSynthesis){
                const synth = window.speechSynthesis;
                const msg = new SpeechSynthesisUtterance();
                msg.text = e;
                msg.lang = "zh-CN";
                synth.cancel(msg);
            }
        },
        // 语音播报的函数
        handleSpeak(text='你好啊!'){
            if(window.speechSynthesis){
                const synth = window.speechSynthesis;
                const msg = new SpeechSynthesisUtterance();
                msg.text = text;     // 文字内容
                msg.lang = "zh-CN";  // 使用的语言:中文
                msg.volume = 1;      // 声音音量:1
                msg.rate = 1;        // 语速:1
                msg.pitch = 1;       // 音高:1
                msg.voice = this.getWindowVoice()  // 使用本地服务合成语音(若是获取不到 请异步获取, 加一个setTimeout)
                synth.speak(msg);    // 播放
            }
        },
  • 9
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
1. 实现自动播报语音 在 HTML 中,可以使用 `SpeechSynthesis` API 来实现自动播放语音。这个 API 提供了一些方法和事件,可以控制语音的播放和暂停。 下面是一个简单的例子: ```javascript // 创建 SpeechSynthesisUtterance 对象 const msg = new SpeechSynthesisUtterance(); msg.text = 'Hello world!'; // 播放语音 window.speechSynthesis.speak(msg); ``` 在谷歌浏览器中,需要用户授权才能使用 `SpeechSynthesis` API。可以在用户点击页面时触发语音播放,然后请求授权。 ```javascript document.addEventListener('click', () => { // 请求授权 window.speechSynthesis.requestPermission().then(() => { // 创建 SpeechSynthesisUtterance 对象 const msg = new SpeechSynthesisUtterance(); msg.text = 'Hello world!'; // 播放语音 window.speechSynthesis.speak(msg); }); }); ``` 2. 解决 Chrome 浏览器自动播放音频问题 在 Chrome 浏览器中,自动播放音频是被禁止的,需要用户手动操作才能播放。为了解决这个问题,可以在用户的交互事件中触发音频的播放。 在 Vue 中,可以在 `mounted` 生命周期中监听 `click` 事件,然后触发音频播放。 ```vue <template> <div> <button @click="playAudio">Play Audio</button> </div> </template> <script> export default { mounted() { // 监听点击事件 document.addEventListener('click', this.playAudio); }, beforeDestroy() { // 移除监听事件 document.removeEventListener('click', this.playAudio); }, methods: { playAudio() { // 创建音频对象 const audio = new Audio('/path/to/audio.mp3'); audio.play(); }, }, }; </script> ``` 3. 将 MP3 语音打包到线上 可以使用 Webpack 的 `file-loader` 来打包 MP3 文件。 首先,需要在 Vue 项目中安装 `file-loader`: ```bash npm install file-loader --save-dev ``` 然后,在 Webpack 配置文件中添加 loader: ```javascript module.exports = { module: { rules: [ { test: /\.(mp3)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'audio/', }, }, ], }, ], }, }; ``` 这个配置表示,当 Webpack 遇到 `.mp3` 文件时,会使用 `file-loader` 加载文件,并将文件打包到 `audio/` 目录下。 在 Vue 组件中使用打包后的 MP3 文件: ```vue <template> <div> <button @click="playAudio">Play Audio</button> </div> </template> <script> export default { methods: { playAudio() { // 创建音频对象 const audio = new Audio('/audio/audio.mp3'); audio.play(); }, }, }; </script> ```
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值