本文我们将在鸿蒙上引入在线语音播报功能。
需求分析
控件介绍
①Video
https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/security/accesstoken-guidelines.md/②子组件
接口如下：
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})
协议介绍
①天气 API
数据分析如下：
“tem”: “6”,②数据概括
③语音转文字 API
https://fanyi.sogou.com/reventondc/synthesis?text=一键三连&speed=1&lang=zh-CHS&from=translateweb&speaker=6UI 设计
Image(this.IMAGE_URL)
.width(200)
.height(200)
.objectFit(ImageFit.Fill)
②输入框
TextInput({ placeholder: '请输入要查询的城市', controller: this.controller })
.placeholderColor(Color.Grey)
.placeholderFont({ size: 25, weight: 400 })
.caretColor(Color.Blue)
.width('90%')
.height(80)
.margin(20)
.fontSize(25)
.fontColor(Color.Black)
.onChange((value: string) => {
this.IN_Value = value
console.log(JSON.stringify(this.IN_Value));
})③按钮和显示框
Button('查 询')
.width('60%')
.height(60)
.fontSize(30)
.onClick(() => {
});
Blank()
.height(20)
Text(this.Out_Value)
.fontSize(25)
.width('80%')
.height(300)
.textAlign(TextAlign.Center)
.border({ width: 1 })
④Vedio 设计
https://tts.youdao.com/fanyivoice?word=一键三连&le=zh&keyfrom=speaker-targetVideo({
src: this.videoSrc,
controller: this.v_controller,
})
.controls(false)
.onStart(() => {
console.info('onStart')
})
.width(1)
.height(1)代码设计
①HTTPS 获得数据部分
httpRequest.request(
// 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
"https://v0.yiketianqi.com/api?appid=56959347&appsecret=*******&version=v61&unescape=1&city=" + this.IN_Value,
{
method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
connectTimeout: 60000, // 可选，默认为60s
readTimeout: 60000, // 可选，默认为60s
}, (err, data) => {
if (!err) {
// data.result为http响应内容，可根据业务需要进行解析
var Get_Return = data.result.toString()
console.log(JSON.stringify(Get_Return));②数据拆分
//天气 当前温度 温度区间 空气质量
let Get_TQ = ''
let Get_dq = ''
let Get_wdg = ''
let Get_wdd = ''
let Get_KQZ = ''
var Begin_Num = Get_Return.indexOf('"wea":"')
var Last_Num = Get_Return.lastIndexOf('","wea_img"')
var Get_TQ = Get_Return.substring(Begin_Num+7,Last_Num)
var Begin_Num = Get_Return.indexOf('"tem":"')
var Last_Num = Get_Return.lastIndexOf('","tem1"')
var Get_dq = Get_Return.substring(Begin_Num+7,Last_Num)
var Begin_Num = Get_Return.indexOf('"tem1":"')
var Last_Num = Get_Return.lastIndexOf('","tem2"')
var Get_wdg = Get_Return.substring(Begin_Num+8,Last_Num)
var Begin_Num = Get_Return.indexOf('"tem2":"')
var Last_Num = Get_Return.lastIndexOf('","win"')
var Get_wdd = Get_Return.substring(Begin_Num+8,Last_Num)
var Begin_Num = Get_Return.indexOf('","air_tips":"')
var Last_Num = Get_Return.lastIndexOf('","alarm":')
var Get_KQZ = Get_Return.substring(Begin_Num+14,Last_Num)
console.log(JSON.stringify(Get_TQ));
console.log(JSON.stringify(Get_dq));
console.log(JSON.stringify(Get_wdg));
console.log(JSON.stringify(Get_wdd));
console.log(JSON.stringify(Get_KQZ));
this.Out_Value = '城市：' + this.IN_Value + '\r\n' + '天气:' + Get_TQ +'\r\n'+ '温度:' + Get_dq +'℃ '+Get_wdd+'-'+Get_wdg+'\r\n' + '温馨提示:'+Get_KQZ③音频播放部分
// this.videoSrc = 'http://tts.youdao.com/fanyivoice?word=****&le=zh&keyfrom=speaker-target'
// this.v_controller.start()演示效果
注意：音频部分我尝试了模拟器和远程真机都不行，声音没法传递过来，但是实际效果是有的，这个我之前做过真机。
求分享
求点赞
求在看
