基于JavaScript语音播报功能展示

最新推荐文章于 2024-06-15 12:07:56 发布
最新推荐文章于 2024-06-15 12:07:56 发布
阅读量2.9k 收藏 9
点赞数 1
分类专栏： ASp.net js jquery 语音 文章标签： 语音播报 Jquery JS JavaScript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012949335/article/details/97515633
版权
ASp.net 同时被 3 个专栏收录
40 篇文章 0 订阅
订阅专栏
jquery
20 篇文章 0 订阅
订阅专栏
js
7 篇文章 0 订阅
订阅专栏

1、首先定义播报方法

可以把这个方法写在一个js文件里面，例如定义一个js文件名称为:Speech.js，文件内容如下：

"use strict";
var isLoading = false;
var VoiceReader = function () {
    var VoiceReader = function VoiceReader(readWords, readButtonId) {
        return new VoiceReader.fn.init(readWords, readButtonId);
    };

    VoiceReader.fn = VoiceReader.prototype = {
        constructor: VoiceReader,
        init: function init(readWords, callback, eachcallback, readButtonId) {
            VoiceReader.readWords = readWords;
            VoiceReader.inited = 0;
            //VoiceReader.voiceObj = null;
            this.read = function (callback, eachcallback) {
                VoiceReader.fn.stop();
                VoiceReader.readIndex = 0;
                VoiceReader.isStoped = 0;
                VoiceReader.sayutil = null;
                VoiceReader.callback = callback;
                VoiceReader.eachcallback = eachcallback;
                VoiceReader.buttonid = readButtonId;
                this.readVoice();
            };
        },
        callback: function callback() {
            
        },
        eachcallback: function eachcallback(i) {
            
        },
        readVoice: function readVoice() {
            var currentBrowser = GetCurrentBrowser();
            switch (currentBrowser) {
                case "Chrome":
                case "FF":
                case "Opera":
                case "Safari":
                    if (VoiceReader.isStoped == 0) {
                        VoiceReader.sayutil = new window.SpeechSynthesisUtterance(VoiceReader.readWords[VoiceReader.readIndex]);
                        //播报结束事件
                        VoiceReader.sayutil.onend = function (callback) {
                            VoiceReader.readIndex++;
                            if (VoiceReader.readWords.length > VoiceReader.readIndex - 1) {
                                if (typeof VoiceReader.eachcallback == "function") {
                                    VoiceReader.eachcallback(VoiceReader.readIndex - 1);
                                }
                                VoiceReader.fn.readVoice();
                            } else {
                                VoiceReader.readIndex = 0;
                                VoiceReader.isStoped = 1; //播放停止
                                isLoading = false;
                                if (typeof VoiceReader.callback == "function") {
                                    VoiceReader.callback();
                                }
                            }
                        };
                        window.speechSynthesis.speak(VoiceReader.sayutil);
                    };
                    break;
                case "IE55":
                case "IE6":
                case "IE7":
                case "IE8":
                case "IE9":
                case "IE10":
                case "IE11":
                    if (VoiceReader.isStoped == 0) {
                        if (VoiceReader.inited == 0) {
                            try {
                                loadScriptString("VoiceReader.voiceObj = new ActiveXObject('Sapi.SpVoice');"); //此对象需要在单独的script对象中定义，方可动态绑定事件
                                //播报结束事件
                                var endFunc = function endFunc() {
                                    VoiceReader.readIndex++;
                                    if (VoiceReader.isStoped == 1) {
                                        VoiceReader.readIndex = 0;
                                    }
                                    if (VoiceReader.readWords.length > VoiceReader.readIndex - 1) {
                                        if (typeof VoiceReader.eachcallback == "function") {
                                            VoiceReader.eachcallback(VoiceReader.readIndex - 1);
                                        }
                                        VoiceReader.fn.readVoice();
                                    } else {
                                        VoiceReader.readIndex = 0;
                                        VoiceReader.isStoped = 1; //播放停止
                                        isLoading = false;
                                        if (typeof VoiceReader.callback == "function") {
                                            VoiceReader.callback();
                                        }
                                    }
                                };
                                var startFunc = function startFunc() { };
                                var voiceScript = "function VoiceReader.voiceObj::EndStream(){" + endFunc.toString().match(/(?:\/\*[\s\S]*?\*\/|\/\/.*?\r?\n|[^{])+\{([\s\S]*)\}$/)[1] + "}";
                                voiceScript += "function VoiceReader.voiceObj::StartStream(){" + startFunc.toString().match(/(?:\/\*[\s\S]*?\*\/|\/\/.*?\r?\n|[^{])+\{([\s\S]*)\}$/)[1] + "}";
                                loadScriptString(voiceScript);
                                VoiceReader.inited = 1;
                            } catch (e) {
                                alert("ActiveXObject没有安装,请在IE选项中修改相应设置!请设置该浏览器：Internet选项->安全->自定义级别->对标记为可安全执行脚本ActiveX控件执行脚本 该项设置启用! " + e.message);
                                isLoading = false;
                                if (typeof VoiceReader.callback == "function") {
                                    VoiceReader.callback();
                                }
                            }

                        }
                       
                        if (VoiceReader.voiceObj) {
                            VoiceReader.voiceObj.Resume();
                            VoiceReader.voiceObj.Speak(VoiceReader.readWords[VoiceReader.readIndex], 1);
                        } else {
                            alert("ActiveXObject没有安装,请在IE选项中修改相应设置!请设置该浏览器：Internet选项->安全->自定义级别->对标记为可安全执行脚本ActiveX控件执行脚本 该项设置启用! ");
                            isLoading = false;
                            if (typeof VoiceReader.callback == "function") {
                                VoiceReader.callback();
                            }
                        }
                    }
                    break;
            }
        },
        stop: function stop(callback) {
            var currentBrowser = GetCurrentBrowser();
            switch (currentBrowser) {
                case "Chrome":
                case "FF":
                case "Opera":
                case "Safari":
                    window.speechSynthesis.cancel();
                    VoiceReader.readIndex = 0;
                    VoiceReader.isStoped = 1;
                    break;
                case "IE55":
                case "IE6":
                case "IE7":
                case "IE8":
                case "IE9":
                case "IE10":
                case "IE11":
                    if (VoiceReader.inited == 1) {
                        if (VoiceReader.voiceObj) {
                            VoiceReader.isStoped = 1;
                            VoiceReader.voiceObj.Speak("", 2);
                            VoiceReader.readIndex = 0;
                        }
                    }
                    break;
            }
            if (typeof callback == "function") {
                callback();
            }
        },
        pause: function pause(callback) {
            var currentBrowser = GetCurrentBrowser();
            switch (currentBrowser) {
                case "Chrome":
                case "FF":
                case "Opera":
                case "Safari":
                    window.speechSynthesis.pause();
                    break;
                case "IE55":
                case "IE6":
                case "IE7":
                case "IE8":
                case "IE9":
                case "IE10":
                case "IE11":
                    if (VoiceReader.voiceObj) {
                        //VoiceReader.isStoped = 1;
                        VoiceReader.voiceObj.Pause();
                    }
                    break;
            }
            if (typeof callback == "function") {
                callback();
            }
        },
        resume: function resume(callback) {
            var currentBrowser = GetCurrentBrowser();
            switch (currentBrowser) {
                case "Chrome":
                case "FF":
                case "Opera":
                case "Safari":
                    window.speechSynthesis.resume();
                    window.speechSynthesis.resume();
                    break;
                case "IE55":
                case "IE6":
                case "IE7":
                case "IE8":
                case "IE9":
                case "IE10":
                case "IE11":
                    if (VoiceReader.voiceObj) {
                        //VoiceReader.isStoped = 0;
                        VoiceReader.voiceObj.Resume();
                    }
                    break;
            }
            if (typeof callback == "function") {
                callback();
            }
        }
    };

    VoiceReader.fn.init.prototype = VoiceReader.fn;
    return VoiceReader;
} ();

//添加jscode
function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    } catch (ex) {
        script.text = code;
    }
    document.body.appendChild(script);
}

