developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhaojunkai
bc4d0dac 1 parent 95f69b4f

音频详情页-创建音频实例

Inline Side-by-side
Showing 4 changed files with 144 additions and 66 deletions
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="32" height="32" viewBox="0 0 32 32"><g><g><path d="M6.915255046875,4.7314907592749025L11.848588046875001,5.964826319274902C11.937618046875,5.987086319274902,12.000078046875,6.067076319274903,12.000078046875,6.158856319274903L12.000078046875,28.413216319274902C12.000078046875,28.5433163192749,11.877808046875,28.638816319274902,11.751578046875,28.6072163192749L6.818241046875,27.3739163192749C6.729207546875,27.351616319274903,6.666748046875,27.2716163192749,6.666748046875,27.179916319274902L6.666748046875,4.925519319274902C6.666748046875,4.795405019274902,6.789026046875,4.6999334192749025,6.915255046875,4.7314907592749025M20.248548046875,4.7314907592749025L25.181848046875,5.964826319274902C25.270848046875,5.987086319274902,25.333348046875,6.067076319274903,25.333348046875,6.158856319274903L25.333348046875,28.413216319274902C25.333348046875,28.5433163192749,25.211048046875,28.638816319274902,25.084848046875,28.6072163192749L20.151448046875,27.3739163192749C20.062448046874998,27.351616319274903,20.000048046875,27.2716163192749,20.000048046875,27.179916319274902L20.000048046875,4.925519319274902C20.000048046875,4.795405019274902,20.122248046875,4.6999334192749025,20.248548046875,4.7314907592749025" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><g><g><path d="M6.915255046875,4.7314907592749025L11.848588046875001,5.964826319274902C11.937618046875,5.987086319274902,12.000078046875,6.067076319274903,12.000078046875,6.158856319274903L12.000078046875,28.413216319274902C12.000078046875,28.5433163192749,11.877808046875,28.638816319274902,11.751578046875,28.6072163192749L6.818241046875,27.3739163192749C6.729207546875,27.351616319274903,6.666748046875,27.2716163192749,6.666748046875,27.179916319274902L6.666748046875,4.925519319274902C6.666748046875,4.795405019274902,6.789026046875,4.6999334192749025,6.915255046875,4.7314907592749025M20.248548046875,4.7314907592749025L25.181848046875,5.964826319274902C25.270848046875,5.987086319274902,25.333348046875,6.067076319274903,25.333348046875,6.158856319274903L25.333348046875,28.413216319274902C25.333348046875,28.5433163192749,25.211048046875,28.638816319274902,25.084848046875,28.6072163192749L20.151448046875,27.3739163192749C20.062448046874998,27.351616319274903,20.000048046875,27.2716163192749,20.000048046875,27.179916319274902L20.000048046875,4.925519319274902C20.000048046875,4.795405019274902,20.122248046875,4.6999334192749025,20.248548046875,4.7314907592749025" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
... ...
@Component
export struct AVPlayer {
@State outSetValueOne:number = 40
build() {
Column(){
// 进度条
Row(){
Slider({
value: this.outSetValueOne,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.trackColor('rgba(0,0,0,0.5)')
.selectedColor('#ED2800')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString())
})
}
.width('100%')
.padding({left:24,right:24})
.margin({top:110})
// 播放按钮
Row(){
Image($r('app.media.loop'))
.width(24)
.height(24)
Image($r('app.media.Backward'))
.width(24)
.height(24)
Stack(){
Image($r("app.media.playicon"))
.width(32)
.height(32)
}
.backgroundColor('rgba(255,255,255,0.1)')
.width(60)
.height(60)
.padding(14)
.borderRadius(50)
.onClick(()=>{
// this.avPlayerUrl()
})
Image($r('app.media.fastForward'))
.width(24)
.height(24)
Image($r('app.media.doubleSpeed'))
.width(24)
.height(24)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.margin({top:56})
.padding({left:32,right:32})
}
}
}
\ No newline at end of file
... ...
import featureAbility from '@ohos.ability.featureAbility';
import fs from '@ohos.file.fs';
import audio from '@ohos.multimedia.audio';
import media from '@ohos.multimedia.media';
import {Song} from '../viewModel/Song'
import {AVPlayer} from '../../components/AVPlayer'
@Entry
@Component
struct AudioDetail {
@State message: string = '大自然的奇迹展览在中国国家博物馆拉开帷幕';
@State iocClock: string = '定时';
@State iconTheOriginal: string = '原文';
@State iconList: string = '列表';
@State text:string=''
@State outSetValueOne:number = 40
@State showList:boolean = false
controller:TextInputController = new TextInputController()
// 音频
@State songs:Song[]=[]
private avPlayer:media.AVPlayer
async aboutToAppear(){
//加载音乐列表
// let response = await axios({
// method:'get',
// url:''
// })
// //创建avPlayer实例对象
// this.avPlayer = await media.createAVPlayer()
// //创建状态机变化回调函数
// this.setAVPlayerCallback()
// // this.avPlayer.url =
}
// 注册avplayer回调函数
// setAVPlayerCallback() {
// // seek操作结果回调函数
// this.avPlayer.on('seekDone', (seekDoneTime) => {
// console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
// })
// // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
// this.avPlayer.on('error', (err) => {
// console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
// this.avPlayer.reset(); // 调用reset重置资源，触发idle状态
// })
// // 状态机变化回调函数
// this.avPlayer.on('stateChange', async (state, reason) => {
// switch (state) {
// case 'idle': // 成功调用reset接口后触发该状态机上报
// console.info('AVPlayer state idle called.');
// this.avPlayer.release(); // 调用release接口销毁实例对象
// break;
// case 'initialized': // avplayer 设置播放源后触发该状态上报
// console.info('AVPlayerstate initialized called.');
// this.avPlayer.prepare().then(() => {
// console.info('AVPlayer prepare succeeded.');
// })
// break;
// case 'prepared': // prepare调用成功后上报该状态机
// console.info('AVPlayer state prepared called.');
// this.avPlayer.play(); // 调用播放接口开始播放
// break;
// case 'playing': // play成功调用后触发该状态机上报
// console.info('AVPlayer state playing called.');
// break;
// case 'paused': // pause成功调用后触发该状态机上报
// console.info('AVPlayer state paused called.');
// this.avPlayer.play(); // 再次播放接口开始播放
// break;
// case 'completed': // 播放结束后触发该状态机上报
// console.info('AVPlayer state completed called.');
// this.avPlayer.stop(); //调用播放结束接口
// break;
// case 'stopped': // stop接口成功调用后触发该状态机上报
// console.info('AVPlayer state stopped called.');
// this.avPlayer.reset(); // 调用reset接口初始化avplayer状态
// break;
// case 'released':
// console.info('AVPlayer state released called.');
// break;
// default:
// console.info('AVPlayer state unknown called.');
// break;
// }
// })
// }
build() {
Column(){
Row(){
... ... @@ -85,50 +153,7 @@ struct AudioDetail {
.padding({ left: 49, right: 49 })
.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: 60 })
// 进度条
Row(){
Slider({
value: this.outSetValueOne,
min: 0,
max: 100,
style: SliderStyle.OutSet
})
.trackColor('rgba(0,0,0,0.5)')
.selectedColor('#ED2800')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString())
})
}
.width('100%')
.padding({left:24,right:24})
.margin({top:110})
// 播放按钮
Row(){
Image($r('app.media.loop'))
.width(24)
.height(24)
Image($r('app.media.Backward'))
.width(24)
.height(24)
Image($r('app.media.play'))
.width(60)
.height(60)
.backgroundColor('rgba(255,255,255,0.1)')
.padding(14)
.borderRadius(50)
Image($r('app.media.fastForward'))
.width(24)
.height(24)
Image($r('app.media.doubleSpeed'))
.width(24)
.height(24)
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.margin({top:56})
.padding({left:32,right:32})
AVPlayer()
}
}
.height('100%-56')
... ... @@ -146,14 +171,15 @@ struct AudioDetail {
.fontSize(12)
.fontColor('#999999')
.backgroundColor('rgba(255,255,255,0.1)')
.borderRadius(0)
.backgroundColor('[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor')
.onChange((value:string)=>{
this.text = value
})
// 消息
Badge({
count:100,
style:{badgeSize:6,badgeColor:'#FA2A2D'},
style:{fontSize:12,badgeColor:'#FA2A2D'},
}){
Image($r('app.media.news'))
.width(24)
... ... @@ -163,7 +189,7 @@ struct AudioDetail {
// 点赞
Badge({
count:100,
style:{badgeSize:6,badgeColor:'#FA2A2D'},
style:{fontSize:12,badgeColor:'#FA2A2D'},
}){
Image($r('app.media.like'))
.width(24)
... ... @@ -185,19 +211,6 @@ struct AudioDetail {
.justifyContent(FlexAlign.SpaceBetween)
// 播放列表
// Panel(this.showList) { // 展示日程
// Column() {
// Text('Today Calendar')
// Divider()
// Text('1. afternoon 4:00 The project meeting')
// }
// }
// .type(PanelType.Foldable).mode(PanelMode.Half)
// .dragBar(true) // 默认开启
// .halfHeight(500) // 默认一半
// .onChange((width: number, height: number, mode: PanelMode) => {
// console.info(`width:${width},height:${height},mode:${mode}`)
// })
}
.height('100%')
.backgroundColor('#20272E')
... ...
export class Song{
}
\ No newline at end of file
... ...