鸿蒙开发—黑马云音乐之music页面播放音乐（下）

news2024/9/22 4:18:12

目录

1.暂停播放和恢复播放

2.上一首、下一首功能

1.暂停播放和恢复播放

src/main/ets/services/AvPlayerManager.ets：

export interface songItemType {
  img: string
  name: string
  author: string
  url: string
  id: string
}

//作用：负责管理播放对象的各种方法封装的
import media from '@ohos.multimedia.media'
import emitter from '@ohos.events.emitter'

//定义并导出播放对象管理类
export class AvPlayerManager {
  static avPlayer: media.AVPlayer = Object()

  //   1.0 封装初始化AvPlayer对象的方法
  // init方法将来在ets页面的aboutToAppear方法中调用
  static async init() {
    // 创建对象并且保存到全局的静态变量中
    AvPlayerManager.avPlayer = await media.createAVPlayer()

    //  监听状态的改变
    AvPlayerManager.avPlayer.on('stateChange', (state) => {
      //  查看state的状态
      console.log('mylog', '当前状态：', state)
      // 准备播放
      if (state == 'initialized') {
        AvPlayerManager.avPlayer.prepare()
      }

      // 播放
      if (state == 'prepared') {
        AvPlayerManager.avPlayer.play()
      }
    })
  }

  //  2.0 设置播放源(并且要能够实现重置)
  static async playMusic(music: songItemType) {
    console.log('mylog,播放歌曲:', music.name, 'url=', music.url)
    await AvPlayerManager.avPlayer.reset() //重置播放对象使其空闲
    AvPlayerManager.avPlayer.url = music.url //给播放对象设置播放源
  }

  // 3.0 设置暂停方法
  static async pause(){
    AvPlayerManager.avPlayer.pause()
  }

  // 4.0 设置恢复播放方法
  static async reWork(){
    AvPlayerManager.avPlayer.play()
  }

  //  5. 0负责使用emitter发送数据的
  static sendMusicData(music: songItemType) {
    /*
     * {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
      id: '0000'
    }
     * */
    // 注意点：emitter只能传字符串格式的数据，所以我们需要JSON.stringify(music)转成json字符串
    emitter.emit({ eventId: 0 }, { data: { item: JSON.stringify(music) } })
  }
}

方法实现如下：

// 3.0 设置暂停方法
  static async pause(){
    AvPlayerManager.avPlayer.pause()
  }

  // 4.0 设置恢复播放方法
  static async reWork(){
    AvPlayerManager.avPlayer.play()
  }

之后的思路在播放按钮图片增加onclik属性，调用该方法就可以实现暂停和播放。

src/main/ets/pages/Index.ets：

