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