HarmonyOS NEXT 技术实践-实现音乐服务卡片

news/2024/12/23 23:40:53 标签: harmonyos, 华为, 服务卡片, 鸿蒙, harmonyos next

本项目展示了如何在 HarmonyOS Next 中实现音乐服务卡片,集成歌曲播放、歌词展示、歌单推荐等功能。通过使用服务卡片,用户无需进入完整的音乐应用即可通过简洁的界面进行播放控制和内容浏览,从而提高了操作的便捷性与效率。本文将详细介绍项目的实现过程,包括核心功能的实现、代码结构以及最终效果的展示,帮助开发者快速掌握如何在 HarmonyOS Next 中创建高效的音乐服务卡片应用。
在这里插入图片描述


一、项目背景与目标

1. 框架介绍

音乐服务卡片是 HarmonyOS Next 中 服务卡片 的一种具体应用形式,它将音乐APP的核心功能(如歌曲播放、歌单推荐、歌词展示等)以简洁的卡片形式呈现给用户。用户无需打开完整应用,就能够在卡片上完成基本操作(如播放、暂停、切换歌曲、查看歌词等),大大提高了使用的便捷性和用户体验。本示例旨在通过音乐服务卡片的实现,展示如何利用 HarmonyOS Next 的服务卡片功能快速集成音乐相关的操作和展示,提升用户与设备的交互体验。

在这里插入图片描述

2. 项目目标

本项目的目标是创建一个功能完备的音乐服务卡片,支持以下功能:

  • 歌曲播放控制:提供播放、暂停、上一曲、下一曲等控制操作。
  • 歌词展示:实时显示当前播放歌曲的歌词。
  • 歌单推荐:基于用户的历史偏好,推荐个性化的歌曲列表。
  • 简洁交互:通过卡片展示核心功能,提升用户体验,减少切换应用的频率。

二、项目结构

以下是项目的目录结构,展示了各个功能模块的分布:

├──entry/src/main/ets                     // 代码区
│  ├──components                          // 自定义组件
│  │  ├──CustomTabBar.ets                 // 首页自定义导航Tabbar
│  │  ├──PlayController.ets               // 首页底部音乐播控组件
│  │  ├──PlayerView.ets                   // 音乐播放界面
│  │  ├──PlayList.ets                     // 歌曲播放列表
│  │  ...                                 
│  │  └──SongListItem.ets                 // 音乐列表列表项目
│  ├──database                            // 数据库工具类
│  │  ├──FormRdbHelper.ets                // 卡片数据库工具类
│  │  ├──PreferencesUtil.ets              // 首选项工具类
│  │  ├──RdbUtils.ets                     // 关系型数据工具类
│  │  └──SongRdbHelper.ets                // 歌曲数据库工具类
│  ├──entryability
│  │  └──EntryAbility.ets                 // 程序入口类
│  ├──entrybackupability                  
│  │  └──EntryBackupAbility.ets           // 应用数据备份和恢复类
│  ├──entryformability
│  │  └──EntryFormAbility.ets             // 卡片生命周期类
│  ├──lyric                               // 歌曲歌词实现模块
│  ├──pages
│  │  └──MainPage.ets                     // 应用主界面
│  ├──utils                               // 工具类
│  │  ├──BackgroundUtil.ets               // 后台任务管理类
│  │  ├──FormUtils.ets                    // 卡片管理类
│  │  ├──ImageUtils.ets                   // 图片工具类
│  │  ├──MediaService.ets                 // 音频播控管理类
│  │  ...                                 
│  │  └──WindowUtils.ets                  // 窗口工具类
│  ├──view
│  │  ├──CollectedMusic.ets               // 收藏歌曲视图
│  │  ├──HotPlaylist.ets                  // 热门歌单视图
│  │  └──RecommendedMusic.ets             // 推荐歌曲视图
│  ├──viewmodel                           // 数据model
│  └──widget
│     ├──model
│     │  ├──ActionUtils.ets               // 卡片事件交互方法封装类
│     │  └──FormCardConstant.ets          // 卡片常量封装类
│     └──pages
│        ├──LyricsCard.ets                // 歌词卡片
│        ├──PlayControlCard2x2.ets        // 2x2音乐播控卡片
│        ├──PlayControlCard2x4.ets        // 2x4音乐播控卡片
│        ├──RecommendedMusic1x2.ets       // 1x2歌单推荐卡片
│        └──RecommendedMusic2x4.ets       // 2x4歌单推荐卡片
└──entry/src/main/resources               // 应用静态资源目录

本示例仅支持标准系统上运行,支持设备:华为手机。
HarmonyOS系统:HarmonyOS Next及以上。
DevEco Studio版本:DevEco Studio Next及以上。
HarmonyOS SDK版本:HarmonyOS Next SDK及以上。


三、项目实现

整体项目代码量过多,此处以核心代码为例:

1. 播放控制操作

ActionUtils.ets 中,playByAction 方法用于控制音乐播放的动作(播放、暂停、上一曲、下一曲)。通过接收 type 参数,playByAction 方法能够根据传入的动作类型发送相应的控制请求,操作音乐卡片的播放状态。

public playByAction(component: Object, type: PlayActionType, formId: string) {
  postCardAction(component, {
    action: FormCarAction.CALL,
    abilityName: ENTRY_ABILITY,
    params: {
      method: CallMethod.PLAY_BY_ACTION,
      playActionType: type,
      formId: formId
    }
  });
}

2. 更新卡片状态

当用户对音乐控制卡片进行操作时,可能需要更新卡片的显示状态。updateControlCardAction 方法通过 postCardAction 请求更新卡片的显示内容(如歌曲封面、播放进度条等),确保卡片内容与当前播放状态一致。