//获取当前浏览器类型
//myBrowser() start
function GetCurrentBrowser() {
    //取得浏览器的userAgent字符串
    var userAgent = navigator.userAgent.toLocaleLowerCase();
    var isChrome = userAgent.indexOf("chrome") > -1; //判断是否谷歌浏览器
    var isOpera = userAgent.indexOf("opera") > -1; //判断是否Opera浏览器
    var isIE = userAgent.match(/msie/) != null || userAgent.match(/trident/) != null; //userAgent.indexOf("compatible") > -1 && userAgent.indexOf("msie") > -1 && !isOpera; //判断是否IE浏览器
    var isFF = userAgent.indexOf("firefox") > -1; //判断是否Firefox浏览器
    var isSafari = userAgent.indexOf("safari") > -1; //判断是否Safari浏览器	
    if (isIE) {
        var IE5, IE55, IE6, IE7, IE8, IE9, IE10, IE11;
        IE5 = IE55 = IE6 = IE7 = IE8 = IE9 = IE10 = IE11 = false;
        /*
        var reIE = new RegExp("msie (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        */
        var fIEVersion = userAgent.match(/msie ([\d.]+)/) != null ? userAgent.match(/msie ([\d.]+)/)[1] : userAgent.match(/rv:([\d.]+)/)[1];
        IE55 = fIEVersion == 5.5;
        IE6 = fIEVersion == 6.0;
        IE7 = fIEVersion == 7.0;
        IE8 = fIEVersion == 8.0;
        IE9 = fIEVersion == 9.0;
        IE10 = fIEVersion == 10.0;
        IE11 = fIEVersion == 11.0;
        if (IE55) {
            return "IE55";
        }
        if (IE6) {
            return "IE6";
        }
        if (IE7) {
            return "IE7";
        }
        if (IE8) {
            return "IE8";
        }
        if (IE9) {
            return "IE9";
        }
        if (IE10) {
            return "IE10";
        }
        if (IE11) {
            return "IE11";
        }
    } //isIE end
    if (isFF) {
        return "FF";
    }
    if (isOpera) {
        return "Opera";
    }
    if (isChrome) {
        return "Chrome";
    }
} //myBrowser() end

 2、调用播报事件

