HarmonyOS NEXT AI基础语音服务-文章播报

简介: 这是一篇关于基于AI文字转语音(TTS)服务的案例解析,展示了如何通过 `textToSpeech` 模块实现语音播报功能。代码中定义了一个名为 `CoreSpeechKit` 的组件,包含文本内容、TTS引擎初始化、播放控制及界面构建等功能。核心步骤包括引入必要模块、定义组件生命周期方法(如 `aboutToAppear` 和 `aboutToDisappear`)、设置播放逻辑以及构建UI界面。此案例适用于学习文字转语音技术的实际应用与开发流程。

案例描述

这是一个基于AI基础语音服务实现的文字语音播报案例
在这里插入图片描述

实现步骤:

1. 引入必要的模块

引入 textToSpeechpromptAction 模块,分别用于文字转语音和提示信息展示。

  import {
    textToSpeech } from '@kit.CoreSpeechKit'
  import {
    promptAction } from '@kit.ArkUI'

说明:textToSpeech 模块提供了文字转语音的功能,promptAction 模块用于在界面上显示提示信息。

2. 定义组件

使用 @Entry@ComponentV2 装饰器定义一个名为 CoreSpeechKit 的组件。

  @Entry
  @ComponentV2
  struct CoreSpeechKit {
   
    // 待播报的文本内容
    text: string = `
        北纬45度的三月,时光在这里打了个温柔的结。松花江畔的晨雾裹着细雪,将每根枝条都雕琢成剔透的琉璃,冰晶在枝头堆叠出千重瓣的玉兰花,风穿过枝桠时簌簌抖落的不是雪粒,分明是星辰坠入人间的碎屑。
        而此时江南的杏花正枕着暖风酿蜜,绯云般的花影漫过白墙黛瓦,连空气都沁着微醺的甜。季节的调色师悄悄把颜料盘一分为二——北国仍执着地续写冬的尾章,用冰棱作笔,在窗棂勾勒霜花;南疆已迫不及待地翻开春的扉页,让雨燕衔着柳色掠过水墨长巷。
        这相隔三千里的温差,在晨昏线两端织就两幅绸缎:北方是银丝绣的素锦,凛冽里裹着未尽的絮语;南方是蚕娘染的软罗,温润中漾开初生的呢喃。当哈尔滨的树挂迎着朝阳融化第一滴璀璨,杭州的玉兰恰好抖落肩头第三片月光,原来春天正踏着经纬线,把料峭与暄暖谱成天地间最动人的复调。
    `
    // 文字转语音引擎实例
    ttsEngine?: textToSpeech.TextToSpeechEngine

    // 本地状态,用于标记是否正在播放
    @Local isPlaying: boolean = false

    // 初始化文字转语音引擎
    async initTextToSpeechEngine() {
   
      if (canIUse('SystemCapability.AI.TextToSpeech')) {
   
        const params: textToSpeech.CreateEngineParams = {
   
          language: 'zh-CN',
          person: 0,
          online: 1
        }
        this.ttsEngine = await textToSpeech.createEngine(params)
      }
    }

    // 组件即将显示时调用
    aboutToAppear(): void {
   
      this.initTextToSpeechEngine()
    }

    // 组件即将消失时调用
    aboutToDisappear(): void {
   
      if (canIUse('SystemCapability.AI.TextToSpeech')) {
   
        this.ttsEngine?.stop()
        this.ttsEngine?.shutdown()
      }
    }

    // 播放语音
    play() {
   
      if (canIUse('SystemCapability.AI.TextToSpeech')) {
   
        if (this.ttsEngine?.isBusy()) {
   
          return promptAction.showToast({
    message: '正在播报...' })
        }
        const params: textToSpeech.SpeakParams = {
   
          requestId: '10000'
        }
        this.ttsEngine?.speak(this.text, params)
        this.isPlaying = true
      }
    }

    // 构建组件界面
    build() {
   
      Stack({
    alignContent: Alignment.BottomEnd }) {
   
        List() {
   
          ListItem() {
   
            Text(this.text)
              .lineHeight(32)
          }
        }
        .padding({
    left: 15, right: 15 })
        .height('100%')
        .width('100%')

        Row() {
   
          Image(this.isPlaying ? $r('sys.media.AI_playing') : $r('sys.media.AI_play'))
            .width(24)
            .onClick(() => this.play())
        }
        .borderRadius(24)
        .shadow({
   
          color: Color.Gray,
          offsetX: 5,
          offsetY: 5,
          radius: 15
        })
        .width(48)
        .aspectRatio(1)
        .justifyContent(FlexAlign.Center)
        .margin({
    right: 50, bottom: 50 })
      }
      .height('100%')
      .width('100%')
    }
  }

