当前位置: 首页 > news >正文

HarmonyOS元服务开发系列教程(三):实现音乐播放和封面旋转

首先诚邀大家参加学习鸿蒙拿好礼活动,即日起,只要加入班级考取华为开发者基础/高级证书,并发表一篇技术文章,就有机会获得官方发放的精美礼品,数量有限,先到先得。幽蓝君的班级链接如下:​​https://developer.huawei.com/consumer/cn/training/classDetail/7b706ca975bd42e98b3bb51aa6b0be5a?type=1?ha_source=hmosclass&ha_sourceId=89000248​​

上一篇文章中分享了如何开发音乐元服务的页面,今天继续完善应用功能,完成音乐的播放和控制,以及音乐列表弹窗等功能。

本项目使用本地音频,音频文件和封面都存放在rawfile文件夹。

由于本项目使用V2版本的状态管理,定义变量的装饰器也发生了变化,比如定使用@Local定义歌曲列表和当前播放序号:

private avPlayer?: media.AVPlayer = undefined;
@Local musicList:MusicClass[] = [new MusicClass('Never Really Easy','Stephanie Poetri','NeverReallyEasy.mp3','NeverReallyEasy.png'),new MusicClass('Only Lovers','Ronan Keating','onlylovers.mp3','onlylovers.png'),new MusicClass('Bumping Up and Down','Raffi','BumpingUpandDown.mp3','BumpingUpandDown.png')
]
@Local currentIndex:number = 0
然后读取本地文件并初始化播放器:
// 创建avPlayer实例对象
let avPlayer: media.AVPlayer = await media.createAVPlayer();
// 创建状态机变化回调函数
this.setAVPlayerCallback(avPlayer);
// 通过UIAbilityContext的resourceManager成员的getRawFd接口获取媒体资源播放地址
// 返回类型为{fd,offset,length},fd为HAP包fd地址,offset为媒体资源偏移量,length为播放长度
let context = getContext(this) as common.UIAbilityContext;
let fileDescriptor = await context.resourceManager.getRawFd(this.musicList[this.currentIndex].url);
let avFileDescriptor: media.AVFileDescriptor ={ fd: fileDescriptor.fd, offset: fileDescriptor.offset, length: fileDescriptor.length };
this.isSeek = false; // 支持seek操作
// 为fdSrc赋值触发initialized状态机上报
avPlayer.fdSrc = avFileDescriptor;
this.avPlayer = avPlayer

Local大家可以理解为V1版本的State,区别是Local是组件内部的状态管理,不允许在外部进行初始化,并且Local能够实现深度状态检测。更多的V2版本装饰器会在项目中陆续介绍。

接下来注册播放器的回调,里面包含播放、暂停、完成等状态回调:

avPlayer.on('timeUpdate', (seekDoneTime: number) => {if(this.duration > 0){let progress = seekDoneTime/this.durationthis.progressNow = progress*100}this.progressTimeString = this.durationToTimeString(seekDoneTime)
})
// seek操作结果回调函数
avPlayer.on('seekDone', (seekDoneTime: number) => {console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
})// 状态机变化回调函数
avPlayer.on('stateChange', async (state: string, reason: media.StateChangeReason) => {switch (state) {case 'idle': // 成功调用reset接口后触发该状态机上报console.info('AVPlayer state idle called.');avPlayer.release(); // 调用release接口销毁实例对象break;case 'initialized': // avplayer 设置播放源后触发该状态上报console.info('AVPlayer state initialized called.');avPlayer.prepare();break;case 'prepared': // prepare调用成功后上报该状态机console.info('AVPlayer state prepared called.');if(this.isPlay){avPlayer.play();}this.duration = avPlayer.durationthis.durationTimeString = this.durationToTimeString(this.duration)console.log('duration:',avPlayer.duration)break;case 'playing': // play成功调用后触发该状态机上报console.info('AVPlayer state playing called.');if (this.count !== 0) {if (this.isSeek) {console.info('AVPlayer start to seek.');avPlayer.seek(avPlayer.duration); //seek到音频末尾} else {// 当播放模式不支持seek操作时继续播放到结尾console.info('AVPlayer wait to play end.');}} else {// avPlayer.pause(); // 调用暂停接口暂停播放}this.count++;break;case 'paused': // pause成功调用后触发该状态机上报console.info('AVPlayer state paused called.');// avPlayer.play(); // 再次播放接口开始播放break;case 'completed': // 播放结束后触发该状态机上报console.info('AVPlayer state completed called.');// avPlayer.stop(); //调用播放结束接口// this.endRotate();if(this.currentIndex < this.musicList.length - 1){this.currentIndex += 1this.changeSong()}else {this.endRotate();}break;case 'stopped': // stop接口成功调用后触发该状态机上报console.info('AVPlayer state stopped called.');// avPlayer.reset(); // 调用reset接口初始化avplayer状态break;case 'released':console.info('AVPlayer state released called.');break;default:console.info('AVPlayer state unknown called.');break;}
})

然后可以调用播放器的play方法进行音乐播放:

this.avPlayer.play()

音乐播放的同时封面图片也随之转动,这里使用计时器不断修改图片角度来实现,首先定义计时器和角度变量:

private timer?: number;
@Local rotateAngle:number=0;

实现计时器并修改角度:

this.timer = setInterval(() => {
// 保留2位小数
this.rotateAngle = this.rotateAngle + 0.005}, 30);

今天的内容就是这样,感谢阅读。

http://www.lryc.cn/news/619075.html

相关文章:

  • 【问题解决】从Anaconda环境迁移到miniforge并在IDEA中完成环境配置
  • 【数据分享】2020-2022年我国乡镇的逐日最高气温数据(Shp/Excel格式)
  • C++动态代理技术详解:实现原理与应用场景
  • beacon-dongle系统(二)AP及Server建立
  • 双十一美妆数据分析:洞察消费趋势与行业秘密
  • 电商双 11 美妆数据分析学习报告
  • MyBatis持久层实现
  • 【前端Vue】log-viewer组件的使用技巧
  • Qwen-Image(阿里通义千问)技术浅析(一)
  • 物联网、大数据与云计算持续发展,楼宇自控系统应用日益广泛
  • [Robotics_py] 路径规划算法 | 启发式函数 | A*算法
  • Linux系统编程Day13 -- 程序地址空间
  • Seata深度剖析:微服务分布式事务解决方案
  • 微服务ETCD服务注册和发现
  • 力扣经典算法篇-50-单词规律(双哈希结构+正反向求解)
  • SQL 合并两个时间段的销售数据:FULL OUTER JOIN + COALESCE
  • 杰里平台7083G 如何支持4M flash
  • 【K8s】K8s控制器——复制集和deployment
  • 【SpringBoot】08 容器功能 - SpringBoot底层注解汇总大全
  • 4.运算符
  • [激光原理与应用-254]:理论 - 几何光学 - 自动对焦在激光器中的应用?
  • vivo Pulsar 万亿级消息处理实践(2)-从0到1建设 Pulsar 指标监控链路
  • 【微服务过度拆分的问题】
  • web服务器tomcat内部工作原理以及样例代码
  • Airtable 入门指南:从创建项目到基础数据分析与可视化
  • C++中类之间的关系详解
  • LangChain 入门学习
  • 【限时分享:Hadoop+Spark+Vue技术栈电信客服数据分析系统完整实现方案
  • Docker概述与安装Dockerfile文件
  • Docker使用----(安装_Windows版)