鸿蒙音乐播放器(超具体)

基于API9的音乐播放器，可播放，停息，上，下一首歌曲切换等功能
  
   文章目录

          1.效果展示
          2.首页
          3.播放页
  

---

注：需要使用模仿器或真机调试运行

---

一、效果展示

1.首页样式：

2.播放样式：

 

二、首页功能代码



1: UI代码

首页分为2部门，头部和底部。纵向布局，比例1:3。

1.1：头部

1. //头部
2.      Row(){
3.        Column(){
4.          Image('https://tse2-mm.cn.bing.net/th/id/OIP-C.fNF8owgmIwYhU9KINmt2dAAAAA?w=217&h=217&c=7&r=0&o=5&dpr=1.5&pid=1.7')
5.            .width(80).height(80).borderRadius(50)
6.          Column({space:5}){
7.            //获取时间
8.            Text(new Date().toDateString()).fontSize(20).fontColor(Color.White).fontWeight(800)
9.            Text('1 YEAR ACO TODAY').fontSize(16).opacity(0.6)//透明度
10.          }
11.        }.width('100%').height('100%').justifyContent(FlexAlign.SpaceAround)
12.      }.width('100%').layoutWeight(1).backgroundColor('#4FE3C1').justifyContent(FlexAlign.Center)

复制代码

1.2：底部

底部使用foreach循环渲染每个歌曲的信息，另外当所需渲染的歌曲过多的时候，我们需要使用Scroll组件，让他歌曲可以滚动以便展示完备歌曲。

1. //歌单列表
2.      Row(){
3.        //滚动组件
4.        Scroll(){
5.          Column({space:20}){
6.            //this.songList==》歌曲所有信息,songInfo==》歌曲信息类
7.            ForEach(this.songList,(item:songInfo,index:number)=>{
8.              //歌曲信息组件
9.              Row(){
10.                Row({space:10}){
11.                  Text(item.id.toString()).fontSize(24)//歌曲id
12.                  Image(item.pic).width(60).height(60)//歌曲图片
13.                  Column(){
14.                    //歌曲名称（限定歌曲长度为1行，超出则显示...）
15.                    Text(item.name).width('60%').fontSize(18).fontWeight(700).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis })
16.                    //歌曲作者
17.                    Text(item.author).fontSize(15).opacity(0.6)
18.                  }.height(80).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)
19.                }.width('80%')
20.                Row(){
21.                  Text(item.play+'Plays').fontSize(12).fontColor(Color.Gray)//歌曲播放数
22.                }.width('20%').height(80).justifyContent(FlexAlign.End).alignItems(VerticalAlign.Bottom)
23.              }.width('100%').height(100).borderWidth(1).borderRadius(10).shadow({radius:10}).padding(10)
24.             
25.            })
26.          }.padding({top:20,bottom:20,left:5,right:5})
27.        }.scrollBar(BarState.Off).width('100%').height('100%')
28.      }.width('100%').layoutWeight(3)

复制代码

2：其他代码

2.1：首页变量数据

1. import { song } from '../mock/song'
2. import { songInfo } from '../model/songInfo'
3.   //播放的歌曲信息
4.   @StorageLink('song') songList:songInfo[]=[]
5.   //播放的歌曲索引
6.   @StorageLink('i') currentIndex:number = -1
9.   aboutToAppear(){
10.     this.songList = song.songList//赋值歌曲信息
11.     AppStorage.SetOrCreate('i',-1)//初始化
12.   }

复制代码

2.2：song文件代码

