草庐IT

深入浅出学习eTs—（二十二）天气语音预报

程皖Orz 2023-04-05 原文

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

一、需求分析

本章节我们基于上节课的内容（HTTP协议），在上节课的基础上进行延伸，方便我们去理解协议，以及引入在线语音播报的功能实现以下功能：

  • 文字输入城市
  • 获取城市的天气状况
  • 语音播放天气情况
  • 图标更换

二、控件介绍

（1）Video

用于播放视频文件并控制其播放状态的组件。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

权限列表

使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考权限申请声明。

子组件
接口
Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController})

参数：

参数名

参数类型

必填

参数描述

src

string | Resource

否

视频播放源的路径，支持本地视频路径和网络路径。 支持在resources下面的video或rawfile文件夹里放置媒体资源。 支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见DataAbility说明。 说明： 视频支持的格式是：mp4、mkv、webm、TS。

currentProgressRate

number | string | PlaybackSpeed8+

否

视频播放倍速。 说明： number取值仅支持：0.75，1.0，1.25，1.75，2.0。 默认值：1.0 | PlaybackSpeed.Speed_Forward_1_00_X

previewUri

string | PixelMap8+ | Resource

否

视频未播放时的预览图片路径。

controller

VideoController

否

设置视频控制器。

三、协议介绍

（1）天气API

和上一期一样，本系统依然是使用HTTP来实现的，这里使用了天气API来实现，通过输入地区即可获得很多天气数据。

1、数据分析

未处理的数据如上，经过json分析后得到下图。

在这个基础上使用上节课的内容对文本进行拆分，比如我们要获得当前温度。

  • “tem”: “6”,

其数据是这样的，我们观察前面和后面"tem":“6”,“tem1”:“13”，使用掐头去尾法可以得到当前温度6℃。

2、数据概括

本次不打算全部显示，这里挑选几个进行展示。

  • 当前温度
  • 当前天气
  • 当日温度区间
  • 温馨小提示

（2）语音转文字API

这里选择使用搜狗的语音转文字API，url如下：

  • https://fanyi.sogou.com/reventondc/synthesis?text=一键三连&speed=1&lang=zh-CHS&from=translateweb&speaker=6。
  • text 要转换的文本。
  • speed 语速 1~？（我测试到15都还可以） 越大，语速越慢。
  • lan 语言类型 lan=en 英文 lan = zh-CHS 中文。
  • from 哪种方式请求的。
  • speaker 语音类型 1-6的数字。

四、UI设计

（1）天气图标

寻找资源如上，但本次内容只选择云、雨、晴三个经典天气来分析，将三个图标放入目录下：

使用image控件进行生成。

Image(this.IMAGE_URL)
          .width(200)
          .height(200)
          .objectFit(ImageFit.Fill)

（2）输入框

同上期内容。

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));
          })

（3）按钮和显示框

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 })

（4）Vedio设计

在这里我们选择取巧的方式，使用vedio播放网络视频，只需要隐藏控制按钮，同时将控件的宽度和高度设置为1即可。

音频试听：https://tts.youdao.com/fanyivoice?word=一键三连&le=zh&keyfrom=speaker-target。

大家复制上面的url放进浏览器里面可用听到。

Video({
          src: this.videoSrc,
          controller: this.v_controller,
        })
          .controls(false)
          .onStart(() => {
            console.info('onStart')
          })
          .width(1)
          .height(1)

五、代码设计

（1）HTTPS获得数据部分

我这里将我注册的API放上来了，key部分隐藏了，不能直接使用，大家去天气API那里申请个帐号就行，免费使用2000次。

httpRequest.request(
              // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
              "https://v0.yiketianqi.com/api?appid=56959347&appsecret=*******&versinotallow=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));

（2）数据拆分

该部分将返回的内容进行拆分为五个单元。

//天气 当前温度 温度区间 空气质量
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

（3）音频播放部分

//            this.videoSrc = 'http://tts.youdao.com/fanyivoice?word=****&le=zh&keyfrom=speaker-target'
//            this.v_controller.start()

将****部分替换成想播报的内容就行。

六、演示

注意：音频部分我尝试了模拟器和远程真机都不行，声音没法传递过来，但是实际效果是有的，这个我之前做过真机。

这里选择使用上海和安阳进行演示（任意城市都可以）。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

深入浅出深入data-iddatastyle系统OpenHarmony学习eTsHTTP协议

有关深入浅出学习eTs—（二十二）天气语音预报的更多相关文章

  1. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  2. CAN协议的学习与理解 - 2

    最近在学习CAN，记录一下，也供大家参考交流。推荐几个我觉得很好的CAN学习，本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门，真的通透；秀！靠这篇我竟然2天理解了CAN协议！实战STM32F4CAN！原文链接：https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解（小白教程）原文链接：https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. 深度学习部署：Windows安装pycocotools报错解决方法 - 2

    深度学习部署：Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯：公主号AiCharm本系列是作者在跑一些深度学习实例时，遇到的各种各样的问题及解决办法，希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  5. ruby - 我如何学习 ruby​​ 的正则表达式？ - 2

    如何学习ruby​​的正则表达式？(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具，因为它可以立即将结果可视化。 关于ruby-我如何学习ruby​​的正则表达式？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1881231/

  6. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG

  7. 机器学习——时间序列ARIMA模型(四)：自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式：ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵，分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型，求出其滞

  8. Unity Shader 学习笔记（5）Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板，这三个知识点任何一个单拿出来都是一套知识体系，不能一概而论，本文章目的在于将学习和实际工作中遇见的问题进行总结，类似于网络笔记之用，方便后续回顾查看，如有以偏概全、不祥不尽之处，还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略，后续会有完整代码 #pragmamulti_c

  9. ruby-on-rails - 这个 C 和 PHP 程序员如何学习 Ruby 和 Rails？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我来自C、php和bash背景，很容易学习，因为它们都有相同的C结构，我可以将其与我已经知道的联系起来。然后2年前我学了Python并且学得很好，Python对我来说比Ruby更容易学。然后从去年开始，我一直在尝试学习Ruby，然后是Rails，我承认，直到现在我还是学不会，讽刺的是那些打着简单易学的烙印，但是对于我这样一个老练的程序员来说，我只是无法将它

  10. jquery - 使用 Rails 3 学习 Ajax 的资源 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。有没有学习Ajax(jQuery)和Rails3的好资源？

随机推荐