根据实际的业务需求来获取播报的内容信息。 

<script type="text/javascript" charset="utf-8" src='@Url.Content("~/Scripts/jquery.min.js")'> </script>
<script type="text/javascript" charset="utf-8" src='@Url.Content("~/Scripts/Speech.js")'> </script>

<div>
<button type="button" onclick="GetVoiceSpeech()">
                    播报</button>
                <button type="button" onclick="GetVoiceSpeechPause()">
                    播报暂停</button>
                <button type="button" onclick="GetVoiceSpeechResume()">
                    播报继续</button>
                <button type="button" onclick="GetVoiceSpeechStop()">
                    播报停止</button>
</div>

<script type="text/javascript">
    var readStrArr = [];
    var reader = null;
    var readIndex = 0;
    "use strict";
    //开始播报
    function GetVoiceSpeech() {
        if (isLoading) return;
        isLoading = true;
        $.ajax({
            type: 'post',
            url: "url",
            dataType: "json",
            data: {},
            cache: false,
            success: function (json) {
                for (var i = 0; i < json.list.length; i++) {
                    readStrArr.push(json.list[i].name + "  ");
                }
                reader = VoiceReader(readStrArr, "");
                reader.read(function () {
                }, function (i) {
                });
                readStrArr = [];
            },
            error: function (e) {
                isLoading = false;
            }
        });

    }
    //暂停播报
    function GetVoiceSpeechPause() {
        reader.pause(function () {
        });
    }
    //继续播报
    function GetVoiceSpeechResume() {
        reader.resume(function () {
        });
    }
    //停止播报
    function GetVoiceSpeechStop() {
        reader.stop(function () {
            isLoading = false;
        });
    }