1. import { songInfo } from '../model/songInfo'
2. export class song{
3.   static songList:songInfo[]=[
4.     new songInfo(1,$rawfile('OnlyLovers.png'),'Only Lovers','Trademark',24,541,999,'onlyLovers.mp3'),
5.     new songInfo(2,$rawfile('NeverReallyEasy.png'),'Never Really Easy','SSerafim',33,779,999,'NeverReallyEasy.mp3'),
6.     new songInfo(3,$rawfile('BumpingUpandDown.png'),'Bumping Upand Down','MCND',40,956,999,'BumpingUpandDown.mp3'),
7.     new songInfo(4,$rawfile('BattleField.png'),'Battle Field','JordanFisher',57,978,999,'BattleField.mp3'),
8.     new songInfo(5,$rawfile('CanYouFeelIt.png'),'Can You Feel It','JeanRoch',61,988,999,'CanYouFeelIt.mp3'),
9.     new songInfo(6,$rawfile('GodIsAGirl.png'),'God Is A Girl','Groove',75,990,999,'GodIsAGirl.mp3'),
10.     new songInfo(7,$rawfile('TuViviNell‘aria.png'),'Tu Vivi Nell','Miani',95,999,999,'TuViviNell‘aria.mp3'),
11.   ]
12. }

复制代码

歌曲文件在以下目录中：

 

2.3：songInfo文件代码

1. export class songInfo{
2.   id:number//歌曲id
3.   pic:Resource//歌曲图片
4.   name:string//歌曲姓名
5.   author:string//歌曲作者
6.   play:number//播放次数
7.   like:number//喜欢总数
8.   comment:number//评论数
9.   src:string//播放地址
10.   constructor(id:number,pic:Resource,name:string,author:string,play:number,like:number,comment:number,src:string) {
11.     this.id = id
12.     this.pic = pic
13.     this.name = name
14.     this.author = author
15.     this.play = play
16.     this.like = like
17.     this.comment = comment
18.     this.src = src
19.   }
20. }

复制代码

 3：点击事件

当用户点击此中恣意一首歌曲时，需要跳转到其播放页。由于数据是死的，我们通过传songList中的索引数据已往，就能实现播放对应的歌曲。
代码：

1. //歌曲信息组件
2.   Row(){
3.              ......   
4.     }.width('100%').height(100).borderWidth(1).borderRadius(10).shadow({radius:10}).padding(10)
5.      .onClick(()=>{//歌曲信息组件点击事件
6.            router.pushUrl({url:'pages/Player'})
7.            this.currentIndex = index
8.      })

复制代码

 4：完备代码

1. import router from '@ohos.router'import { song } from '../mock/song'import { songInfo } from '../model/songInfo'@Entry@Componentstruct Index {  //播放的歌曲信息  @StorageLink('song') songList:songInfo[]=[]  //播放的歌曲索引  @StorageLink('i') currentIndex:number = -1    aboutToAppear(){    this.songList = song.songList    AppStorage.SetOrCreate('i',-1)  }  build() {   Column(){     //头部
2.      Row(){
3.        Column(){
4.          Image('https://tse2-mm.cn.bing.net/th/id/OIP-C.fNF8owgmIwYhU9KINmt2dAAAAA?w=217&h=217&c=7&r=0&o=5&dpr=1.5&pid=1.7')
5.            .width(80).height(80).borderRadius(50)
6.          Column({space:5}){
7.            //获取时间
8.            Text(new Date().toDateString()).fontSize(20).fontColor(Color.White).fontWeight(800)
9.            Text('1 YEAR ACO TODAY').fontSize(16).opacity(0.6)//透明度
10.          }
11.        }.width('100%').height('100%').justifyContent(FlexAlign.SpaceAround)
12.      }.width('100%').layoutWeight(1).backgroundColor('#4FE3C1').justifyContent(FlexAlign.Center)     //歌单列表     Row(){       //滚动组件       Scroll(){         Column({space:20}){           //this.songList==》歌曲所有信息,songInfo==》歌曲信息类           ForEach(this.songList,(item:songInfo,index:number)=>{             //歌曲信息组件             Row(){               Row({space:10}){                 Text(item.id.toString()).fontSize(24)//歌曲id                 Image(item.pic).width(60).height(60)//歌曲图片                 Column(){                   //歌曲名称（限定歌曲长度为1行，超出则表现...）                   Text(item.name).width('60%').fontSize(18).fontWeight(700).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis })                   //歌曲作者                   Text(item.author).fontSize(15).opacity(0.6)                 }.height(80).alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.SpaceEvenly)               }.width('80%')               Row(){                 Text(item.play+'Plays').fontSize(12).fontColor(Color.Gray)//歌曲播放数               }.width('20%').height(80).justifyContent(FlexAlign.End).alignItems(VerticalAlign.Bottom)             }.width('100%').height(100).borderWidth(1).borderRadius(10).shadow({radius:10}).padding(10)             .onClick(()=>{//歌曲信息组件点击事件                router.pushUrl({url:'pages/Player'})                this.currentIndex = index             })           })         }.padding({top:20,bottom:20,left:5,right:5})       }.scrollBar(BarState.Off).width('100%').height('100%')     }.width('100%').layoutWeight(3)   }    .width('100%')    .height('100%')  }}

复制代码

---

三 、播放功能代码

1：UI代码

1.1：头部

1. //头部
2.       Row(){
3.         Column({space:5}){
4.           Text(new Date().toDateString()).fontSize(22).fontWeight(800)
5.           Text('1 YEAR ACO TODAY').fontSize(15).fontColor(Color.Gray).opacity(0.6)
6.         }
7.       }.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)

