实现input数字语音播报,可扩展成任何语音audio实现,IE8兼容转flash实现

最新推荐文章于 2022-05-19 15:35:29 发布
最新推荐文章于 2022-05-19 15:35:29 发布
阅读量1.8k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/haw_king/article/details/72575473
本文介绍了一个简单的数字语音播放器实现方案，支持中英文数字语音播放，可通过自定义URL播放不同语言的数字发音。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE>
<html>
 <head>
  <title> New Document </title>
   <meta charset="utf-8">

  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
 </head>

	<script type="text/javascript" src="http://www.linuxidc.com/inc/jquery.js"></script>
	<script src="http://api.html5media.info/1.1.6/html5media.min.js"></script>
	<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script type="text/javascript">
<!--
	
	var SpeechVideo = function(){
		this.urls = [];
		this.canload = true;
		this.setInterval = null;
		this.audio = null;
	};

	SpeechVideo.prototype.__load = function(){
		var me    = this;
		if(this.canload == false){ return; }
		
		var url   = this.urls.shift();
		if(url == null && this.setInterval != null){ clearInterval(this.setInterval); this.setInterval = null; return; }else{ this.play(url); }

		if(this.setInterval == null){
			this.setInterval = setInterval(function(){
				me.__load();
			},10);
		}
		
	}

	SpeechVideo.prototype.play = function(url){
	    this.canload = false;
		if(this.audio == null){ 
			if(typeof Audio != 'undefined'){ this.audio = new Audio(); }else{
				//兼容IE9-
				if(typeof $ !== 'undefined'){
					var $audio = $('<audio  src="'+ url +'" controls preload></audio>').hide();
					$audio.appendTo(document.body);
					this.audio = $audio[0];
				}else{
					var audio = document.createElement('audio');
						audio.style.display="none";
					document.body.appendChild(audio);
					this.audio = audio;
				}
			}
		}

		if(typeof Audio != 'undefined'){
			var audio = this.audio,me = this;
			audio.src = url;
			
			if(window.attachEvent){
				audio.onloadstart = function(){ me.canload = false;};
				audio.onended = function()    { me.canload = true; };
				audio.onerror = function()    { me.canload = true; };
			}else{
				audio.addEventListener('loadstart',function(){ me.canload = false;});
				audio.addEventListener('ended',function()    { audio.currentTime = 0; me.canload = true; });
				audio.addEventListener('error',function()    { audio.currentTime = 0; me.canload = true; });
			}
			
			audio.play();
		}else{
			//兼容IE9-【暂时没找到合适的方法，以网易云音乐为例的话，估计有眉目】
		}
		
	}

	SpeechVideo.prototype.next = function(url){
		this.urls.push(url);
		this.__load();
	};
	
	SpeechVideo.prototype.remove = function(ele){
		if(typeof ele == 'undefined'){ this.urls.pop(); }else
		if(typeof ele == 'number'){ 
			if(ele > this.urls.length - 1){ ele = this.urls.length - 1; } 
			this.urls.splice(ele,1);
		}else{
			var index = -1;
			for (var i = 0; i < this.urls.length; i++) {
				if (this.urls[i] == ele) return index = i;
			}
			if(index > -1){ this.urls.splice(index,1); }
		}
	}


	var NumberSpeech = function(cfg){
		var dfCfg = {
			input : null, reg : null ,
			srcsMap : { //英文发音
				'1' : 'http://fanyi.baidu.com/gettts?lan=en&text=One&spd=3&source=web',
				'2' : 'http://fanyi.baidu.com/gettts?lan=en&text=Two&spd=3&source=web',
				'3' : 'http://fanyi.baidu.com/gettts?lan=en&text=Three&spd=3&source=web',
				'4' : 'http://fanyi.baidu.com/gettts?lan=en&text=Four&spd=3&source=web',
				'5' : 'http://fanyi.baidu.com/gettts?lan=en&text=Five&spd=3&source=web',
				'6' : 'http://fanyi.baidu.com/gettts?lan=en&text=Six&spd=3&source=web',
				'7' : 'http://fanyi.baidu.com/gettts?lan=en&text=Seven&spd=3&source=web',
				'8' : 'http://fanyi.baidu.com/gettts?lan=en&text=Eight&spd=3&source=web',
				'9' : 'http://fanyi.baidu.com/gettts?lan=en&text=Nine&spd=3&source=web',
				'0' : 'http://fanyi.baidu.com/gettts?lan=en&text=Zero&spd=3&source=web'
			}	//输入容器【支持ID 和 jquery对象两种形式】 ， 输入规则 , 发音资源
		};
		
		var type = navigator.appName,lang = (type == "Netscape" ?  navigator.language : navigator.userLanguage).substr(0, 2);
	　　if (lang == "zh"){
			dfCfg.srcsMap = { //中文发音
				'1' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E4%B8%80&spd=5&source=web',
				'2' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E4%BA%8C&spd=5&source=web',
				'3' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E4%B8%89&spd=5&source=web',
				'4' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E5%9B%9B&spd=5&source=web',
				'5' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E4%BA%94&spd=5&source=web',
				'6' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E5%85%AD&spd=5&source=web',
				'7' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E4%B8%83&spd=5&source=web',
				'8' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E5%85%AB&spd=5&source=web',
				'9' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E4%B9%9D&spd=5&source=web',
				'0' : 'http://fanyi.baidu.com/gettts?lan=zh&text=%E9%9B%B6&spd=5&source=web',
			};
		}

		if(typeof $ !== 'undefined'){
			dfCfg = $.extend(true, dfCfg, cfg || {});
		}else{
			//浅层次copy
			var srcs = cfg.srcsMap || {};
			delete cfg.srcsMap;
			for(var key in (cfg || {})){ dfCfg[key] = cfg[key]; }
			for(var key in srcs){
				dfCfg.srcsMap[key] = srcs[key];
			}
		}
		

		if(dfCfg.input == null){ throw '请指定当前容器'; }
		var $input = dfCfg.input,speechVideo = new SpeechVideo(),oldLength = 0,isIE = typeof window.attachEvent !== 'undefined';
		if(typeof $ !== 'undefined'){ //TODO  !==  为测试原生方式暂设置 ==
			if(typeof dfCfg.input == 'string'){ $input = $('#'+dfCfg.input);}

			$input.bind('keydown',function(event){
				if(event.keyCode == 8 && isIE){ 
					//var curValue = $(this).val();
					//var len = oldLength - curValue.length;
					//for(var i=0;i<len;i++){
						speechVideo.remove(); oldLength--; if(oldLength < 0){ oldLength = 0;}
					//}
				}
			});
			$input.bind("input propertychange change",function(){
				var curValue = $(this).val();
				
				if(oldLength > curValue.length){ speechVideo.remove(); }else{
					var last = curValue.substring(curValue.length - 1);
					if(dfCfg.srcsMap[last]){
						speechVideo.next(dfCfg.srcsMap[last]);
					}
				}
				oldLength = curValue.length;
			});


		}else{
			var inputObj = document.getElementById(dfCfg.input),objEvent;
			oldLength = inputObj.value.length;
			inputObj.onkeypress = function(event){
				var keyCode = event.keyCode;
				event.returnValue = (keyCode >= 48 && keyCode <= 57);
			};
			inputObj.onkeydown = function(event){
				if(event.keyCode == 8 && isIE){ speechVideo.remove(); oldLength--; if(oldLength < 0){ oldLength = 0;}}
			}
			
			objEvent = function(event){
				
				var curValue = '';
				if (typeof event.srcElement != 'undefined' && event.propertyName == "value") {
					curValue = event.srcElement.value;
				}else if(typeof event.target != 'undefined'){ curValue = event.target.value; }

				if(oldLength > curValue.length){ speechVideo.remove(); }else{
					
					var last = curValue.substring(curValue.length - 1);
					if(dfCfg.srcsMap[last]){
						speechVideo.next(dfCfg.srcsMap[last]);
					}
				}
				oldLength = curValue.length;
			}
			//input.onpropertychange = input.oninput = input.onchange
			if(isIE){ inputObj.onpropertychange = objEvent; }else{ inputObj.oninput = objEvent; }
			
		}
		

	}

	window.onload = function(){
		new NumberSpeech({
			input : 'numberspeech'
		});
	}

