音乐服务卡片_鸿蒙音乐卡片开发-CSDN博客

介绍

音乐服务卡片是服务卡片在音乐领域的一种应用形式。它集成了音乐APP的核心功能，如歌曲播放、歌单推荐、心动歌词等，并以卡片的形式呈现给用户。音乐服务卡片通常设计有简洁明了的交互界面，用户可以快速访问音乐播放、暂停、切换等功能，无需打开完整的应用即可实现操作，大大提高了使用的便捷性。

前提条件：

安装华为鸿蒙OS SDK
具备鸿蒙OS开发和UI组件的基础知识

项目设置

import { CollectedMusic } from '../view/CollectedMusic';
import { RecommendedMusic } from '../view/RecommendedMusic';
import { PlayController } from '../components/PlayController';
import { CustomTabBar } from '../components/CustomTabBar';
import { HotPlaylist } from '../view/HotPlaylist';
import { Logger } from '../utils/Logger';

const TAG = 'MainPage';

@Entry
@Component
struct MainPage {
@StorageLink('mainTabIndex') currentIndex: number = 0;
@StorageLink('isToHotPlaylist') isToHotPlaylist: boolean = false;
@Provide('pageStack') pageStack: NavPathStack = new NavPathStack();
@State playlistsTitle: string = '';

aboutToAppear(): void {
    this.playlistsTitle =
      getContext(this).resourceManager.getStringArrayValueSync($r('app.strarray.playlists_titles'))[0];
}

@Builder
PageMap(name: string) {
    if (name === 'Playlists') {
      HotPlaylist()
    }
}

onPageShow(): void {
    if (this.isToHotPlaylist) {
      this.isToHotPlaylist = false;
      let stackIndexArray = this.pageStack.getIndexByName('Playlists');
      Logger.info(TAG, `onPageShow stackIndex:${stackIndexArray}`);
      if (stackIndexArray.length > 0) {
        this.pageStack.replacePathByName('Playlists', this.playlistsTitle);
      } else {
        this.pageStack.pushPathByName('Playlists', this.playlistsTitle);
      }
    }
}

build() {
    Navigation(this.pageStack) {
      Column() {
        Tabs({ index: this.currentIndex, barPosition: BarPosition.End }) {
          TabContent() {
            RecommendedMusic()
          }

          TabContent() {
            CollectedMusic()
          }
        }
        .layoutWeight(1)
        .barHeight(0)
        .scrollable(false)
        .onChange((index) => {
          this.currentIndex = index;
        })

        PlayController()

        CustomTabBar({ currentIndex: this.currentIndex })
      }
      .padding({
        top: AppStorage.get<number>('statusBarHeight') ?? 0,
        bottom: AppStorage.get<number>('naviIndicatorHeight') ?? 0
      })
      .backgroundColor('#F1F3F5')
    }
    .hideTitleBar(true)
    .navDestination(this.PageMap)
    .mode(NavigationMode.Stack)
}
}

效果预览

播放界面

工程目录

├──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 // 应用静态资源目录

使用说明

在桌面长按应用图标，分别添加“音乐播控”、“心动歌词”、“歌单推荐”三种类型的卡片。
点击“音乐播控”卡片上的播放/暂停、上一曲、下一曲，可以控制音乐的播放。
“心动歌词”卡片上的歌词内容会每隔半小时进行刷新。
点击“歌单推荐”卡片上的”我的收藏“按钮，会跳转到应用收藏界面。

实现说明

通过formProvider的updateForm()方法实现卡片的主动更新，例如更新歌曲信息、歌词信息等。
音乐播控卡片通过postCardAction()发送call事件控制应用音乐播放，具体可以参考：通过router或call事件刷新卡片内容。
在EntryFormAbility的onAddForm()实现卡片基本信息的数据持久化，使用关系型数据库来实现，
音乐卡片通过postCardAction()发送router事件实现跳转应用页面，心动歌词和歌单推荐通过FormLink组件实现跳转应用页面
在卡片配置文件中form_config配置scheduledUpdateTime和updateDuration参数，并且设置updateEnabled为true，使能定时和定点刷新。在EntryFormAbility的onUpdateForm()中实现卡片的定时和定点刷新逻辑。
使用@ohos.effectKit模块的ColorPicker的getMainColor()方法获取歌曲封面图像主色，来设置卡片背景色。
音频播放通过AVPlayer来实现，具体可以参考：使用AVPlayer播放音频(ArkTS)。