给WordPress主题添加上语音播放文章内容文本朗读功能
发布于
by
摘要：大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2，大挖一直关注的一些产品和运营网站也陆…
摘要：大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2，大挖一直关注的一些产品和运营网站也陆续上线了语音播放…
大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2，大挖一直关注的一些产品和运营网站也陆续上线了语音播放，不得不说，相对于吃力的阅读文字，听语音获得内容更容易被吸收。再结合口语化的文字描述更能贴合用户体验的粘性，那如果实现我们的设想呢，大挖给大家提供一个方向，可以通过第三方的TSS语音技术来实现我们页面内容的播放功能，语音合成技术可以帮到我们把wordpress程序内容中的文字信息转化为流利的口语输出技术， 语音合成：也被称为文本转换技术（TTS）。参考资料：http://ai.baidu.com/docs#/TTS-API/top
一、运用百度的TTS的接口定义
|
1
|
http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字
|
接口的参数说明：
lan=zh：语言是中文，如果改为lan=en，则语言是英文。
ie=UTF-8：文字格式。
spd=2：语速，可以是1-9的数字，数字越大，语速越快。
text=**：这个就是你要转换的文字。
二、语音朗读的样式示例代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>百度语音测试</title>
<script type=“text/javascript”>
function doTTS(){
var ttsDiv = document.getElementById(‘bdtts_div_id’);
var ttsAudio = document.getElementById(‘tts_autio_id’);
var ttsText = document.getElementById(‘ttsText’).value;
// 这样为什么替换不了播放内容
/*var ssrcc = ‘http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text=’+ttsText;
document.getElementById(‘tts_source_id’).src=ssrcc;*/
// 这样就可实现播放内容的替换了
ttsDiv.removeChild(ttsAudio);
var au1 = ‘<audio id=”tts_autio_id” autoplay=”autoplay”>’;
var sss = ‘<source id=”tts_source_id” src=”http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text=’+ttsText+‘” type=”audio/mpeg”>’;
var eee = ‘<embed id=”tts_embed_id” height=”0″ width=”0″ src=””>’;
var au2 = ‘</audio>’;
ttsDiv.innerHTML = au1 + sss + eee + au2;
ttsAudio = document.getElementById(‘tts_autio_id’);
ttsAudio.play();
}
</script>
</head>
<body>
<div>
<input type=“text” id=“ttsText”>
<input type=“button” id=“tts_btn” onclick=“doTTS()” value=“播放”>
</div>
<div id=“bdtts_div_id”>
<audio id=“tts_autio_id” autoplay=“autoplay”>
<source id=“tts_source_id” src=“http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=9&text=播报内容” type=“audio/mpeg”>
<embed id=“tts_embed_id” height=“0” width=“0” src=“”>
</audio>
</div>
</body>
</html>
|
最后我们可以将功能改进，在标题或是文章顶部添加播放标志，点击即可播放，效果和手机上的百度百科里面一样，可以打开关闭等功能，当然这按钮可以加在文章列表上~
类别：WordPress教程、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！