很多时候在看文章的时候都会有自动朗读文章内容的功能，那么这种功能如何在h5上是怎么实现的呢，下面就拿我司一个基本需求作为线索，看是怎么一步一步实现的
需求提出
经过我司产品经理的想法，做出如下功能
1.自动朗读当前h5页面文章竞品——》
调研发现，竞品h5是app原生实现，而我司都是h5实现文章阅读，所以开始进行h5的调研
对接科大讯飞在线语音合成
调研发现科大讯飞的在线语音合成可以基本提供相应功能，决定做一个demo来测试效果
1.控制台开通权限
2.阅读文档
具体代码如下
import axios from 'axios'import * as md5 from './md5'axios.defaults.withCredentials = truelet Appid = 'xxxxx'let apiKey = 'xxxxxx'let CurTime = Date.parse(new Date()) / 1000let param = { auf: 'audio/L16;rate=16000', aue: 'lame', voice_name: 'xiaoyan', speed: '50', volume: '50', pitch: '50', engine_type: 'intp65', text_type: 'text'}let Base64 = { encode: (str) => { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function toSolidBytes(match, p1) { return String.fromCharCode('0x' + p1); })); }, decode: (str) => { // Going backwards: from bytestream, to percent-encoding, to original string. return decodeURIComponent(atob(str).split('').map(function (c) { return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); }).join('')); }}let xp = Base64.encode(JSON.stringify(param))let CheckSum = md5.hex_md5(apiKey + CurTime + xp)let headers = { 'X-Appid': Appid, 'X-CurTime': CurTime, 'X-Param': xp, 'X-CheckSum': CheckSum, 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'}export function getAloud (text) { // let data = { // text: encodeURI(text) // } var formdata = new FormData() formdata.append('text', text) return axios({ baseURL: window.location.href.includes('demo') ? 'https://api.xfyun.cn' : '/tts', method: 'POST', url: '/v1/service/v1/tts', headers: { ...headers }, data: formdata })} 经过测试，是返回二进制文件流了但是前端试了各种办法没有实现流的播放
node中间层
引入node中间层是考虑到文件可以存储，可以放到cdn上进行缓存，可以减少相似文章的请求科大讯飞接口，可以减少流量的产生，所以决定加入node中间层
ps：考拉阅读有node服务器作为一些中间层的处理。主要技术栈是node + koa2 + pm2
const md5 = require('../lib/md5.js')const fs = require('fs')const path = require('path')const marked = require('marked')const request = require('request')let Appid = ''let apiKey = ''let CurTimelet param = { auf: 'audio/L16;rate=16000', aue: 'lame', voice_name: 'x_yiping', speed: '40', volume: '50', pitch: '50', engine_type: 'intp65', text_type: 'text'}var b = new Buffer(JSON.stringify(param));let xp = b.toString('base64')let CheckSumlet headersexports.getAloud = async ctx => { CurTime = Date.parse(new Date()) / 1000 CheckSum = md5.hex_md5(apiKey + CurTime + xp) headers = { 'X-Appid': Appid, 'X-CurTime': CurTime, 'X-Param': xp, 'X-CheckSum': CheckSum, 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' } let id = ctx.request.body.id let text = ctx.request.body.text console.log(ctx.query) var postData = { text: text } let r = request({ url: 'http://api.xfyun.cn/v1/service/v1/tts', // 请求的URL method: 'POST', // 请求方法 headers: headers, formData: postData }, function (error, response, body) { // console.log('error:', error); // Print the error if one occurred // console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received // console.log('body:', body); // Print the HTML for the Google homepage. }) await new Promise((resolve, reject) => { let filePath = path.join(__dirname, 'public/') + `/${id}.mp3` const upStream = fs.createWriteStream(filePath) r.pipe(upStream) upStream.on('close', () => { console.log('download finished'); resolve() }); }) .then((res) => { ctx.body = { code: 200, message: '语音合成成功', data: { url: 'https://fe.koalareading.com/file/' + id + '.mp3' } } })} 主要运用request的管道流概念 把后台返回的二进制文件导入到流里面，在写入到文件里面 最后返回一个url给前端播放使用
此致，测试
//返回url。相同文章唯一id区分，可以缓存使用https://fe.koalareading.com/file/1112.mp3
需求demo完成