import { FindPage } from './FindPage'
import { MimePage } from './mimePage'
import { MomentPage } from './momentPage'
import { MuiscPage } from './muiscPage'
import { RecommendPage } from './recommendPage'
import emitter from '@ohos.events.emitter'
import { AvPlayerManager } from '../services/AvPlayerManager'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0 //页面加载的时候就应该把第一个tab点亮
  @State img: string = ''
  @State name: string = ''
  @State author: string = ''

  aboutToAppear() {
    // 立哨兵->监听是否有消息发送过来
    emitter.on({ eventId: 0 }, (rec) => {
      console.log('mylog->', JSON.stringify(rec.data['item']))
      // rec.data['item'] -> 获取到的是music这个对象的字符串形式（JSON)
      let obj = JSON.parse(rec.data['item']) //将json字符串转成对象

      this.img = obj['img']
      this.name = obj['name']
      this.author =obj['author']
    })
  }

  @Builder
  tabBuilder(text: string, img: Resource, index: number) {

    // 三元表达式
    // 条件成立?取值1:取值2
    Column({ space: 5 }) {
      Image(img)
        .width(25)
        .borderRadius(25)
        .backgroundColor(this.currentIndex == index ? '#d2577c' : '')
        .padding(2)
        .fillColor(this.currentIndex == index ? Color.White : '#4bb0c4')

      Text(text)
        .fontColor(this.currentIndex == index ? '#d2577c' : '#4bb0c4')
    }
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      //  底部导航栏
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          RecommendPage()
        }
        .tabBar(this.tabBuilder('推荐', $r('app.media.ic_recommend'), 0))
        .backgroundColor(Color.Black)

        TabContent() {
          FindPage()
        }
        .tabBar(this.tabBuilder('发现', $r('app.media.ic_find'), 1))
        .backgroundColor(Color.Black)

        TabContent() {
          MuiscPage()
        }
        .tabBar(this.tabBuilder('muisc', $r('app.media.ic_logo'), 2))
        .backgroundColor(Color.Black)

        TabContent() {
          MomentPage()
        }
        .tabBar(this.tabBuilder('动态', $r('app.media.ic_moment'), 3))
        .backgroundColor(Color.Black)

        TabContent() {
          MimePage()
        }
        .tabBar(this.tabBuilder('我的', $r('app.media.ic_mine'), 4))
        .backgroundColor(Color.Black)

      }
      .onChange((index: number) => {
        console.log('当前索引', index)
        this.currentIndex = index
      })
      .backgroundColor('#ff3b3b3b')

      //  播放歌曲信息后面完成
      Row() {
        Row({ space: 10 }) {
          Image(this.img)
            .height(50)

          Column() {
            Text(this.name)
              .width('100%')
              .fontColor(Color.White)

            Text(this.author)
              .width('100%')
              .fontColor(Color.White)
              .fontSize(12)
          }

        }
        .padding({ left: 10 })
        .layoutWeight(2)
        .height('100%')

        Row() {
          Image($r('app.media.ic_prev'))
            .height(25)
            .fillColor('#4bb0c4')

          /*播放按钮*/
          Image($r('app.media.ic_play'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
              AvPlayerManager.reWork()
            })

          // 暂停按钮
          Image($r('app.media.ic_paused'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
            //  对播放对象发出一个暂停的指令
              AvPlayerManager.pause()
            })

          Image($r('app.media.ic_next'))
            .height(25)
            .fillColor('#4bb0c4')
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .layoutWeight(1)
        .height('100%')
      }
      .backgroundColor(Color.Black)
      .height(60)
      .margin({ bottom: 55 })

    }
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

 

index增加代码如下：

/*播放按钮*/
          Image($r('app.media.ic_play'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
              AvPlayerManager.reWork()
            })

// 暂停按钮
          Image($r('app.media.ic_paused'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
            //  对播放对象发出一个暂停的指令
              AvPlayerManager.pause()
            })

2.上一首、下一首功能

src/main/ets/services/AvPlayerManager.ets：

export interface songItemType {
  img: string
  name: string
  author: string
  url: string
  id: string
}

//作用：负责管理播放对象的各种方法封装的
import media from '@ohos.multimedia.media'
import emitter from '@ohos.events.emitter'

//定义并导出播放对象管理类
export class AvPlayerManager {
  static avPlayer: media.AVPlayer = Object()
  static index: number = 0 //表示第一首歌
  static songs: songItemType[] = [] //全局变量-》在此类所有方法里面都可以用，外部任何页面也可以调用

  //   1.0 封装初始化AvPlayer对象的方法
  // init方法将来在ets页面的aboutToAppear方法中调用
  static async init(musicList: songItemType[]) {
    // 将局部变量musicList赋值给全局变量songs
    AvPlayerManager.songs = musicList

    // 创建对象并且保存到全局的静态变量中
    AvPlayerManager.avPlayer = await media.createAVPlayer()

    //  监听状态的改变
    AvPlayerManager.avPlayer.on('stateChange', (state) => {
      //  查看state的状态
      console.log('mylog', '当前状态：', state)
      // 准备播放
      if (state == 'initialized') {
        AvPlayerManager.avPlayer.prepare()
      }

      // 播放
      if (state == 'prepared') {
        AvPlayerManager.avPlayer.play()
      }
    })
  }

  //  2.0 设置播放源(并且要能够实现重置)
  static async playMusic(music: songItemType) {
    console.log('mylog,播放歌曲:', music.name, 'url=', music.url)
    await AvPlayerManager.avPlayer.reset() //重置播放对象使其空闲
    AvPlayerManager.avPlayer.url = music.url //给播放对象设置播放源
  }

  // 3.0 设置暂停方法
  static async pause() {
    AvPlayerManager.avPlayer.pause()
  }