复制代码

1.2：空白占位区

1. //空白占位
2.       Row(){
4.       }.width('100%').layoutWeight(1)

复制代码

 1.3：歌曲图片及播放进度

1. //歌曲图片和播放进度
2.       Row(){
3.         Stack(){
4.           Image(this.songList[this.currentIndex].pic)
5.             .width(170).height(170).borderRadius(100)
6.           Progress({value:this.value,total:this.total,type:ProgressType.Ring})
7.             .width(190).height(190).color("#ff49d7b8")
8.             .style({strokeWidth:8})
9.         }
10.       }.width('100%').layoutWeight(4).justifyContent(FlexAlign.Center)

复制代码

 1.4：歌曲信息

1. //歌曲信息
2.       Row(){
3.         Column({space:10}){
4.           Text(this.songList[this.currentIndex].name).fontSize(25).fontWeight(900)
5.           Text(this.songList[this.currentIndex].author).fontSize(18).opacity(0.6)
6.           //喜欢，评论，分享
7.           Row(){
8.             Badge({count:this.songList[this.currentIndex].like,position:BadgePosition.RightTop,style:{badgeSize:20,badgeColor:Color.Red}}){
9.               Image($r('app.media.tool_like')).width(40).height(40)
10.             }
11.             Badge({count:this.songList[this.currentIndex].comment,position:BadgePosition.RightTop,style:{badgeSize:20,badgeColor:Color.Gray}}){
12.               Image($r('app.media.tool_comment')).width(40).height(40)
13.             }
14.             Image($r('app.media.nav_share')).width(40).height(40)
15.           }.width('100%').justifyContent(FlexAlign.SpaceAround).margin({top:10})
16.         }.width('100%').height('100%').justifyContent(FlexAlign.Center)
17.       }.width('100%').layoutWeight(2)

复制代码

1.5：歌曲菜单控制

1. //歌曲菜单
2.       Row(){
3.         Row(){
4.           Image($r('app.media.control_last')).width(50).height(50)
5.             .onClick(async()=>{
6.               
7.             })
8.           Image(this.isPlaying ? $r('app.media.control_pause') : $r('app.media.control_play')).width(50).height(50)
9.             .onClick(()=>{
10.               this.isPlaying ? this.avPlayer.pause() : this.avPlayer.play()
11.             })
12.           Image($r('app.media.control_next')).width(50).height(50)
13.             .onClick(async()=>{
14.             
15.             })
16.         }.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:10})
17.       }.width('100%').layoutWeight(1)

复制代码

2：其他代码（紧张）

2.1：播放页变量数据

1. //歌曲信息
2.   @StorageLink('song') songList:songInfo[]=[]
3.   //播放的歌曲索引
4.   @StorageLink('i') currentIndex:number = -1
5.   //现在播放的时间
6.   @State value:number = 0
7.   //总共播放的时间
8.   @State total:number = 0
9.   //是否开启定时器标志
10.   @State flag:boolean = false
11.   //定时器id
12.   @State time:number=0
13.   //是否正在播放
14.   @State isPlaying:boolean = false
15.   //音乐播放对象
16.   avPlayer:media.AVPlayer

