H5页面中语音播报的实现

最新推荐文章于 2024-04-22 14:44:19 发布

峰晨朴朴

最新推荐文章于 2024-04-22 14:44:19 发布

阅读量4.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/kh6417/article/details/107568603

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

根据需求，需要在H5页面中做一个语音播报的功能，具体采用百度接口实现，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度语音播报</title>
	</head>
	<body>
		<script>
			//demo示例
			/* var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=微信收款10元"
			var n = new Audio();
			n.src = url;
			n.play(); */
			voiceBroadcast("微信收款10元");
			
			//每隔一分钟播报一次
			 /* var voiceBroadcastTimer = $interval(() => {
			   // $scope.voiceBroadcast("微信收款10元");
				console.log("123")
			 }, 6000); */
			
			//关闭页面时清除定时任务
			 /* $scope.$on('$destroy', () => {
			      $interval.cancel(voiceBroadcastTimer);
			  }); */
			  function voiceBroadcast(text){
			       var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(text);        // baidu文字转语音
			       var audio = new Audio(url);
			       audio.src = url;
			       audio.play();
			   };
			  
		</script>
	</body>
</html>

不会，我可以学；落后，我可以追赶；跌倒，我可以站起来！我一定行！

峰晨朴朴

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5页面中语音播报的实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度语音播报</title> </head> <body> <script> //demo示例 /* var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&amp
复制链接

扫一扫