  // 4.0 设置恢复播放方法
  static async reWork() {
    AvPlayerManager.avPlayer.play()
  }

  // 播放下一首
  static async next() {
    // 如果当前是最后一首，应该从第一首播
    if(AvPlayerManager.index == AvPlayerManager.songs.length -1){
      AvPlayerManager.index = -1  //从第一首歌播放
    }
    // 针对索引自增1
    AvPlayerManager.index++

    //  根据新的索引号，取得数组中的最新的歌曲数据
    let music = AvPlayerManager.songs[AvPlayerManager.index]

    //   播放新歌曲
    AvPlayerManager.playMusic(music)

    //  发送消息给index.ets
    AvPlayerManager.sendMusicData(music)
  }

  // 播放上一首
  static async pre() {
    // 考虑边界问题：当index已经是0了，就不能再减1了
    if (AvPlayerManager.index == 0) {
      //  从最后一首歌播(获取到数组长度赋值给)AvPlayerManager.index
      AvPlayerManager.index = AvPlayerManager.songs.length
    }
    // 针对索引自减1
    AvPlayerManager.index--

    //  根据新的索引号，取得数组中的最新的歌曲数据
    let music = AvPlayerManager.songs[AvPlayerManager.index]

    //   播放新歌曲
    AvPlayerManager.playMusic(music)

    //  发送消息给index.ets
    AvPlayerManager.sendMusicData(music)
  }

  //  5. 0负责使用emitter发送数据的
  static sendMusicData(music: songItemType) {
    /*
     * {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
      id: '0000'
    }
     * */
    // 注意点：emitter只能传字符串格式的数据，所以我们需要JSON.stringify(music)转成json字符串
    emitter.emit({ eventId: 0 }, { data: { item: JSON.stringify(music) } })
  }
}

在AvPlayerManager.ets内增加

static songs: songItemType[] = []