复制代码

2.2：音乐播放状态及事件

1. //音乐播放状态
2.   setAVPlayerCallback(avPlayer:media.AVPlayer){
3.     // error回调监听函数,当avPlayer在操作过程中出现错误时调用 reset接口触发重置流程
4.     avPlayer.on('error', (err) => {
5.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
6.       avPlayer.reset(); // 调用reset重置资源，触发idle状态
7.     })
8.     avPlayer.on('stateChange',async(state:string)=>{
9.       switch (state){
10.         case 'idle': // 成功调用reset接口后触发该状态机上报
11.           avPlayer.release(); // 调用release接口销毁实例对象
12.           break;
13.         case 'initialized': // avplayer 设置播放源后触发该状态上报
14.           avPlayer.prepare(); // 调用prepare接口销毁实例对象
15.           break;
16.         case 'prepared': // prepare调用成功后上报该状态机
17.           this.value = avPlayer.currentTime // 播放的时间进度
18.           this.total = avPlayer.duration  //  歌曲总共时间
19.           avPlayer.play();  // 调用play接口开始播放
20.           break;
21.         case 'playing':
22.           this.isPlaying = true //  开始播放
23.           this.flag = true   // 状态标记
24.           this.setTimer()   //  启动定时器
25.           break;
26.         case 'paused':
27.           this.isPlaying = false //未开始播放
28.           this.deleteTimer()  //暂停定时器
29.           avPlayer.pause()  //  调用pause接口暂停播放
30.           break;
31.         case 'stopped':
32.           avPlayer.reset(); // 调用reset接口初始化avplayer状态
33.           break;
34.         case 'released':
35.           break;
36.       }
37.     })
38.   }

复制代码

 2.3：获取音乐歌曲播放路径

1. //获取音乐播放路径
2.   async getAVPlayerUrl(){
3.     //创建播放实例对象
4.     let avPlayer = await media.createAVPlayer()
5.     this.setAVPlayerCallback(avPlayer)
6.     //获取上下文对象
7.     let context = getContext(this) as common.UIAbilityContext
8.     //获取播放文件
9.     let file = await context.resourceManager.getRawFd(this.songList[this.currentIndex].src)
10.     let avFile:media.AVFileDescriptor = {fd:file.fd,offset:file.offset,length:file.length}
11.     avPlayer.fdSrc = avFile
12.     return avPlayer
13.   }

复制代码

 这里的代码不懂的可以参考官网文档，即在我们获取到播放状态时候，添加了处理事件。 
官网链接：使用AVPlayer开发音频播放功能(ArkTS) (openharmony.cn)
2.4：初始化

1.   async aboutToAppear(){
2.     this.avPlayer = await this.getAVPlayerUrl()
3.   }

复制代码

2.5：定时器功能

1. //定时器(持续增加播放的时间)
2.   setTimer(){
3.     if(this.flag){
4.       this.time = setInterval(()=>{
5.         //如果当值大于总的播放时间的时候，那么就取消定时
6.         if(this.value++ > this.total){
7.           this.deleteTimer()
8.         }else {
9.           this.value++
10.         }
11.       },1)
12.     }
13.   }
15.   //取消定时器
16.   deleteTimer(){
17.     clearInterval(this.time)
18.     this.flag = false
19.   }
21.   //重置时间
22.   resetTime(){
23.     this.deleteTimer()
24.     this.value = 0
25.     this.total = 0
26.   }

复制代码

3：点击事件