public updateControlCardAction(component: Object, formId: string) {
  postCardAction(component, {
    action: FormCarAction.CALL,
    abilityName: ENTRY_ABILITY,
    params: {
      method: CallMethod.REQUEST_UPDATE_CARD,
      formId: formId
    }
  });
}

3. 表单信息管理

EntryFormAbility.ets 中,onAddForm 方法处理了音乐卡片表单的添加。它通过从 want.parameters 中提取 formIdformDimensionformName,创建并保存 FormInfo 对象,并根据 formName 进行相应的操作。

onAddForm(want: Want) {
  Logger.info(TAG, 'onAddForm');
  if (want.parameters) {
    let formId = want.parameters['ohos.extra.param.key.form_identity'] as string;
    let formDimension = want.parameters['ohos.extra.param.key.form_dimension'] as string;
    let formName = want.parameters['ohos.extra.param.key.form_name'] as string;

    let formInfo = new FormInfo();
    formInfo.formId = formId;
    formInfo.formDimension = formDimension;
    formInfo.formName = formName;
    Logger.info(TAG, `onAddForm formInfo: ${JSON.stringify(formInfo)}`);
    FormRdbHelper.getInstance(this.context).insertForm(formInfo);

    if (formName.includes('PlayControlCard')) {
      // 音乐控制卡片的初始化或操作逻辑
    }
  }
}

四、效果预览

1. 播放界面

展示当前播放的歌曲信息、封面图、播放进度条以及播放/暂停按钮。

在这里插入图片描述

2. 播控卡片

提供基础的音乐播放控制功能,包括播放、暂停、上一曲、下一曲等按钮,用户可随时进行音乐控制。

在这里插入图片描述

3. 歌词卡片

显示当前播放歌曲的实时歌词,用户可以一边听歌一边跟随歌词。

在这里插入图片描述

4. 推荐卡片

基于用户的听歌习惯和历史记录,推荐个性化的歌单或歌曲,帮助用户发现新音乐。

在这里插入图片描述


五、总结

通过本项目实现的音乐服务卡片,展示了如何将常用的音乐功能通过卡片的形式高效集成到 HarmonyOS Next 应用中。通过简洁的交互界面,用户无需进入完整的应用即可完成常见操作,如播放、暂停、切换歌曲和查看歌词。此项目不仅提升了用户体验,也充分发挥了 HarmonyOS Next 服务卡片的优势,为开发者提供了更加便捷的音乐控制方案。

此外,项目中的核心代码展示了如何通过 ActionUtils.etsEntryFormAbility.ets 实现音乐卡片的动态控制和数据管理,帮助开发者快速实现类似功能,并灵活地扩展和定制更多交互体验。


http://www.niftyadmin.cn/n/5797114.html

相关文章

403 Forbidden HTTP 响应状态码

403 Forbidden 是一种 HTTP 响应状态码,表示服务器理解了请求,但拒绝授权访问。以下是导致 403 Forbidden 错误的常见原因及解决方法: 1. 权限问题 原因 用户或客户端未被授权访问目标资源。 文件或目录的权限配置不正确。 解决方法 文…

HDR视频技术之八:色域映射

在之前的色调映射章节中提到: 在色调映射环节, 为了便于操作, 且不使图像颜色产生巨大失真, 色调映射算法通常会仅处理图像亮度信息, 将 HDR 图像亮度映射到 SDR图像亮度域中, 通过原 HDR 图像的颜色信息&a…

前端人脸识别,简单的活体检测(张张嘴...),vue3使用tracking.js,face.js,face-api.js实现

实现的逻辑是先检测是否有人脸,然后再检测是否张嘴了,最后生成照片传给后端比对人脸数据。本人是在工作中的项目需要考勤,前端需要活体检测。想到了这个简单的方法,在纯前端实现这些逻辑,当然精度不高,想要…

ChatGPT生成测试用例的最佳实践(四)

通常情况下还应该进行测试用例外不评审。将已完成的基于百度关键字搜索业务的功能和安全测试用例集的存放位置告知项目团队成员,需要预留出一定的时间,便于项目组研发、产品人员阅读,以免在项目团队测试用例评审会议上占用过多时间熟悉相关测…

Windows11 家庭版安装配置 Docker

1. 安装WSL WSL 是什么: WSL 是一个在 Windows 上运行 Linux 环境的轻量级工具,它可以让用户在 Windows 系统中运行 Linux 工具和应用程序。Docker 为什么需要 WSL: Docker 依赖 Linux 内核功能,WSL 2 提供了一个高性能、轻量级的…

Linux下基于最新稳定版ESP-IDF5.3.2开发esp32s3入门hello world输出【入门一】

开发环境搭建:Linux-Ubuntu下搭建ESP32的开发环境的步骤,使用乐鑫最新稳定版的esp-idf-CSDN博客 一、安装好开发环境后,在esp目录下再创建一个esp32的目录【用于编程测试demo】 二、进入esp32目录,打开终端【拷贝esp-idf的hello工…

mapStateToProps

mapStateToProps 是 React 应用中与 Redux 结合使用时的一个重要概念。它是一个函数,用于将 Redux store 中的状态映射到 React 组件的 props 上。通过这个函数,你可以选择组件需要订阅的 state 部分,并在 Redux store 更新时自动更新组件的 …

yolov5 yolov6 yolov7 yolov8 yolov9目标检测、目标分类 目标切割 性能对比

文章目录 YOLOv1-YOLOv8之间的对比如下表所示:一、YOLO算法的核心思想1. YOLO系列算法的步骤2. Backbone、Neck和Head 二、YOLO系列的算法1.1 模型介绍1.2 网络结构1.3 实现细节1.4 性能表现 2. YOLOv2(2016)2.1 改进部分2.2 网络结构 3. YOL…