在此类所有方法里面都可以用，外部任何页面也可以调用

  static async init(musicList: songItemType[]) {
    // 将局部变量musicList赋值给全局变量songs
    AvPlayerManager.songs = musicList

将传来的musicList赋值给AvPlayerManager.songs，获取当前的歌曲信息。

播放下一首方法：

static async next() {
    // 如果当前是最后一首，应该从第一首播
    if(AvPlayerManager.index == AvPlayerManager.songs.length -1){
      AvPlayerManager.index = -1  //从第一首歌播放
    }
    // 针对索引自增1
    AvPlayerManager.index++

    //  根据新的索引号，取得数组中的最新的歌曲数据
    let music = AvPlayerManager.songs[AvPlayerManager.index]

    //   播放新歌曲
    AvPlayerManager.playMusic(music)

    //  发送消息给index.ets
    AvPlayerManager.sendMusicData(music)
  }

播放上一首方法：

static async pre() {
    // 考虑边界问题：当index已经是0了，就不能再减1了
    if (AvPlayerManager.index == 0) {
      //  从最后一首歌播(获取到数组长度赋值给)AvPlayerManager.index
      AvPlayerManager.index = AvPlayerManager.songs.length
    }
    // 针对索引自减1
    AvPlayerManager.index--

    //  根据新的索引号，取得数组中的最新的歌曲数据
    let music = AvPlayerManager.songs[AvPlayerManager.index]

    //   播放新歌曲
    AvPlayerManager.playMusic(music)

    //  发送消息给index.ets
    AvPlayerManager.sendMusicData(music)
  }

src/main/ets/pages/muiscPage.ets：

import { AvPlayerManager, songItemType } from '../services/AvPlayerManager'

@Entry
@Component
export struct MuiscPage {
  // 歌曲列表
  @State songs: songItemType[] = [
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.m4a',
      id: '0000'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.mp3',
      id: '0001'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.mp3',
      id: '0002'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.m4a',
      id: '0003'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.mp3',
      id: '0004'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.mp3',
      id: '0005'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.m4a',
      id: '0006'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.m4a',
      id: '0007'
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.m4a',
      id: '0008'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.m4a',
      id: '0009'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.m4a',
      id: '0010'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.mp3',
      id: '0011'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.m4a',
      id: '0012'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
      name: '月半小夜曲',
      author: '李克勤',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.mp3',
      id: '0013'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
      name: 'Rolling in the Deep',
      author: 'Adele',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.m4a',
      id: '0014'
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
      name: '海阔天空',
      author: 'Beyond',
      url: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.m4a',
      id: '0015'
    }
  ]

  async aboutToAppear() {
    await AvPlayerManager.init(this.songs)
  }

  build() {
    Column() {
      // 信息区域
      Column({ space: 40 }) {
        // 喜欢的音乐
        Row({ space: 10 }) {
          Column() {
            Image($r('app.media.ic_favorite'))
              .width(80)
              .fillColor('#ff5286')
          }
          .justifyContent(FlexAlign.Center)
          .width(100)
          .height(100)
          .backgroundColor(Color.White)
          .borderRadius(10)

          // 文字信息
          Column({ space: 10 }) {
            Text('我喜欢的音乐')
              .fontColor(Color.White)
              .width('100%')
              .fontWeight(700)

            Text('黑马程序员')
              .fontColor('#ffb7b8ba')
              .width('100%')
              .fontSize(12)
          }
        }
        .width('100%')
        // 三个按钮
        Row() {
          Button({ type: ButtonType.Normal }) {
            Row({ space: 10 }) {
              Image($r('app.media.ic_share'))
                .width(20)
                .fillColor('#d2577c')

              Text('分享').fontColor(Color.White)
                .fontSize(12)
            }
          }
          .backgroundColor('#ff363737')
          .width(90)
          .height(40)
          .borderRadius(20)

          Button({ type: ButtonType.Normal }) {
            Row({ space: 10 }) {
              Image($r('app.media.ic_comment'))
                .width(20)
                .fillColor('#d2577c')

              Text('评论').fontColor(Color.White).fontSize(12)
            }
          }
          .backgroundColor('#ff363737')
          .width(90)
          .height(40)
          .borderRadius(20)

          Button({ type: ButtonType.Normal }) {
            Row({ space: 10 }) {
              Image($r('app.media.ic_collect'))
                .width(20)
                .fillColor('#d2577c')

              Text('收藏').fontColor(Color.White).fontSize(12)
            }
          }
          .backgroundColor('#ff363737')
          .width(90)
          .height(40)
          .borderRadius(20)

        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .padding({ top: 30, right: 20, bottom: 30, left: 20 })
      .width('100%')
      // .backgroundColor(Color.Pink)
      .layoutWeight(1)
      .radialGradient({
        center: ['90%', '-10%'], // 设置中心点
        radius: '150%', // 设置半径
        colors: [ // 设置颜色的
          ['#5c4111', 0.2],
          [Color.Transparent, 1] //Color.Transparent表示透明色
        ]
      })

      // 播放列表
      Column() {
        // 全部播放容器
        Row({ space: 5 }) {
          Image($r('app.media.ic_play'))
            .width(15)
            .fillColor('#d2577c')
          Text('播放全部(16)')
            .fontColor(Color.White)
            .fontSize(12)
        }
        .width('100%')
        .padding(10)

        //   歌曲列表
        List() {
          ForEach(this.songs, (item: songItemType, index: number) => {
            if (index < 3) {
              // 每一首歌曲的信息布局（带图片）
              ListItem() {
                Row() {
                  // 如果是第0个，则显示黄色文字编号
                  if (index == 0) {
                    Text((index + 1).toString())
                      .fontColor(Color.Yellow)
                      .width(30)
                      .textAlign(TextAlign.Center)
                  }
                  // 如果是第1个，则显示红色文字编号
                  if (index == 1) {
                    Text((index + 1).toString())
                      .fontColor('#d2577c')
                      .width(30)
                      .textAlign(TextAlign.Center)
                  }
                  // 如果是第2个，则显示蓝色文字编号
                  if (index == 2) {
                    Text((index + 1).toString())
                      .fontColor('#0094ff')
                      .width(30)
                      .textAlign(TextAlign.Center)
                  }

                  Row({ space: 10 }) {
                    Image(item.img)
                      .width(30)
                      .borderRadius(5)
                    Column() {
                      Text(item.name)
                        .fontColor('#ff9fa0a1')
                        .fontSize(12)
                        .width('100%')

                      Text(item.author)
                        .fontColor('#ff9fa0a1')
                        .fontSize(10)
                        .width('100%')
                    }
                  }
                  .layoutWeight(1)

                  Image($r('app.media.ic_more'))
                    .fillColor(Color.White)
                    .width(15)
                }
                .width('100%')
                .padding({ top: 8, bottom: 8 })
              }
              .onClick(() => {
                //  用户点击就将此歌曲对象传入avplayerManager.playMusic()
                AvPlayerManager.playMusic(item)
                // 同步数据
                AvPlayerManager.sendMusicData(item)

                // 将用户点击的歌曲索引赋值给播放器管理者中的索引
                AvPlayerManager.index = index
              })

            } else {
              // 每一首歌曲的信息布局（不带图片）
              ListItem() {
                Row() {
                  Text((index + 1).toString())
                    .fontColor(Color.White)
                    .width(30)
                    .textAlign(TextAlign.Center)
                  Row({ space: 10 }) {
                    Column() {
                      Text(item.name)
                        .fontColor('#ff9fa0a1')
                        .fontSize(12)
                        .width('100%')

                      Text(item.author)
                        .fontColor('#ff9fa0a1')
                        .fontSize(10)
                        .width('100%')
                    }
                  }
                  .layoutWeight(1)

                  Image($r('app.media.ic_more'))
                    .fillColor(Color.White)
                    .width(15)
                }
                .width('100%')
                .padding({ top: 8, bottom: 8 })
              }
              .onClick(() => {
                //  用户点击就将此歌曲对象传入avplayerManager.playMusic()
                AvPlayerManager.playMusic(item)
                // 同步数据
                AvPlayerManager.sendMusicData(item)
                // 将用户点击的歌曲索引赋值给播放器管理者中的索引
                AvPlayerManager.index = index
              })
            }
          })

          // 增加ListItem来防止最后一个歌曲看不到的问题
          ListItem() {
            Text('已经到低了~~~~')
              .fontColor(Color.White)
              .width('100%')
              .textAlign(TextAlign.Center)
          }
          .height(60)
          .padding({ bottom: 40 })
        }

      }
      .width('100%')
      .backgroundColor('#ff333333')
      .layoutWeight(2)
      .borderRadius({ topLeft: 10, topRight: 10 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Black)
  }
}

  async aboutToAppear() {
    await AvPlayerManager.init(this.songs)
  }

调用AvPlayerManager对象的init方法，播放歌曲。

src/main/ets/pages/Index.ets：

import { FindPage } from './FindPage'
import { MimePage } from './mimePage'
import { MomentPage } from './momentPage'
import { MuiscPage } from './muiscPage'
import { RecommendPage } from './recommendPage'
import emitter from '@ohos.events.emitter'
import { AvPlayerManager } from '../services/AvPlayerManager'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0 //页面加载的时候就应该把第一个tab点亮
  @State img: string = ''
  @State name: string = ''
  @State author: string = ''
  @State isplaying: boolean = true // 这个状态变量用来控制页面的播放和暂停按钮显示的 false:表示当前暂停  true：正在播放歌曲

  aboutToAppear() {
    // 立哨兵->监听是否有消息发送过来
    emitter.on({ eventId: 0 }, (rec) => {
      console.log('mylog->', JSON.stringify(rec.data['item']))
      // rec.data['item'] -> 获取到的是music这个对象的字符串形式（JSON)
      let obj = JSON.parse(rec.data['item']) //将json字符串转成对象

      this.img = obj['img']
      this.name = obj['name']
      this.author = obj['author']
    })
  }

  @Builder
  tabBuilder(text: string, img: Resource, index: number) {

    // 三元表达式
    // 条件成立?取值1:取值2
    Column({ space: 5 }) {
      Image(img)
        .width(25)
        .borderRadius(25)
        .backgroundColor(this.currentIndex == index ? '#d2577c' : '')
        .padding(2)
        .fillColor(this.currentIndex == index ? Color.White : '#4bb0c4')

      Text(text)
        .fontColor(this.currentIndex == index ? '#d2577c' : '#4bb0c4')
    }
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      //  底部导航栏
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          RecommendPage()
        }
        .tabBar(this.tabBuilder('推荐', $r('app.media.ic_recommend'), 0))
        .backgroundColor(Color.Black)

        TabContent() {
          FindPage()
        }
        .tabBar(this.tabBuilder('发现', $r('app.media.ic_find'), 1))
        .backgroundColor(Color.Black)

        TabContent() {
          MuiscPage()
        }
        .tabBar(this.tabBuilder('muisc', $r('app.media.ic_logo'), 2))
        .backgroundColor(Color.Black)

        TabContent() {
          MomentPage()
        }
        .tabBar(this.tabBuilder('动态', $r('app.media.ic_moment'), 3))
        .backgroundColor(Color.Black)

        TabContent() {
          MimePage()
        }
        .tabBar(this.tabBuilder('我的', $r('app.media.ic_mine'), 4))
        .backgroundColor(Color.Black)

      }
      .onChange((index: number) => {
        console.log('当前索引', index)
        this.currentIndex = index
      })
      .backgroundColor('#ff3b3b3b')

      //  播放歌曲信息后面完成
      Row() {
        Row({ space: 10 }) {
          Image(this.img)
            .height(50)

          Column() {
            Text(this.name)
              .width('100%')
              .fontColor(Color.White)

            Text(this.author)
              .width('100%')
              .fontColor(Color.White)
              .fontSize(12)
          }

        }
        .padding({ left: 10 })
        .layoutWeight(2)
        .height('100%')

        Row() {
          // 上一首
          Image($r('app.media.ic_prev'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
              AvPlayerManager.pre()
            })

          if (this.isplaying == false) {
            /*播放按钮*/
            Image($r('app.media.ic_play'))
              .height(25)
              .fillColor('#4bb0c4')
              .onClick(() => {
                AvPlayerManager.reWork()

                //将isplaying状态变量的值改为 true
                this.isplaying = true
              })
          }

          if (this.isplaying == true) {
            // 暂停按钮
            Image($r('app.media.ic_paused'))
              .height(25)
              .fillColor('#4bb0c4')
              .onClick(() => {
                //  对播放对象发出一个暂停的指令
                AvPlayerManager.pause()

                //  将isplaying状态变量的值改为false
                this.isplaying = false
              })
          }

          // 下一首
          Image($r('app.media.ic_next'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
              AvPlayerManager.next()
            })
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .layoutWeight(1)
        .height('100%')
      }
      .backgroundColor(Color.Black)
      .height(60)
      .margin({ bottom: 55 })

    }
    .height('100%')
    .backgroundColor(Color.Black)
  }
}

 // 上一首
          Image($r('app.media.ic_prev'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
              AvPlayerManager.pre()
            })

在index页面的播放栏的上一首按钮图片中增加属性，调用AvPlayerManager.pre()，实现上一首播放。

 // 下一首
          Image($r('app.media.ic_next'))
            .height(25)
            .fillColor('#4bb0c4')
            .onClick(()=>{
              AvPlayerManager.next()
            })
        }

