ArkTs鸿蒙开发入门学习——自定义音乐播放器（一）含源码

---

ArkTs鸿蒙开发入门学习——自定义音乐播放器（二）含源码-CSDN博客

ArkTs鸿蒙开发入门学习——自定义音乐播放器（三）含源码-CSDN博客

个人ArkTs鸿蒙开发入门学习总结，如何从零开发实现音乐播放器设计。效果如下：

1.创建项目

2.下载并选择播放器素材

图标：播放器、播放、上一首、下一首、暂停、循环01~循环03、音频列表；

举例：

创建三个资源存储文件夹：icons图标、images歌曲封面、music歌曲资源

将刚刚下载的资源拷贝到icons图标中，歌曲、专辑封面同理。

注意：ArkTs对中文不是很友好，建议将所有曲目图片改成英文或拼音。

index.ets

@Entry
@Component
struct Index {
  musicSrc:Resource=$rawfile('images/luxiaoyu.jpg') //定义图片
  musicName:Resource=$rawfile('music/luxiaoyu.mp3') //定义音频资源
  musicPlayer:string = "周杰伦"
  musicArrangement:string = ""
  musiclyric:string = ""
  musicCurrentSeconds:number = 0
  musicSeconds:number = 0
  musicState:boolean = false // false表示暂停状态，true表示播放状态

  videoController:VideoController = new VideoController()

  build() {
    Column({space:20}){
      Row(){
        Image(this.musicSrc)
          .width('90%')
        // 使用锐角,可以将方形的组件变成圆形
      }.width('100%').height('40%')
      .justifyContent(FlexAlign.Center)
      // 第二行
      Row(){
        Text(this.musicName)
          .fontSize(38)
        Image($rawfile('icons/like.png'))
          .width('24%')
      }.width('80%')
      .justifyContent(FlexAlign.SpaceBetween)
      // 第三行
      Row(){
        Text(this.musicPlayer)
          .fontSize(34)
          .fontColor('#C0C0C0')
      }.width('80%')
      .justifyContent(FlexAlign.Start)
      // 第四行
      Row(){
        Text(this.musicArrangement)
          .fontSize(38)
          .fontColor('#C0C0C0')
      }.width('80%')
      .justifyContent(FlexAlign.Start)


      Video({src:this.musicSrc,controller:this.videoController})
        .width('0%')
        .height('0%')
        .autoPlay(true)

      Progress({ value: this.musicCurrentSeconds, total: this.musicSeconds, type:
      // 使用进度条来代替原本的媒体播放器
      // value:表示当前播放的进度
      // total:表示总体的进度
      // type：表示进度条的样式，ProgressType.Linear,表示线性进度条
      ProgressType.Linear })
        .width('80%').height(10)

      Row(){
        Image($rawfile('icons/last.png'))
          .width('23%')
        Image($rawfile('icons/play.png'))
          .width('23%')
          .onClick(()=>{
            // 点击播放的时候,播放音频
            this.videoController.start() // 表示播放
            console.log("===========> 333333333")
          })
        Image($rawfile('icons/next.png'))
          .width('23%')
        Image($rawfile('icons/list.png'))
          .width('16%')
      }.width('90%')
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    // 设置属性
    // 宽和高，由于是主体布局
    .width('100%')
    .height('100%')
    // 主轴的布局方式
    .justifyContent(FlexAlign.Center)
    // 交叉轴的居中布局方式
    .alignItems(HorizontalAlign.Center)
    // 主体的背景颜色和背景图片
    .backgroundColor('#ffb1eaad')
  }
}

一个简易的播放器页面就设计好啦！！！

制作不易欢迎点赞支持，下一期我们一起学习组件简化和进度条更新~