目录
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)判断播放状态,实现点击播放按钮后,出现暂停按钮,点击暂停按钮后出现播放按钮。
标签:index,鸿蒙,media,oss,音乐,AvPlayerManager,width,music,yjy From: https://blog.csdn.net/m0_74748236/article/details/141719230