同样，给播放栏的下一首按钮图片中增加属性，调用AvPlayerManager.next()，实现下一首播放。

提一嘴，Index页面使用if (this.isplaying == false)判断播放状态，实现点击播放按钮后，出现暂停按钮，点击暂停按钮后出现播放按钮。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2091180.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows环境CP Editor安装使用方法

Windows环境CP Editor安装使用方法

step0&#xff1a;下载软件包&#xff0c;附件有已经下载的安装包 Download CP Editor | CP Editor step1&#xff1a;下载后双击安装即可(记住安装路径) step2&#xff1a;找到安装目录下的cpeditor\mingw64\bin配置环境变量 step3&#xff1a;双击打开即可使用
阅读更多...
pikachu 靶场环境搭建 完整版（手把手保姆级教学）

pikachu 靶场环境搭建 完整版（手把手保姆级教学）

文章目录 一、pikachu靶场简介二、靶场环境准备三、pikachu 靶场搭建过程1、phpstudy 配置2、MySQL环境变量配置&#xff08;非必要&#xff09;3、pikachu 靶场配置4、靶场连接测试 四、pikachu靶场搭建时数据库连接问题等其它问题(Warning: mysqli_connect(): (HY000/1049): …
阅读更多...
全球城市多边形和点数据集 (GUPPD)