//-->
</script>
 <body>
  
  <input type="text" id="numberspeech"/>
	
  <!-- 
	<audio src="http://m10.music.126.net/20170517151725/6fb69d17ac9d6e0a5364a5c4b2511d19/ymusic/4be2/deb8/b5a3/49b598f9f8b7a160c1fd43afaf52e646.mp3" controls preload></audio>
  -->
 </body>
</html>

实现思路：

1、语音对象，用于语音播放，可实现按url插入顺序播放，实现未播放url删除不读。

        2、input数字控制对象，用于控制输入内容。

支持：

1、中英文数字语音播放，默认使用百度翻译语音程序。

        2、支持自定义数字语音路径。

        3、方便控制混合app开发时，语音路径置换为app本地路径，减少网络请求，提高读取速度。

        4、原生和jquery两种方式实现。

实现缘由：

      小伙伴业务需求，就顺带帮助实现～

未尽事项：

 IE9- 的支持，使用audio.js 不过这里不深究，毕竟应用场景在APP端，跟微软IE关系没多大。这里demo已引用支持，可自行实现。

若应用于PC端，多选移除时，内部oldValue计算方式不合理，这暂不在考虑范围内，可自行优化，难度不大～


思路扩展：

利用百度语音（以“http://fanyi.baidu.com/gettts?lan=zh&text=%E4%BA%94&spd=5&source=web”为例，text对应的值，即为语音内容），实现语音播放时很轻松的。