1.           //上一首
2.           Image($r('app.media.control_last')).width(50).height(50)
3.             .onClick(async()=>{
4.               this.avPlayer.release()
5.               if(this.currentIndex-1 < 0){
6.                 this.currentIndex = this.songList.length -1
7.               }else {
8.                 this.currentIndex--
9.               }
10.               this.resetTime()
11.               this.avPlayer = await this.getAVPlayerUrl()
12.               this.avPlayer.play()
13.             })
14.           //暂停/播放
15.           Image(this.isPlaying ? $r('app.media.control_pause') : $r('app.media.control_play')).width(50).height(50)
16.             .onClick(()=>{
17.               this.isPlaying ? this.avPlayer.pause() : this.avPlayer.play()
18.             })
19.           //下一首
20.           Image($r('app.media.control_next')).width(50).height(50)
21.             .onClick(async()=>{
22.               this.avPlayer.release()
23.               if(this.currentIndex+1 > song.songList.length){
24.                 this.currentIndex = 0
25.               }else {
26.                 this.currentIndex++
27.               }
28.               this.resetTime()
29.               this.avPlayer = await this.getAVPlayerUrl()
30.               this.avPlayer.play()
31.             })

复制代码

 如果此时播放的歌曲是第一首的情况下，那么当用户点击播放上一首的时候，则播放歌曲列表的最后一首歌曲，播放下一首也是同理。
4：完备代码