全球城市多边形和点数据集 (GUPPD)

全球城市多边形和点数据集 (GUPPD) 第 1 版是一套包含 123,034 个城市定居点的全球数据集&#xff0c;包含 1975-2030 年期间的地名和人口&#xff0c;每五年更新一次。该数据集建立在欧盟委员会联合研究中心 (JRC) 2015 年全球人类定居点 (GHS) 城市中心数据库 (UCDB) 的基础上…
阅读更多...
【手撕数据结构】二叉树oj题

【手撕数据结构】二叉树oj题

目录 单值二叉树题目描述题目思路及代码 相同的树题目描述题目思路及代码 对称二叉树题目描述题目思路及代码 另一棵树的子树题目描述题目思路及代码 二叉树的前序遍历题目描述题目思路及代码 二叉树的构建与遍历题目描述题目思路及代码 单值二叉树 题目描述 题目思路及代码 …
阅读更多...
模型 情境领导力

模型 情境领导力

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。灵活变通&#xff0c;因势利导的领导艺术。 1 情境领导力的应用 1.1 软件项目的成功转型 在一家知名的软件开发公司中&#xff0c;有一个由资深工程师李伟领导的团队&#xff0c;负责开发一款新的客…
阅读更多...
Mac下的压缩包和Win看到的不一样怎么办 Mac压缩后Win电脑看文件名会乱码

