相信很多站长都很想在自己的网页里加入朗读功能,实现自制留言板的内容朗读。接下来将会告诉大家最好的解决方法:用百度语音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不是本地的,因此必须要联网使用