1. import media from '@ohos.multimedia.media'import { songInfo } from '../model/songInfo'import common from '@ohos.app.ability.common'import { song } from '../mock/song'@Entry@Componentstruct Player {  //歌曲信息
2.   @StorageLink('song') songList:songInfo[]=[]
3.   //播放的歌曲索引
4.   @StorageLink('i') currentIndex:number = -1
5.   //现在播放的时间
6.   @State value:number = 0
7.   //总共播放的时间
8.   @State total:number = 0
9.   //是否开启定时器标志
10.   @State flag:boolean = false
11.   //定时器id
12.   @State time:number=0
13.   //是否正在播放
14.   @State isPlaying:boolean = false
15.   //音乐播放对象
16.   avPlayer:media.AVPlayer
17.   async aboutToAppear(){
18.     this.avPlayer = await this.getAVPlayerUrl()
19.   }  //定时器(持续增长播放的时间)  setTimer(){    if(this.flag){      this.time = setInterval(()=>{        if(this.value++ > this.total){          this.deleteTimer()        }else {          this.value++        }      },1)    }  }  //取消定时器  deleteTimer(){    clearInterval(this.time)    this.flag = false  }  //重置时间  resetTime(){    this.deleteTimer()    this.value = 0    this.total = 0  }  build() {    Column(){      //头部
20.       Row(){
21.         Column({space:5}){
22.           Text(new Date().toDateString()).fontSize(22).fontWeight(800)
23.           Text('1 YEAR ACO TODAY').fontSize(15).fontColor(Color.Gray).opacity(0.6)
24.         }
25.       }.width('100%').layoutWeight(1).justifyContent(FlexAlign.Center)      //空白占位
26.       Row(){
28.       }.width('100%').layoutWeight(1)      //歌曲图片和播放进度
29.       Row(){
30.         Stack(){
31.           Image(this.songList[this.currentIndex].pic)
32.             .width(170).height(170).borderRadius(100)
33.           Progress({value:this.value,total:this.total,type:ProgressType.Ring})
34.             .width(190).height(190).color("#ff49d7b8")
35.             .style({strokeWidth:8})
36.         }
37.       }.width('100%').layoutWeight(4).justifyContent(FlexAlign.Center)      //歌曲信息
38.       Row(){
39.         Column({space:10}){
40.           Text(this.songList[this.currentIndex].name).fontSize(25).fontWeight(900)
41.           Text(this.songList[this.currentIndex].author).fontSize(18).opacity(0.6)
42.           //喜欢，评论，分享
43.           Row(){
44.             Badge({count:this.songList[this.currentIndex].like,position:BadgePosition.RightTop,style:{badgeSize:20,badgeColor:Color.Red}}){
45.               Image($r('app.media.tool_like')).width(40).height(40)
46.             }
47.             Badge({count:this.songList[this.currentIndex].comment,position:BadgePosition.RightTop,style:{badgeSize:20,badgeColor:Color.Gray}}){
48.               Image($r('app.media.tool_comment')).width(40).height(40)
49.             }
50.             Image($r('app.media.nav_share')).width(40).height(40)
51.           }.width('100%').justifyContent(FlexAlign.SpaceAround).margin({top:10})
52.         }.width('100%').height('100%').justifyContent(FlexAlign.Center)
53.       }.width('100%').layoutWeight(2)      //歌曲菜单      Row(){        Row(){          //上一首
54.           Image($r('app.media.control_last')).width(50).height(50)
55.             .onClick(async()=>{
56.               this.avPlayer.release()
57.               if(this.currentIndex-1 < 0){
58.                 this.currentIndex = this.songList.length -1
59.               }else {
60.                 this.currentIndex--
61.               }
62.               this.resetTime()
63.               this.avPlayer = await this.getAVPlayerUrl()
64.               this.avPlayer.play()
65.             })
66.           //暂停/播放
67.           Image(this.isPlaying ? $r('app.media.control_pause') : $r('app.media.control_play')).width(50).height(50)
68.             .onClick(()=>{
69.               this.isPlaying ? this.avPlayer.pause() : this.avPlayer.play()
70.             })
71.           //下一首
72.           Image($r('app.media.control_next')).width(50).height(50)
73.             .onClick(async()=>{
74.               this.avPlayer.release()
75.               if(this.currentIndex+1 > song.songList.length){
76.                 this.currentIndex = 0
77.               }else {
78.                 this.currentIndex++
79.               }
80.               this.resetTime()
81.               this.avPlayer = await this.getAVPlayerUrl()
82.               this.avPlayer.play()
83.             })        }.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:10})      }.width('100%').layoutWeight(1)      //占位      Row(){      }.width('100%').layoutWeight(1).backgroundColor("#ff49d7b8")    }    .width('100%')    .height('100%')  }  //音乐播放状态
84.   setAVPlayerCallback(avPlayer:media.AVPlayer){
85.     // error回调监听函数,当avPlayer在操作过程中出现错误时调用 reset接口触发重置流程
86.     avPlayer.on('error', (err) => {
87.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
88.       avPlayer.reset(); // 调用reset重置资源，触发idle状态
89.     })
90.     avPlayer.on('stateChange',async(state:string)=>{
91.       switch (state){
92.         case 'idle': // 成功调用reset接口后触发该状态机上报
93.           avPlayer.release(); // 调用release接口销毁实例对象
94.           break;
95.         case 'initialized': // avplayer 设置播放源后触发该状态上报
96.           avPlayer.prepare(); // 调用prepare接口销毁实例对象
97.           break;
98.         case 'prepared': // prepare调用成功后上报该状态机
99.           this.value = avPlayer.currentTime // 播放的时间进度
100.           this.total = avPlayer.duration  //  歌曲总共时间
101.           avPlayer.play();  // 调用play接口开始播放
102.           break;
103.         case 'playing':
104.           this.isPlaying = true //  开始播放
105.           this.flag = true   // 状态标记
106.           this.setTimer()   //  启动定时器
107.           break;
108.         case 'paused':
109.           this.isPlaying = false //未开始播放
110.           this.deleteTimer()  //暂停定时器
111.           avPlayer.pause()  //  调用pause接口暂停播放
112.           break;
113.         case 'stopped':
114.           avPlayer.reset(); // 调用reset接口初始化avplayer状态
115.           break;
116.         case 'released':
117.           break;
118.       }
119.     })
120.   }  //获取音乐播放路径
121.   async getAVPlayerUrl(){
122.     //创建播放实例对象
123.     let avPlayer = await media.createAVPlayer()
124.     this.setAVPlayerCallback(avPlayer)
125.     //获取上下文对象
126.     let context = getContext(this) as common.UIAbilityContext
127.     //获取播放文件
128.     let file = await context.resourceManager.getRawFd(this.songList[this.currentIndex].src)
129.     let avFile:media.AVFileDescriptor = {fd:file.fd,offset:file.offset,length:file.length}
130.     avPlayer.fdSrc = avFile
131.     return avPlayer
132.   }}

复制代码

---

总结

使用AVPlayer开发音频播放，重点是掌握怎样获取播放路径（本地地点，网络地点）等，再根据歌曲的状态编写对应函数即可。

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