鸿蒙NEXT版实战开辟案例：音乐播放器（附带源码）

往期鸿蒙全套实战精彩文章必看内容：

• 鸿蒙开辟焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开辟实战学习路线
  
• 鸿蒙HarmonyOS NEXT开辟技能最全学习路线指南
  
• 鸿蒙应用开辟实战项目，看这一篇文章就够了（部分项目附源码）
  

---

前次写过一次鸿蒙的音乐项目，不过是基于api9，最近幽蓝君把它完善优化，并适配到api 12，也就是最新的鸿蒙NEXT版本，供各人参考。
先来看这次音乐播放器项目的效果图：

下面为各人详解一下这个项目。
探索发现

这是个简单的音乐列表页，从全局看，有导航栏说明要用Navigation组件，当然也可以自界说，导航栏部分还有个切换开关，可以使用menu实现：相干代码如下：

1. @Builder NavigationMenu(){    Row({space:10}){      Text('探索')        .fontColor(Color.Black)        .fontSize(15)      Row()        .width(1)        .height(18)        .backgroundColor(Color.Gray)      Text('推荐')        .fontColor(Color.Gray)        .fontSize(15)    }    .width('100%')    .justifyContent(FlexAlign.Center)    .height(50)    .alignItems(VerticalAlign.Center)  }   Navigation(){    //内容部分  }  .titleMode(NavigationTitleMode.Mini)  .hideBackButton(true)  .width('100%')  .height('100%')  .backgroundColor('rgba(245, 245, 245, 1)')  .menus(this.NavigationMenu())

复制代码

然后，内容部分显然使用List组件实现，可以看到它可以分为3部分，分别是搜索框、今日热歌和歌单遨游指南。前两个部分都比较简单，歌单遨游指南是可以左右滑动的，所以我使用网格组件Grid实现，设置rowsTemplate属性可以使Grid水平方向滑动，相干代码如下：

1. ListItemGroup({header:this.SectionHeader('歌单遨游指南',false)}){
2.           ListItem(){
3.             Grid(){
4.               ForEach(this.albumList,(item:Album,index)=>{
5.                 GridItem(){
6.                   Column(){
7.                     Image(item.cover)
8.                       .width(150)
9.                       .height(150)
10.                     Text(item.title)
11.                       .fontColor(Color.Black)
12.                       .fontSize(15)
13.                       .fontWeight(FontWeight.Bold)
14.                       .margin({top:5})
15.                       .maxLines(2)
16.                   }
17.                   .alignItems(HorizontalAlign.Center)
18.                   .width(150)
19.                   .height(200)
20.                 }
21.               })
22.             }
23.             .width('100%')
24.             .rowsTemplate('1fr 1fr')
25.             .rowsGap(12)
26.             .columnsGap(10)
27.             .padding({left:12})
28.             .margin({top:5})
29.             .scrollBarWidth(0)
31.           }
32.           .height(400)
33.         }

复制代码

播放音乐页面

这个页面看起来很复杂，其实并不难。这里幽蓝君想说的是，布局无非三种方式，横向、竖向和层叠，其他的布局方式都由这三种衍生而来。
所以对于这个界面，只要把它拆分开来就会发现其实很容易：

有一点难度的地方就是中间的图片是旋转的，我们给他设置一个动态的角度，使用定时器控制图片旋转，代码如下：

1. Image($rawfile(this.musicList[this.currentIndex].cover))
2.               .width(this.screenWidth - 50)
3.               .height(this.screenWidth - 50)
4.               .borderRadius((this.screenWidth - 50)/2)
5.               .objectFit(ImageFit.Fill)
6.               .rotate({ x: 0, y: 0, z: 1, angle: this.value*360 })
7.               
10. this.timer = setInterval(() => {
11.       // 保留2位小数
12.       this.value = this.value + 0.005
14.     }, 30);

复制代码

还有一个地方要说一下，点击列表按钮会弹出一个音乐列表，这里使用bindsheet实现，难倒不难，就是有很多友友不知道这个东西：

相干代码如下：

1. Column(){
3. }
4. .bindSheet($$this.showList, this.listPage(), {
5.     height: 40 + (58 + 5)*this.musicList.length,
6.     backgroundColor: Color.White,
7.     showClose:false,
8. })
11. @Builder listPage(){
12.       Column(){
13.         Divider()
14.           .width('100%')
15.           .height(0.8)
16.           .backgroundColor('rgb(226,226,226)')
17.         List({space:0}){
18.           ForEach(this.musicList,(item:Music,index)=>{
19.             ListItem(){
20.               Row(){
21.                 Column(){
22.                   Text(item.name)
23.                     .fontColor('#222628')
24.                     .fontSize(16)
25.                 }
26.                 .alignItems(HorizontalAlign.Start)
28.                 if(this.currentIndex == index && this.isPlay){
29.                   Image($r('app.media.list_pause'))
30.                     .width(28)
31.                     .height(28)
32.                     .onClick(()=>{
33.                       this.playOrPause()
34.                     })
35.                 }else{
36.                   Image($r('app.media.list_play'))
37.                     .width(28)
38.                     .height(28)
39.                     .onClick(()=>{
40.                       this.playSong(index)
41.                     })
42.                 }
43.               }
44.               .alignItems(VerticalAlign.Center)
45.               .justifyContent(FlexAlign.SpaceBetween)
46.               .width('100%')
47.               .height(62)
48.             }
49.           })
50.         }
51.         .divider({strokeWidth:0.5,color:'rgb(236,236,236)'})
52.         .padding({left:20,right:20})
53.       }
54.       .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.BOTTOM])
55.       .alignItems(HorizontalAlign.Start)
56.       .width('100%')
57.       .backgroundColor(Color.White)
58.       .borderRadius({topLeft:20,topRight:20})
59.       .shadow({ radius: 30, color: 'rgba(230,230,230,0.7)', offsetX: 0, offsetY: -20 })
60.   }

复制代码

播放音乐
这个项目中使用本地音乐文件，所以跟各人分享下播放本地的音频文件。起首把文件放到rawfile文件夹中，播放音乐的代码如下：

1. // 创建avPlayer实例对象
2.     let avPlayer: media.AVPlayer = await media.createAVPlayer();
3.     // 创建状态机变化回调函数
4.     this.setAVPlayerCallback(avPlayer);
5.     // 通过UIAbilityContext的resourceManager成员的getRawFd接口获取媒体资源播放地址
6.     // 返回类型为{fd,offset,length},fd为HAP包fd地址，offset为媒体资源偏移量，length为播放长度
7.     let context = getContext(this) as common.UIAbilityContext;
8.     let fileDescriptor = await context.resourceManager.getRawFd(this.musicList[this.currentIndex].url);
9.     let avFileDescriptor: media.AVFileDescriptor =
10.       { fd: fileDescriptor.fd, offset: fileDescriptor.offset, length: fileDescriptor.length };
11.     this.isSeek = false; // 支持seek操作
12.     // 为fdSrc赋值触发initialized状态机上报
13.     avPlayer.fdSrc = avFileDescriptor;
14.     this.avPlayer = avPlayer

复制代码

​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。