mime类型总结 input_type=file限制
陌上花开
10-25 2619
js 文件类型总结 input_type=file限制类型1. 浏览器支持2. 定义和用法3. input举例4. MIME 类型5. 后缀名类型介绍（1）图片类（2）视频类（3）音频类6. MIME对照表 1. 浏览器支持 Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 支持 accept 属性。 注意：Internet Explorer 9 及之前的版本都不支持 <input> 标签的 accept 属性。 2. 定义和用法
在html5网页中录音解决方案
王树东的博客
10-17 2064
缘起 因公司业务需要在网页录音功能，因为h5的api兼容限制不得想出一些解决方案，以下是总结。 首发 https://shudong.wang/10585.html demo测试地址 https://wsdo.github.io/recording/ 项目地址 https://github.com/wsdo/recording Q&A 后续继续完善，有这个需求的朋友可以继续讨论 调...
IE浏览器语音播报例子
12-28
IE浏览器语音播报例子IE浏览器语音播报例子IE浏览器语音播报例子
ie浏览器语音播报功能实现
hijunmeng的专栏
10-31 3624
文章目录ie浏览器语音播报spvoice详细接口示例代码异步播报语音播报完毕事件参考 ie浏览器语音播报 在ie下用 SpVoice实现语音播报功能 spvoice详细接口 SpVoice Interface (SAPI 5.3) | Microsoft Docs 示例代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;hea
Voice input 语音输入
gaisitabo的博客
02-13 3384
Voice input 语音输入 Voice is one of the three key forms of input on HoloLens. It allows you to directly command a hologram without having to use gestures. You simply gaze at a hologram and speak y
纯js实现的语音播报无需第三方接口
11-23
纯js实现的语音播报
input框语音功能
09-09 588
Webkit内核的input框带有语音功能, 请看实例 Insert title here
前端面试题
IT_Jiangxiaobai的博客
05-19 5590
01-HTML~02-CSS 1.每个HTML文件里面都有一个很重要的东西，Doctype，知道这是干什么的么？ 要点一 : 该标签告知浏览器浏览文档要使用的HTML规范 , 告知浏览器以何种规范解析页面 要点二 : 声明对大小写不敏感 2.常用浏览器有哪些，内核都是什么？ 答： 常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等 浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 firefo
最新HTML5新手入门指南.docx
11-24
Geolocation获取地理位置信息，Device Orientation检测设备方向，Speech Input实现了语音输入，这些都极大地扩展了Web应用的可能性。 语义化是HTML5的关键特征之一，新的标签如, , , 等，以及application tags如, ...
1 HTML5基础 1
08-03
Speech Input支持语音输入等。 在浏览器兼容性方面，HTML5在Chrome、IE9及以上版本、Firefox和Safari等现代浏览器上表现出色，其中Chrome和Firefox的表现尤为突出。对于旧版浏览器，HTML5提供了一些降级处理的策略...
中文语音播报音频文件[阿拉伯数字0-9][年月日][时间]等
07-25
中文语音播报音频文件[阿拉伯数字0-9][年月日][时间]等
javascript多浏览器语音播报，文字转语音
11-12
之间引用，提供speakText（str, obj, callback）直接使用。 如果ie无法播放，请Internet选项设置activeX为启用
js实现气泡提示框并且同时语音提示
04-29
js实现右下角弹出提示框并且同时带有语音提示，6秒后消失，鼠标移到上面提示框不关闭，鼠标移开则3秒后关闭，实现多个提示框重叠，可拖动提示框
前端文字转语音，实现语音播报计数（调用百度api）
12-25
调用百度云的api实现文字转语音，每秒调用一次实现语音计数功能
数字语音播报
09-29
超好用的语音播报，详细的EditText输入事件的截获和监听，数字播报的绝选demo,android自带的SoundPool音频资源类
vue将input框中文字转为语音播放
weixin_30709061的博客
02-19 1518
<template> <div> <div> <input type="text" id="ttsText"> <input type="button" id="tts_btn" @click="doTTS" value="播放"> &l...
HTML5新特性:语义化标签,多媒体标签,音频-audio,input属性,表单属性
dream_vk的博客
05-16 482
1.HTML5新特性 1.1HTML新增语义化标签 header:头部标签 nav:导航标签 article:内容标签 section:定义文档某个区域 aside:侧边栏标签 footer:尾部标签 1.2 HTML5新增的多媒体标签 1.视频 video 常见属性 属性 值 描述 autoplay autoplay 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) controls controls 向用户显示播放控件 width pixels(像素) 设置播放器
输入数字，输出数字读法
流云的专栏
03-21 947
思路分析 实践代码 import java.util.Arrays; import java.util.HashMap; import java.util.Map; public class Num2String { //数字对应关系 private static Map numberStringMap = new HashMap(); //位数
支持语音输入的文本框(x-webkit-speech)
三寿的专栏
04-09 1972
相信大家现在在浏览网页时都不难看到一些网站的文本框中带有一个话筒(点击话筒可以语音输入内容到文本框中)，下面给大家介绍如何使自己的网站也支持语音输入内容。 现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值