【鸿蒙南向开发】基于OpenHarmony 4.1 release版本开发的网络音乐播放器

ArkUI 应用媒体 网络与连接
621 0
深开鸿-孙炼 只看该作者 发表于 2024-5-20 16:18:55

前言

在智能设备应用生态中，音乐播放器用户量巨大，用户活跃度非常高。在电子消费领域，主流的音乐播放器都是播放网络音乐的场景，播放本地音乐仅是一个使用率很低的功能。

然而，OpenHarmony 自带的音乐播放器，以及 Sample 仓的示例，都是播放本地音乐的场景，缺少播放网络音乐的开发示例。

因此，本文实现了一个播放网络音乐的音乐播放器应用实例，配合音乐网站服务，就可以进行网络音乐播放。

功能

播放器功能主要包括：

1、从服务器获取歌曲信息（播放器首页）

2、播放控制（播放详情页）

3、播放列表

架构

应用结构及其和服务器的交互关系：

本例主要实现了网络歌曲播放和信息展示，用户暂不关注。

实现

0、权限

ohos.permission.INTERNET
ohos.permission.KEEP_BACKGROUND_RUNNING

1、歌曲信息查询及展示

歌曲元数据：

export default class AudioItem {
  title: string = '';
  artist: string = '';
  id: string = '0'
  isPlaying: boolean = false;

  constructor(title: string, artist: string, id:string) {
    this.title = title;
    this.artist = artist;
    this.id = id;
  }
}

​

歌曲列表元数据：

import AudioItem from './AudioItem';

/**
 * List item data entity.
 */
export default class PlayList {
  /**
   * Text of list item.
   */
  title: string;
  /**
   * Image of list item.
   */
  img: Resource;
  /**
   * Other resource of list item.
   */
  others?: string;
  subTitle: string
  list: AudioItem[] = []

  constructor(title: string, img: Resource, subTitle: string, list: AudioItem[], others?: string) {
    this.title = title;
    this.img = img;
    this.others = others;
    this.subTitle = subTitle;
    this.list = list;
  }
}

获取歌曲列表：

import http from '@ohos.net.http'

getListFromServer() {
    this.playLists = [];
    try {
      let httpRequest = http.createHttp()
      httpRequest.request(ServerConstants.ALL_SONGS_URL, (err: Error, data: http.HttpResponse) => {
        if (!err) {
          console.info('HttpResponse Result:' + data.result);
          let aPlayingList: AudioItem[] = Array<AudioItem>();
          const jsonObject: object = JSON.parse(data.result as string);
          Object.keys(jsonObject).forEach((key) => {
            aPlayingList.push(new AudioItem(jsonObject[key].name, jsonObject[key].singer, jsonObject[key].id));
          });
          this.playLists.push(new PlayListData('全部歌曲', $r('app.media.icon'), aPlayingList.length + '首',
            aPlayingList, ''));
        } else {
          console.info('HttpResponse error:' + JSON.stringify(err));
        }
      });
    } catch (err) {
      console.info('HttpRequest error:' + JSON.stringify(err));
    }
  }

展示歌曲列表：

              Grid() {
                ForEach(this.playLists, (item: PlayListData) => {
                  GridItem() {
                    PlayListItem({ item })
                  }
                })
              }
              .margin(12)
              .columnsTemplate('1fr 1fr 1fr')
              .columnsGap(8)
              .rowsGap(12)
              .width('90%')

使用网络 URL 展示歌曲封面：

      Column() {
        Row() {
          Text(this.item.subTitle)
            .fontSize(16)
            .margin(8)
            .fontColor(Color.White)
          Blank()
          Image($r('app.media.ic_public_play_white'))
            .width(20)
            .height(20)
            .margin(8)
        }
        .width('100%')
      }
      .borderRadius(12)
      .backgroundImage(this.item.list.length > 0 ? ServerConstants.SONG_IMAGE_URL + this.item.list[0].id : this.item.img)
      .backgroundImageSize(ImageSize.Cover)
      .width(120)
      .height(120)
      .justifyContent(FlexAlign.SpaceBetween)

2、播放控制，播放器后台任务注册

import media