Mac下的压缩包和Win看到的不一样怎么办 Mac压缩后Win电脑看文件名会乱码

在当今多平台的数字工作环境中&#xff0c;Mac和Windows用户常常需要交换文件&#xff0c;但有时候会遇到一些兼容性问题。特别是在处理压缩文件时&#xff0c;Mac用户创建的压缩包在Windows系统中打开时&#xff0c;常常会遇到文件名乱码的问题。本文将详细讨论“Mac下的压缩包…
阅读更多...
基于AI大模型开发上层应用常见的技术栈

基于AI大模型开发上层应用常见的技术栈

基于AI大模型的上层应用开发&#xff0c;技术栈要求通常包括以下几个方面&#xff1a; 编程语言&#xff1a;Python是AI领域的主要编程语言&#xff0c;具有大量的库和框架支持&#xff0c;是大模型开发的首选语言 。TypeScript也是不错的选择&#xff0c;很多模型对外提供类似…
阅读更多...
postman学习笔记：从入门到精通

postman学习笔记：从入门到精通

postman入门到精通 一、postman下载安装与更换主题1、下载与安装2、更换主题&#xff08;Themes&#xff09; 二、页面详解1、顶部工具栏2、左侧栏3、中部栏3.1 请求部分页签介绍3.2 响应部分页签介绍 三、管理用例四、设置环境变量和全局变量1、添加环境变量2、添加全局变量 五…
阅读更多...
编码666

编码666

unicode&#xff0c;将每种语言的每种格式都用一个二进制编码来表示&#xff0c;1到3个字节 问题&#xff1a;1.系统怎么知道是ASCII还是Unicode编码&#xff0c;怎么直到一个字符是一字节还是多个字节 2.很多字符需要2字节或更多&#xff0c;存储空间的要求会更高 UTF-8&…
阅读更多...
AIGC提示词（3）：AI的创造力之谜：相同提示词，不同内容

AIGC提示词（3）：AI的创造力之谜：相同提示词，不同内容

引言 在这个数字化的时代&#xff0c;人工智能生成内容&#xff08;AIGC&#xff09;已经变得无处不在。想象一下&#xff0c;只需输入几个关键词&#xff0c;AI就能创作出各种内容&#xff0c;无论是文字、图片&#xff0c;还是其他形式。但这里有个有趣的问题&#xff1a;如…
阅读更多...
简易计算器（源码+程序）

简易计算器（源码+程序）

效果演示&#xff1a; 下载地址&#xff1a; 简易计算器&#xff08;源码程序&#xff09;&#xff1a;https://download.csdn.net/download/wgxds/89696805 vb.net开发安卓软件的方法&#xff1a;[原创]vb.net开发安卓软件的方法_vbnet开发安卓-CSDN博客 免费资源下载&#x…
阅读更多...
【系统架构师软考】计算机网络知识（四）

【系统架构师软考】计算机网络知识（四）

