H5 语音合成播报功能

来源：互联网发布：淘宝账户永久冻结解冻编辑：程序博客网时间：2024/06/07 11:42

采用的 SpeechSynthesisUtterance实现语音播报功能，参考资料： ONE、TWO

实现效果图：

语音实现效果贴图

语法介绍

1、speechSynthesis.getVoices()

getVoices()的方法SpeechSynthesis接口返回的列表SpeechSynthesisVoice对象代表当前设备上所有可用的声音。

2、speechSynthesis.cancel()

cancel()的方法SpeechSynthesis接口从话语队列中删除所有的话语。

3、speechSynthesis.pause()

pause() 把SpeechSynthesis对象处于暂停状态。

4、SpeechSynthesis.speak()

增加了一个语音话语队列; 它将口语当其他话语排队之前一直说。

5、SpeechSynthesis.resume()

把SpeechSynthesis对象non-paused状态:简历如果它已经停了。

浏览器兼容性

浏览器兼容性贴图1

代码附上：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>H5语音播报功能</title>        <style>            article {margin: 0 auto;max-width: 800px;text-align: center;}            textarea {max-width: 600px;width:100%;text-align: left;}            button{border-radius: 3px;border: 1px solid #dddddd;height: 30px;width: 80px;cursor: pointer;}        </style>    </head>    <body>        <article>            <h3 align="center">语音播报功能：</h3>            <p>                <textarea rows="15" class="_play">搜狗[1]  是搜狐公司的旗下子公司，于2004年8月3日推出，目的是增强搜狐网的搜索技能，主要经营搜狐公司的搜索业务。在搜索业务的同时，也推出搜狗输入法、搜狗高速浏览器。</textarea>            </p>            <p>                <label>选择播报语言：</label>                <select id="voiceSelect" onchange="play()"></select>            </p>            <button class="_search" onclick="play()">开始</button>            <button onclick="resume()">继续</button>            <button onclick="pause()">暂停</button>            <button onclick="cancel()">清除队列</button>        </article>    </body>    <script>        if(!('speechSynthesis' in window)) {            throw alert("对不起，您的浏览器不支持")        }        var _play = document.querySelector("._play"),            to_speak = window.speechSynthesis,            dataName, voiceSelect = document.querySelector("#voiceSelect"),            voices = [];        function play() {            cancel();            to_speak = new SpeechSynthesisUtterance(_play.value);            //to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间            var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');            for(i = 0; i < voices.length; i++) {                if(voices[i].name === selectedOption) {                    to_speak.voice = voices[i];                }            }            window.speechSynthesis.speak(to_speak);        }        //暂停        function pause() {            window.speechSynthesis.pause();        }        //继续播放        function resume() {            window.speechSynthesis.resume(); //继续        }        //清除所有语音播报创建的队列        function cancel() {            window.speechSynthesis.cancel();        }        //创建选择语言的select标签        function populateVoiceList() {            voices = speechSynthesis.getVoices();            for(i = 0; i < voices.length; i++) {                var option = document.createElement('option');                option.textContent = voices[i].name + ' (' + voices[i].lang + ')';                if(voices[i].default) {                    option.textContent += ' -- DEFAULT';                }                option.setAttribute('data-lang', voices[i].lang);                option.setAttribute('data-name', voices[i].name);                voiceSelect.appendChild(option);            }        }        setTimeout(function() {            populateVoiceList();        }, 0)    </script></html>

gitHub地址

阅读全文

0 0