JS利用百度语音api实现对html内容的朗读

最新推荐文章于 2024-06-24 13:12:44 发布

ZZY_EZ118

最新推荐文章于 2024-06-24 13:12:44 发布

阅读量1.3k

点赞数 1

文章标签： javascript html web

本文链接：https://blog.csdn.net/weixin_46804006/article/details/107345920

版权

相信很多站长都很想在自己的网页里加入朗读功能，实现自制留言板的内容朗读。接下来将会告诉大家最好的解决方法：用百度语音api

先看看代码：

function voice(str){
     var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=" + encodeURI(str);
     var n = new Audio(url); 
     n.src = url;
     n.play();
}
voice("Good Bye World!");

大家看完代码后肯定开始迫不及待地“Ctrl+C”了，但很快就发现它会把html的标签也朗读出来，因此以下就是解决办法：

bm=bm.replace(/<[^>]*>|/g,"");
//这样就会过滤html的所有标签

完整示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS利用百度语音api实现对html内容的朗读</title>
<script>
function voice(str){
	var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=" + encodeURI(str);
	var n = new Audio(url);
	n.src = url;
	n.play();
}
function readart(){
	bm=document.getElementById('art_main').innerHTML;
	bm=bm.replace(/<[^>]*>|/g,"");
	voice(bm);
}
</script>
</head>
<body>
<div id="art_main">
	<!--留言内容-->
	例子：<br>
	你好
	<b>哈哈哈</b>
	<h1>再见，世界</h1>
</div>
<a href="javascript:readart();">朗读</a>
</body>
</html>

作者亲测有效
注意，由于朗读api不是本地的，因此必须要联网使用

ZZY_EZ118

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
JS利用百度语音api实现对html内容的朗读

相信很多站长都很想在自己的网页里加入朗读功能，实现自制留言板的内容朗读。接下来将会告诉大家最好的解决方法：用百度语音api先看看代码：function voice(str){ var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=" + encodeURI(str); var n = new Audio(url); n.src = url; n.play
复制链接

扫一扫