Posted on 2017-04-25 18:48
ZhouFeng 阅读(3298)
评论(0) 编辑 收藏 所属分类:
原创 、
Web开发
因为需要实现在页面中进行语音提示，有点像美团那个外卖的提示音“您有新的订单，请注意查收”，于是开始搜寻方法，最后发现一个开源项目，https://github.com/wenco/speech 用来实现语音播报，上面有文档说明。先clone下来试试
按照所给的代码，运行起来没有问题，需要在页面中放入一个标签，并写入要转换为语音的内容。为了后面为了调用方便，下面进行了一些调整。
把播放按钮隐藏起来，让事件触发播放。
修改jQuery.speech.min.js，因页面引用的文件是这个，也可以单独创建一个js在页面中引入，写入以下内容
//语音内容放在页面元素中，如果没有则创建<div style="display: none" id="tts_content"></div>
function say(arg) {
//处理页面元素
if($("#tts_content").length == 0){
//存在元素
$("<div style='display: none' id='tts_content'></div>").appendTo("body");
}
//处理传入参数
if(arg){
$('#tts_content').text(arg);
}
else{
$('#tts_content').text("您有新的消息，请注意查收");
}
//转化为语音
$('#tts_content').speech({
"speech":
false,
"speed": 16
});
}
调整了播报速度，在程序中自动创建需要的标签，需要播报的内容根据参数传入，没有参数也可以播报默认的消息，经过这样简单的封装后，在调用时，就只需要调用say()方法即可，不需要在页面中放入标签，也方便放入其他事件中，然后页面就可以这样了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>语音播报</title>
</head>
<body>
<style type="text/css">
body{background-color:#fff;padding-top:50px;}
</style>
<script src="js/jQuery/jQuery-2.1.4.min.js"></script>
<script src="js/speech/jQuery.speech.min.js"></script>
<button id="kk">说一个</button>
<script>
$("#kk").click(function() {
say("您有新的订单，请注意查收");
//say();
});
</script>
</body>
</html>
添加按钮只是为了演示事件触发，需要说什么内容就传入什么参数，如果不传入参数，则播报默认内容。这样的调用，甚是简单，终于完成了这样的功能，很帅，哈哈:D
致谢https://github.com/wenco/speech