</script>



//以下是测试内容，供参考
<div>
<button type="button" onclick="GetVoiceSpeechTest()">
                    播报</button>
                <button type="button" onclick="GetVoiceSpeechPauseTest()">
                    播报暂停</button>
                <button type="button" onclick="GetVoiceSpeechResumeTest()">
                    播报继续</button>
                <button type="button" onclick="GetVoiceSpeechStopTest()">
                    播报停止</button>
</div>

<script type="text/javascript">
    var readStrArr = [];
    readStrArr.push("我是张三 大家好");
    readStrArr.push("我是李四 大家好");
    readStrArr.push("我是王五 大家好，欢迎来我校");
    var reader = null;
    var readIndex = 0;
    "use strict";
    //开始播报
    function GetVoiceSpeechTest() {
        if (isLoading) return;
        reader.read(function () {}, function (i) {});
        readStrArr = [];
    }
    //暂停播报
    function GetVoiceSpeechPauseTest() {
        reader.pause(function () {
        });
    }
    //继续播报
    function GetVoiceSpeechResumeTest() {
        reader.resume(function () {
        });
    }
    //停止播报
    function GetVoiceSpeechStopTest() {
        reader.stop(function () {
            isLoading = false;
        });
    }
</script>

 

筱筱脱脱
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS的TTS引擎speak.js.zip
07-16
speak.js 是一个 JavaScript 实现的 Text-to-Speech 的引擎。在线演示：http://projects.mattytemple.com/speak-js/ 标签：speak
speakjs:talkjs是一个库，可让您以简单有效的方式与浏览器客户端进行交互
04-28
talkjs版本1.0 talkjs是一个库，可让您以简单有效的方式与浏览器客户端进行交互。 初始化应用 var mySpeekjs = new speakjs('en') 当我们初始化speeks对象时，它会收到一个参数，即所使用语言的ISO代码。 如果您不知道要为您的语言使用什么代码，则可以查看 功能清单 textToVoice voiceToText 命令 听 textToVoice 将文本转换为语音的过程非常简单，因为它已经可以工作，并且您只需要接收要阅读的文本即可。 例子： var sjs = new speakjs('en'); sjs.textToVoice('hello word'); voiceToText 它接收作为参数的功能，该功能将在用户结束讲话后立即执行。 例子： var sjs = new speakjs('en'); sjs.voi
Speech JS：JavaScript 的语音识别与合成
最新发布
lostdeer
06-15 1171
Speech JS 是一个基于 Web Speech API 的 JavaScript 库。Web Speech API 是一个由 W3C 提出的标准，它定义了一组 JavaScript 接口，用于实现语音识别和语音合成。Speech JS 封装了这些接口，提供了一套简单易用的 API，开发者可以通过它轻松地在网页中添加语音功能。Speech JS 是一个功能强大且易于使用的 JavaScript 库，为 Web 应用程序带来了丰富的语音识别和语音合成功能。
speak.js: 前端文本转语音解决方案
gitblog_00029的博客
03-14 1687
speak.js: 前端文本转语音解决方案 项目简介 speak.js 是一个轻量级的 JavaScript 库，用于将文本转换为语音。该项目由 Michael Vines 开发，并在 MIT 许可下开源。 speak.js 的目标是提供一个易于集成到 Web 应用程序中的前端文本转语音解决方案。它可以在浏览器中运行，无需任何服务器支持或外部 API。 使用场景 speak.js 可用于许多需要将...
web文字转语音
前端小白的逆袭
10-21 3520
第一种：百度文字转语音开放API 参数 接口：http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字 lan=zh：（语言zh:中文；en:英文；fr:法文；） ie=UTF-8：（字符集） per=3（每3个字符停顿） spd=2：（语音播放速度，数字越大越快0-15） text=’’：（需要转换的文字） 示例： async say1() { const url = ‘http://tts.bai
html javascript audio 音频监听器
weixin_44493841的博客
04-14 4790
html javascript audio 音频监听器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>audio监听播放完毕</title> </head> <body> <!--src:音频播放路径--> <audio src="../../audio/eyJuYW1lIjoibnVtYmVyX2h1bW
使用Speech实现js播放音频
weixin_30845171的博客
09-12 617
经再次测试发现第一次调用时候语音播放多遍，请待我继续完善。 环境： windows10； IIS 10； .Net4.5.2; 例子代码：传送门 首先在程序中添加System.Speech的引用 在控制器中加入以下代码： 1 public async Task GetSpeek(string context) 2 { 3 ...
js中文字合成语音,文字转语音的实现方法
荣顶的博客
11-05 1795
SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等,该api对于盲人或弱视用户是非常有用的! var msg = new SpeechSynthesisUtterance("这里是转语音的测试文本,"); window.speechSynthesis.speak(msg); SpeechSynthesisUtterance基本属性 SpeechSynthesisUtterance.lang 获
javascript调用TTS实现语音播报html文本信息
热门推荐
知行合一
12-12 1万+
<HTML> <HEAD> <meta charset="UTF-8"> <SCRIPT LANGUAGE="JavaScript"> // Create the Sapi SpVoice object var VoiceObj = new ActiveXObject("Sapi.SpVoice"); </SCRIPT> <SCRIPT
百度语音播报+点击图片放大
11-29
这一功能通常基于Web服务，开发者需要在网页中引入百度的SDK（Software Development Kit）并编写相应的JavaScript代码来调用语音合成接口。 “点击图片放大弹出放大，再次点击缩小”这部分描述的是图片查看的交互...
基于javascript制作微信聊天面板
11-23
- 如果需要更真实的模拟，可以添加更多功能，如表情支持、语音消息、图片发送等。 总之，通过结合HTML、CSS和JavaScript，我们可以构建一个基本的微信聊天面板。这个面板能够动态展示对话内容，允许用户输入和发送...
webspeech.js
08-16
该脚本是TTS在web中的应用，只需要在页面中引入该脚本即可使用，但是此脚本需要在有网络的环境中使用。
js 播放amr音频文件
07-02
js 播放amr音频文件,将amr文件转化成base64字符串，用js转换成音频播放
speak（c#语音系统）
08-24
自己写的c#语音系统！能读出所选内容！
Jquery实现播音功能
09-28
可以直接运行 代码简单易懂
python084基于语音识别的智能垃圾分类系统.rar
04-25
【标题】"python084基于语音识别的智能垃圾分类系统"是一个使用Python编程语言开发的毕业设计项目，它集成了语音识别技术，旨在实现一种智能化的垃圾分类系统。这个系统不仅展示了Python在实际应用中的能力，还体现...
基于nodejs的聊天室实现（含语音）
11-22
本项目是基于Node.js和WebSocket技术实现的一个简单的聊天室，还特别加入了语音功能，使得用户可以通过文本或语音进行交流。本文将详细介绍如何利用Node.js和WebSocket创建这样一个聊天室，并探讨其关键技术和实现...
JavaScript_AI拟声 5秒内克隆您的声音并生成任意语音内容
05-20
JavaScript是一种广泛应用于...总的来说，JavaScript结合AI技术在语音合成领域的应用展示了强大的创新力，使得个性化和实时的语音交互成为可能。随着技术的不断发展，我们有理由期待更多有趣的用例和更先进的功能出现。
前端实现语音播放
未来以来 futureToday
09-10 6103
1、原生js实现 【MDN简单例子】https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis // 复制出来放到浏览器console回车就可以用看到效果 let utterance = new SpeechSynthesisUtterance("Hello world!"); speechSynthesis.speak(utterance); 【自己总结】 var msg = new SpeechSynthesisUtterance(
webGL js传输语音识别结果
09-25
WebGL是一种基于JavaScript的Web图形库，用于在网页上渲染3D和2D图形。而语音识别是指将人类语音转换为文本的技术。要实现通过WebGL和JavaScript传输语音识别结果，可以采取以下步骤： 首先，需要使用WebGL创建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值