说明:

  • text 存储待播报的文本内容。
  • ttsEngine 是文字转语音引擎的实例。
  • isPlaying 用于标记是否正在播放语音。
  • initTextToSpeechEngine 方法用于初始化文字转语音引擎。
  • aboutToAppear 方法在组件即将显示时调用,初始化引擎。
  • aboutToDisappear 方法在组件即将消失时调用,停止并关闭引擎。
  • play 方法用于播放语音,若引擎正在忙碌则显示提示信息。
  • build 方法构建组件的界面,包括显示文本的列表和播放按钮。

总结梳理:

核心点

  • 使用 textToSpeech 模块实现文字转语音功能。
  • 在组件生命周期方法中初始化和关闭引擎。
  • 通过 isPlaying 状态控制播放按钮的显示。

    完整代码

    import {
          textToSpeech } from '@kit.CoreSpeechKit'
    import {
          promptAction } from '@kit.ArkUI'
    
    @Entry
    @ComponentV2
    struct CoreSpeechKit {
         
    text: string = `
        北纬45度的三月,时光在这里打了个温柔的结。松花江畔的晨雾裹着细雪,将每根枝条都雕琢成剔透的琉璃,冰晶在枝头堆叠出千重瓣的玉兰花,风穿过枝桠时簌簌抖落的不是雪粒,分明是星辰坠入人间的碎屑。
        而此时江南的杏花正枕着暖风酿蜜,绯云般的花影漫过白墙黛瓦,连空气都沁着微醺的甜。季节的调色师悄悄把颜料盘一分为二——北国仍执着地续写冬的尾章,用冰棱作笔,在窗棂勾勒霜花;南疆已迫不及待地翻开春的扉页,让雨燕衔着柳色掠过水墨长巷。
        这相隔三千里的温差,在晨昏线两端织就两幅绸缎:北方是银丝绣的素锦,凛冽里裹着未尽的絮语;南方是蚕娘染的软罗,温润中漾开初生的呢喃。当哈尔滨的树挂迎着朝阳融化第一滴璀璨,杭州的玉兰恰好抖落肩头第三片月光,原来春天正踏着经纬线,把料峭与暄暖谱成天地间最动人的复调。
    `
    ttsEngine?: textToSpeech.TextToSpeechEngine
    
    @Local isPlaying: boolean = false
    
    async initTextToSpeechEngine() {
         
      if (canIUse('SystemCapability.AI.TextToSpeech')) {
         
        const params: textToSpeech.CreateEngineParams = {
         
          language: 'zh-CN',
          person: 0,
          online: 1
        }
        this.ttsEngine = await textToSpeech.createEngine(params)
      }
    }
    
    aboutToAppear(): void {
         
      this.initTextToSpeechEngine()
    }
    
    aboutToDisappear(): void {
         
      if (canIUse('SystemCapability.AI.TextToSpeech')) {
         
        this.ttsEngine?.stop()
        this.ttsEngine?.shutdown()
      }
    }
    
    play() {
         
      if (canIUse('SystemCapability.AI.TextToSpeech')) {
         
        if (this.ttsEngine?.isBusy()) {
         
          return promptAction.showToast({
          message: '正在播报...' })
        }
        const params: textToSpeech.SpeakParams = {
         
          requestId: '10000'
        }
        this.ttsEngine?.speak(this.text, params)
        this.isPlaying = true
      }
    }
    
    build() {
         
      Stack({
          alignContent: Alignment.BottomEnd }) {
         
        List() {
         
          ListItem() {
         
            Text(this.text)
              .lineHeight(32)
          }
        }
        .padding({
          left: 15, right: 15 })
        .height('100%')
        .width('100%')
    
        Row() {
         
          Image(this.isPlaying ? $r('sys.media.AI_playing') : $r('sys.media.AI_play'))
            .width(24)
            .onClick(() => this.play())
        }
        .borderRadius(24)
        .shadow({
         
          color: Color.Gray,
          offsetX: 5,
          offsetY: 5,
          radius: 15
        })
        .width(48)
        .aspectRatio(1)
        .justifyContent(FlexAlign.Center)
        .margin({
          right: 50, bottom: 50 })
      }
      .height('100%')
      .width('100%')
    }
    }
    
相关文章
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
2月前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
273 0
|
3月前
|
安全 API 开发工具
【HarmonyOS NEXT】一键扫码功能
这些Kit为我们应用开发提升了极大地效率。很多简单的功能,如果不需要太深的定制化需求,直接调用kit提供的API就可以实现,在android或者ios上需要很多代码才能实现的功能效果。
93 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
4天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
27 0
|
4天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
43 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
4天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
25 0
|
4天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
49 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例