目录
一、项目简介
使用软件
DevEco Studio 5.0.5 Release
SDK
5.0.5(17)
使用语言
ArkTs
数据库
RDB关系型数据库
项目页面
启动页、登录页、注册页、推荐页、歌曲列表、动态、我的、音乐播放页。
关键技术点
RDB关系型数据库、Scroll滚动、自定义组件、animator动画，定时器、音频播放、ForEach循环..
二、演示视频
鸿蒙原创--基于 DevEco Studio 实现 音乐播放器App
三、设计详情（部分）
歌曲列表
- 页面的结构
歌曲列表页面采用分层布局设计，整体分为顶部信息区和中部滚动列表区两大模块。
顶部区域采用横向排列展示歌单封面、标题及创作者信息，通过深色背景与白色文字形成鲜明对比增强可读性。中部区域使用滚动容器承载全部歌曲项，每个歌曲项采用横向布局包含封面图、歌曲信息栏和操作按钮。
信息栏采用垂直嵌套结构展示歌曲名称、VIP标识、音质标签和歌手信息，通过多层级文本样式区分主次内容。底部保留安全边距防止内容被遮挡，整体布局兼顾信息密度与视觉舒适度。
- 使用到的技术
本页面运用ArkUI声明式开发范式，采用组件化构建方式。通过ForEach循环渲染技术动态生成歌曲列表项，有效提升渲染性能。
使用路由导航模块实现页面跳转与参数传递，确保歌曲选择后能准确跳转到播放页。自定义构建器封装歌曲项视图，实现UI逻辑复用。
灵活运用文本溢出处理机制确保长文本展示的完整性，配合滚动容器实现流畅浏览体验。资源管理系统统一管理图片资源，采用自适应布局技术保证不同屏幕尺寸下的显示一致性。
- 页面详细介绍
歌曲列表页面作为音乐应用的入口界面，承担着内容展示和导航交互的双重功能。顶部区域突出歌单整体属性，通过大尺寸封面和醒目标题建立视觉焦点。
列表项采用卡片式设计，每首歌曲清晰展示封面、名称、特权标识和歌手信息，VIP和音质标签使用色彩编码强化认知。交互方面支持点击任意歌曲跳转到播放页面，同时传递歌曲ID参数实现无缝衔接。
视觉设计采用渐进式背景色，顶部深色渐变到底部浅色，既突出内容层次又减轻视觉疲劳。整个页面兼顾美学设计与功能实用性，为用户提供直观高效的歌曲浏览体验。
TypeScript
build() {
Column() {
// 顶部信息区域
Row() {
Image($r('app.media.1'))
.width(80)
.height(80)
.borderRadius(10)
Column({ space: 15 }) {
Text('歌曲列表')
.fontSize(18)
.fontColor('#fff')
.fontWeight(FontWeight.Bolder)
.margin({ left: 40 })
Row({ space: 5 }) {
Image($r('app.media.1'))
.width(20)
.height(20)
.borderRadius(10)
Text('用户昵称 | 1000次播放')
.fontSize(12)
.fontColor('#ffe3e3e3')
}
}
.width('100%')
.margin({ left: 10 })
.alignItems(HorizontalAlign.Start)
}
.width('100%')
.padding(15)
.margin({top:40})
// 歌曲列表区域
Scroll() {
Column() {
ForEach(this.songList, (song: SongItem) => {
this.SongItemView(song)
})
}
.margin({ bottom: 100 })
}
.width('100%')
.height('100%')
.margin({top:10,bottom: 40 })
.scrollBar(BarState.Off)
.align(Alignment.TopStart)
.backgroundColor('#f3f6fb')
.borderRadius({ topLeft: 10, topRight: 10 })
.padding(15)
}
.width('100%')
.height('100%')
.backgroundColor('#63626f')
}音乐播放页
- 页面的结构
播放页面的结构设计清晰合理，主要分为四个核心区域。顶部是导航栏区域，包含返回按钮和页面标题，采用简洁的左右布局确保操作直观。
中部是内容展示区，核心元素为圆形旋转唱片封面，下方垂直排列歌曲名称、歌手信息及VIP标识，使用醒目的视觉标签增强层次感。底部是控制交互区，包含进度条滑块、时间显示和播放控制按钮组，布局采用水平均匀分布确保操作便捷性。
整体采用垂直层叠的Column容器嵌套Row组件实现精细排版，兼顾了信息展示与用户交互的平衡。
- 使用到的技术
本页面综合运用了HarmonyOS ArkUI的多项核心技术。通过媒体服务模块实现音频播放控制，支持播放、暂停、切换和进度跳转等核心功能。
动画框架驱动唱片封面旋转效果，创建线性循环动画提升视觉体验。路由管理模块处理页面跳转与参数传递，确保歌曲切换时数据连贯性。
状态管理采用@State装饰器动态响应播放状态、进度数据及界面元素变化。
组件化开发融合了Image、Slider、Text等基础组件，通过资源管理访问本地媒体文件，实现了高性能的音频播放与界面联动。
- 页面详细介绍
播放页面是音乐应用的核心交互界面，专注于提供沉浸式的播放体验。界面以唱片旋转动画为视觉中心，结合动态进度更新营造播放动感。
智能播放控制支持用户通过按钮或进度条精确调节播放进度，且能响应系统播放状态自动更新界面。歌曲信息展示区突出VIP标签和歌手关注功能，强化商业属性与用户互动。
页面生命周期管理确保播放资源及时释放，避免后台耗电。跨页面路由传递歌曲参数实现无缝播放切换，整体设计兼顾功能性、美观性和性能优化。
TypeScript
/**
* 获取当前播放的歌曲信息
* @returns 当前歌曲对象
*/
private getCurrentSong(): SongItem {
return this.songList[this.currentIndex];
}
/**
* 根据歌曲ID设置当前播放的歌曲
* @param songId 歌曲ID
* @param autoPlay 是否自动播放，默认为true
*/
private setCurrentSongById(songId: number, autoPlay: boolean = true) {
// 在歌曲列表中查找对应ID的歌曲索引
const index = this.songList.findIndex(song => song.id === songId);
// 如果找到歌曲
if (index !== -1) {
// 更新当前索引
this.currentIndex = index;
// 设置自动播放标志
this.autoPlayAfterPrepare = autoPlay;
// 初始化播放器并设置数据源
void this.initPlayerAndSetSource(this.songList[this.currentIndex].audioPath, autoPlay);
}
}
/**
* 生命周期函数：组件即将显示时调用
*/
async aboutToAppear() {
// 初始化播放器
await this.initPlayer();
}
/**
* 生命周期函数：组件即将消失时调用
*/
aboutToDisappear() {
// 停止进度定时器
this.stopProgressTimer()
// 暂停旋转动画
if (this.rotationAnimator) {
this.rotationAnimator.pause()
}
// 释放播放器资源
this.releasePlayer()
}
/**
* 初始化媒体播放器
*/
private async initPlayer() {
// 如果播放器不存在，则创建
if (!this.player) {
this.player = await media.createAVPlayer()
// 设置播放器回调
this.setAVPlayerCallback(this.player)
}
}四、项目源码
👇👇👇👇👇快捷方式👇👇👇👇👇