京东云上提供了足够多的人工智能 api，并且都使用了 http 的方式进行了封装，用户可以方便在自己的系统中接入京东云的 ai 能力。今天就是介绍一下如何编写很少的代码就能使用京东云的语音合成 api 在网页中实现文字朗读，最终实现效果，延迟小，支持主流设备，声调优美，还能男女生切换。
最终效果
最终效果，微信打开链接，点击播放按钮则可以进行文字朗读。
Api 介绍
京东云 AI API 使用 Restful 接口风格，同时提供了 java 和 python 的 sdk，使用 sdk 能够方便的封装参数，调用 api 获得数据。
为了提升调用方的响应速度，语音合成 api 采用了分段合成的模式，所以调用的时候在后端逻辑中按顺序多次调用，将音频数据以数据流的形式回写给前端。
获取 AK/SK
访问京东云 api 需要获取 ak sk，配合 sdk 使用；
进入京东云控制台 - 账号管理 -Access Key 管理，创建并获取 Access Key。
后端音频流合成
这里给出后端部分源码，实现一个 controller，开发一个 get 请求方法，参数封装的逻辑全都提炼出单独的方法，代码逻辑结构简单易懂。代码使用 fastJson 处理参数，另外引用了京东云 sdk，其余都是 jdk 自带的 api，依赖很少。
1 import com.alibaba.fastjson.JSON;
2 import com.alibaba.fastjson.JSONObject;
3 import com.wxapi.WxApiCall.WxApiCall;
4 import com.wxapi.model.RequestModel;
5
6 import org.springframework.stereotype.Controller;
7 import org.springframework.web.bind.annotation.GetMapping;
8 import org.springframework.web.bind.annotation.RequestHeader;
9
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 import java.io.IOException;
13 import java.io.OutputStream;
14 import java.util.Base64;
15 import java.util.HashMap;
16 import java.util.Map;
17
18 @Controller
19 public class TTSControllerExample {
20 //url appkey secretkey
21 private static final String url = "https://aiapi.jdcloud.com/jdai/tts";
22 private static final String appKey = "";
23 private static final String secretKey = "";
24
25 @GetMapping("/tts/stream/example")
26 public void ttsStream(27 @RequestHeader(value = "Range", required = false) String range,
28 HttpServletRequest req,
29 HttpServletResponse resp) {
30
31 // 应对 safari 的第一次确认请求携带 header Range：bytes=0-1, 此时回写 1byte 数据，防止错误
32 if ("bytes=0-1".equals(range)) {
33 try {34 byte[] temp = new byte['a'];
35 resp.setHeader("Content-Type", "audio/mp3");
36 OutputStream out = resp.getOutputStream();
37 out.write(temp);
38 } catch (IOException e) {39 e.printStackTrace();
40 }
41 return;
42 }
43 // 封装输入参数
44 Map queryMap = processQueryParam(req);
45 String text = req.getParameter("text");
46 // 封装 api 调用请求报文
47 RequestModel requestModel = getBaseRequestModel(queryMap, text);
48 try {
49 // 回写音频数据给前端
50 writeTtsStream(resp, requestModel);
51 } catch (IOException e) {52 e.printStackTrace();
53 }
54 }
55
56 /**
57 * 将前端输入参数封装为 api 调用的请求对象，同时设置 url appkey secaretKey
58 * @param queryMap
59 * @param bodyStr
60 * @return
61 */
62 private RequestModel getBaseRequestModel(Map queryMap, String bodyStr) {63 RequestModel requestModel = new RequestModel();
64 requestModel.setGwUrl(url);
65 requestModel.setAppkey(appKey);
66 requestModel.setSecretKey(secretKey);
67 requestModel.setQueryParams(queryMap);
68 requestModel.setBodyStr(bodyStr);
69 return requestModel;
70 }
71
72 /**
73 * 流式 api 调用，需要将 sequenceId 依次递增，用该方法进行设置请求对象 sequenceId
74 * @param sequenceId
75 * @param requestModel
76 * @return
77 */
78 private RequestModel changeSequenceId(int sequenceId, RequestModel requestModel) {79 requestModel.getQueryParams().put("Sequence-Id", sequenceId);
80 return requestModel;
81 }
82
83 /**
84 * 将 request 中的请求参数封装为 api 调用请求对象中的 queryMap
85 * @param req
86 * @return
87 */
88 private Map processQueryParam(HttpServletRequest req) {89 String reqid = req.getParameter("reqid");
90 int tim = Integer.parseInt(req.getParameter("tim"));
91 String sp = req.getParameter("sp");
92
93 JSONObject parameters = new JSONObject(8);
94 parameters.put("tim", tim);
95 parameters.put("sr", 24000);
96 parameters.put("sp", sp);
97 parameters.put("vol", 2.0);
98 parameters.put("tte", 0);
99 parameters.put("aue", 3);
100
101 JSONObject property = new JSONObject(4);
102 property.put("platform", "Linux");
103 property.put("version", "1.0.0");
104 property.put("parameters", parameters);
105
106 Map<String, Object> queryMap = new HashMap<>();
107 // 访问参数
108 queryMap.put("Service-Type", "synthesis");
109 queryMap.put("Request-Id", reqid);
110 queryMap.put("Protocol", 1);
111 queryMap.put("Net-State", 1);
112 queryMap.put("Applicator", 1);
113 queryMap.put("Property", property.toJSONString());
114
115 return queryMap;
116 }
117
118 /**
119 * 循环调用 api，将音频数据回写到 response 对象
120 * @param resp
121 * @param requestModel
122 * @throws IOException
123 */
124 public void writeTtsStream(HttpServletResponse resp, RequestModel requestModel) throws IOException {
125 // 分段获取音频 sequenceId 从 1 递增
126 int sequenceId = 1;
127 changeSequenceId(sequenceId, requestModel);
128 // 设置返回报文头内容类型为 audio/mp3
129 resp.setHeader("Content-Type", "audio/mp3");
130 //api 请求 sdk 对象
131 WxApiCall call = new WxApiCall();
132 // 获取输出流用于输出音频流
133 OutputStream out = resp.getOutputStream();
134 call.setModel(requestModel);
135 // 解析返回报文，获得 status
136 String response = call.request();
137 JSONObject jsonObject = JSON.parseObject(response);
138 JSONObject data = jsonObject.getJSONObject("result");
139 // 第一次请求增加校验，如果错误则向前端回写 500 错误码
140 if (data.getIntValue("status") != 0) {141 resp.sendError(500, data.getString("message"));
142 return;
143 }
144 // 推送实际音频数据
145 String audio = data.getString("audio");
146 byte[] part = Base64.getDecoder().decode(audio);
147 out.write(part);
148 out.flush();
149 // 判断是否已结束，多次请求对应多个 index，index<0 代表最后一个包
150 if (data.getIntValue("index") < 0) {
151 return;
152 }
153 // 循环推送剩余部分音频
154 while (data.getIntValue("index") >= 0) {
155 //sequenceid 递增
156 sequenceId = sequenceId + 1;
157 changeSequenceId(sequenceId, requestModel);
158 // 请求 api 获得新的音频数据
159 call.setModel(requestModel);
160 response = call.request();
161 jsonObject = JSON.parseObject(response);
162 data = jsonObject.getJSONObject("result");
163 audio = data.getString("audio");
164 part = Base64.getDecoder().decode(audio);
165 // 回写新的音频数据
166 out.write(part);
167 out.flush();
168 }
169 }
170
171
172
173 前端 audio 播放朗读
174 前端部分给出在 vue 模块化开发中的 script 部分，由于采用 html5 的 audio 进行语音播放，为了兼容性需要引用 howler.js (npm install howler)，主要逻辑为根据设置的参数和待朗读的文字拼接一个 url，调用 howler.js 中的 api 进行播放。175
176 <script>
177 import {Howl, Howler} from 'howler'
178 export default {179 data() {
180 return {
181 news: { // 新闻内容
182 ……
183 },
184 role: 1, // 0 女声，1 男声
185 speed: 1, // 播放速度
186 curIndex: -1, // 播放的段落在所有段落中的顺序，与用户交互显示相关，与流式播放无关
187 sound: null, // 页面唯一的指向 howler 实例的变量
188 status: 'empty' // load,pause,stop,empty 仅与用户交互显示相关，与流式播放显示无关
189 }
190 },
191 methods: {192 generateUUID () { // 生成 uuid
193 let d = Date.now()
194 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {195 let r = (d + Math.random() * 16) % 16 | 0
196 d = Math.floor(d / 16)
197 return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16)
198 })
199 },
200 audioSrc (txt) { // 生成获取音频的链接
201 let content = encodeURI(txt) // 文字编码
202 return `http://neuhubdemo.jd.com/api/tts/streamv2?reqid=${203 this.generateUUID() // requestID
204 }&text=${
205 content // 编码后的文字内容
206 }&tim=${
207 this.role // 男声 or 女声
208 }&sp=${
209 this.speed // 播放速度
210 }`
211 },
212 /**
213 * 获取文案对应的流式音频
214 *
215 * 使用 howler 能够解决部分手机浏览器 (eg:UC) 的兼容问题，216 * 但解决 ios 上微信和 safari 的兼容问题，217 * 需要后端通过 {range：bytes=0-1} 这个 header 字段对请求进行控制
218 * @param {String 待转音频的文案} txt
219 */
220 howlerPlay(txt) {221 if (this.sound) {222 this.sound.unload() // 若 sound 已有值，则销毁原对象
223 }
224 let self = this
225 this.status = 'load'
226 this.sound = new Howl({227 src: `${this.audioSrc(txt)}`,
228 html5: true, // 必须！A live stream can only be played through HTML5 Audio.
229 format: ['mp3', 'aac'],
230 // 以下 onplay、onpause、onend 均为控制显示相关
231 onplay() {
232 self.status = 'pause'
233 },
234 onpause: function() {
235 self.status = 'stop'
236 },
237 onend: function() {
238 self.status = 'stop'
239 }
240 });
241 this.sound.play()
242 },
243 // 控制用户交互
244 play (txt, index) {245 if (this.curIndex === index) {246 if (this.status === 'stop') {247 this.sound.play()
248 } else {249 this.sound.pause()
250 }
251 } else {
252 this.curIndex = index
253 this.howlerPlay(txt)
254 }
255 }
256 }
257 }
258 </script>
看完这个操作文档是不是跃跃欲试？对 AI 也想了解更多？
本周六我们为大家准备了【从“智慧零售”到“无人仓储”，揭秘京东人工智能技术的实践与应用】“京东云技术沙龙 AI 专场”！现场将会有技术专家为大家答疑解惑。
点击“阅读原文”即可免费报名参加哦！