目录 奈奎斯特定理 奈奎斯特速率 ​编辑 香农定理 物联网(IOT) ​编辑 TCP 和 UDP HTTP、HTTPS 和 WebSocket ICMP、IGMP、OSPF协议 SNMP ​编辑 DHCP协议和DNS协议 ​编辑 RAP和ARAP TFTP、FTP和 SFTP POP3, IMAP,SMTP 其他网络协议 无线网络协议 IP地址的格…
阅读更多...
【Android】MotionLayout实现动画效果

【Android】MotionLayout实现动画效果

【Android】MotionLayout实现开场动画 在移动应用开发中&#xff0c;动画不仅仅是美化界面的工具&#xff0c;它更是提升用户体验的关键手段。Android 平台一直以来都提供了丰富的动画框架&#xff0c;但随着应用复杂性的增加&#xff0c;开发者对动画的需求也变得更加复杂和多…
阅读更多...
【Navicat最新版简体中文版破解激活永久详细教程】

【Navicat最新版简体中文版破解激活永久详细教程】

2024 Navicat Premium最新版简体中文版破解激活永久图文详细教程 1.未安装过的用户可直接跳过该步骤&#xff0c;如果已安装Navicat&#xff0c;记得先卸载干净&#xff0c;防止破解失效&#xff0c;卸载完成后执行补丁压缩包中的Navicat.bat脚本&#xff08;一闪而过表示正常&…
阅读更多...
背包问题——分组背包

背包问题——分组背包

样题&#xff1a; 枚举第i组选第几个物品 #include <bits/stdc.h> using namespace std; const int N 110; int f[N],w[N][N],v[N][N],s[N];int main() {ios::sync_with_stdio(0),cin.tie(0),cout.tie(0);int n,V,cnt 0; cin >> n >> V;for(int i 1; i &…
阅读更多...
HTML爱心流星雨

HTML爱心流星雨

目录 写在前面 完整代码 代码分析 推荐系列 写在后面 写在前面 如何用HTML代码实现爱心流星雨的动态效果&#xff1f;本期博主将带着大家探索神奇的HTML。 完整代码 <!doctype html> <html> <head><meta charset"utf-8"><title&g…
阅读更多...
axios取消请求CancelToken的原理解析及用法示例

axios取消请求CancelToken的原理解析及用法示例

文章目录 一、axios的实例与请求流程二、CancelToken 的作用三、CancelToken 的实现原理四、取消请求的流程五、CancelToken用法六、利用拦截器取消请求1、axios请求拦截器2、axios响应拦截器3、利用路由导航守卫取消请求 一、axios的实例与请求流程 下图是axios实例属性的简图…
阅读更多...
Scrach游戏制作：时机的活儿~（可自改难度）（免费源码）

Scrach游戏制作：时机的活儿~（可自改难度）（免费源码）

游戏演示&#xff1a; 这是个时机di活儿~_哔哩哔哩_bilibili 作品制作流程&#xff1a; 自由移动不断切换造型传送&#xff08;碰撞检测&#xff09;火车&&棒球的旋转增加关卡难度游戏结束 1. 自由移动&#xff08;对猫猫编程&#xff09; 自由移动是让角色能够朝上下…
阅读更多...
Camtasia 2024 v2024.0.6 for Mac 中文版 屏幕录像视频录制编辑软件

Camtasia 2024 v2024.0.6 for Mac 中文版 屏幕录像视频录制编辑软件

TechSmith Camtasia for Mac 中文版 是一款专业的屏幕录像及视频录制编辑软件。以业界领先的清晰度重新定义了屏幕录制&#xff0c;将屏幕、摄像头、麦克风和系统音频捕获为独立音轨&#xff0c;实现终极控制和灵活性。通过拖放过渡、标注等功能&#xff0c;以及改进的工作流程…
阅读更多...
WCT系列（四）：BLASTSyncEngine

WCT系列（四）：BLASTSyncEngine

WCT系列&#xff08;一&#xff09;&#xff1a;WindowContainerTransaction类详解 WCT系列&#xff08;二&#xff09;&#xff1a;SyncTransactionQueue类详解 WCT系列&#xff08;三&#xff09;&#xff1a;WindowOrganizerController WCT系列&#xff08;四&#xff09;&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023