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

编程入门 行业动态 更新时间:2024-10-21 11:56:21

JS利用百度<a href=https://www.elefans.com/category/jswz/34/1769309.html style=语音api实现对html内容的朗读"/>

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

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

先看看代码:

function voice(str){var url = "=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 = "=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不是本地的,因此必须要联网使用

更多推荐

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

本文发布于:2024-02-06 17:29:42,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1750198.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:语音   内容   JS   html   api

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!