html增加语音朗读功能,给wordpress主题添加上语音播放文章内容文本朗读功能

摘要：大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2，大挖一直关注的一些产品和运营网站也陆续上线了语音播放...

大挖最近在淘wp主题的时候发现一款主题已经支持了语音朗读功能7b2，大挖一直关注的一些产品和运营网站也陆续上线了语音播放，不得不说，相对于吃力的阅读文字，听语音获得内容更容易被吸收。再结合口语化的文字描述更能贴合用户体验的粘性，那如果实现我们的设想呢，大挖给大家提供一个方向，可以通过第三方的TSS语音技术来实现我们页面内容的播放功能，语音合成技术可以帮到我们把wordpress程序内容中的文字信息转化为流利的口语输出技术， 语音合成：也被称为文本转换技术(TTS)。参考资料：http://ai.baidu.com/docs#/TTS-API/top

一、运用百度的TTS的接口定义

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字

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=**：这个就是你要转换的文字。

二、语音朗读的样式示例代码

百度语音测试

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 = '';

var sss = '';

var eee = '';

var au2 = '';

ttsDiv.innerHTML = au1 + sss + eee + au2;

ttsAudio = document.getElementById('tts_autio_id');

ttsAudio.play();

}

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

-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

百度语音测试

functiondoTTS(){

varttsDiv=document.getElementById('bdtts_div_id');

varttsAudio=document.getElementById('tts_autio_id');

varttsText=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);

varau1='';

varsss='';

vareee='';

varau2='';

ttsDiv.innerHTML=au1+sss+eee+au2;

ttsAudio=document.getElementById('tts_autio_id');

ttsAudio.play();

}