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
1 -<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>  
  1 +<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>
  1 +@Component
  2 +export struct AVPlayer {
  3 + @State outSetValueOne:number = 40
  4 +
  5 + build() {
  6 + Column(){
  7 + // 进度条
  8 + Row(){
  9 + Slider({
  10 + value: this.outSetValueOne,
  11 + min: 0,
  12 + max: 100,
  13 + style: SliderStyle.OutSet
  14 + })
  15 + .trackColor('rgba(0,0,0,0.5)')
  16 + .selectedColor('#ED2800')
  17 + .showTips(true)
  18 + .onChange((value: number, mode: SliderChangeMode) => {
  19 + this.outSetValueOne = value
  20 + console.info('value:' + value + 'mode:' + mode.toString())
  21 + })
  22 + }
  23 + .width('100%')
  24 + .padding({left:24,right:24})
  25 + .margin({top:110})
  26 + // 播放按钮
  27 + Row(){
  28 + Image($r('app.media.loop'))
  29 + .width(24)
  30 + .height(24)
  31 + Image($r('app.media.Backward'))
  32 + .width(24)
  33 + .height(24)
  34 + Stack(){
  35 + Image($r("app.media.playicon"))
  36 + .width(32)
  37 + .height(32)
  38 + }
  39 + .backgroundColor('rgba(255,255,255,0.1)')
  40 + .width(60)
  41 + .height(60)
  42 + .padding(14)
  43 + .borderRadius(50)
  44 + .onClick(()=>{
  45 + // this.avPlayerUrl()
  46 + })
  47 +
  48 + Image($r('app.media.fastForward'))
  49 + .width(24)
  50 + .height(24)
  51 + Image($r('app.media.doubleSpeed'))
  52 + .width(24)
  53 + .height(24)
  54 + }
  55 + .width('100%')
  56 + .justifyContent(FlexAlign.SpaceBetween)
  57 + .margin({top:56})
  58 + .padding({left:32,right:32})
  59 + }
  60 +
  61 + }
  62 +}
1 -import featureAbility from '@ohos.ability.featureAbility';  
2 -import fs from '@ohos.file.fs';  
3 -import audio from '@ohos.multimedia.audio';  
4 - 1 +import media from '@ohos.multimedia.media';
  2 +import {Song} from '../viewModel/Song'
  3 +import {AVPlayer} from '../../components/AVPlayer'
5 4
6 @Entry 5 @Entry
7 @Component 6 @Component
8 struct AudioDetail { 7 struct AudioDetail {
  8 +
9 @State message: string = '大自然的奇迹展览在中国国家博物馆拉开帷幕'; 9 @State message: string = '大自然的奇迹展览在中国国家博物馆拉开帷幕';
10 @State iocClock: string = '定时'; 10 @State iocClock: string = '定时';
11 @State iconTheOriginal: string = '原文'; 11 @State iconTheOriginal: string = '原文';
12 @State iconList: string = '列表'; 12 @State iconList: string = '列表';
13 @State text:string='' 13 @State text:string=''
14 - @State outSetValueOne:number = 40  
15 @State showList:boolean = false 14 @State showList:boolean = false
16 controller:TextInputController = new TextInputController() 15 controller:TextInputController = new TextInputController()
17 16
  17 + // 音频
  18 + @State songs:Song[]=[]
  19 + private avPlayer:media.AVPlayer
  20 +
  21 + async aboutToAppear(){
  22 + //加载音乐列表
  23 + // let response = await axios({
  24 + // method:'get',
  25 + // url:''
  26 + // })
  27 + // //创建avPlayer实例对象
  28 + // this.avPlayer = await media.createAVPlayer()
  29 + // //创建状态机变化回调函数
  30 + // this.setAVPlayerCallback()
  31 + // // this.avPlayer.url =
  32 + }
  33 + // 注册avplayer回调函数
  34 + // setAVPlayerCallback() {
  35 + // // seek操作结果回调函数
  36 + // this.avPlayer.on('seekDone', (seekDoneTime) => {
  37 + // console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  38 + // })
  39 + // // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  40 + // this.avPlayer.on('error', (err) => {
  41 + // console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  42 + // this.avPlayer.reset(); // 调用reset重置资源，触发idle状态
  43 + // })
  44 + // // 状态机变化回调函数
  45 + // this.avPlayer.on('stateChange', async (state, reason) => {
  46 + // switch (state) {
  47 + // case 'idle': // 成功调用reset接口后触发该状态机上报
  48 + // console.info('AVPlayer state idle called.');
  49 + // this.avPlayer.release(); // 调用release接口销毁实例对象
  50 + // break;
  51 + // case 'initialized': // avplayer 设置播放源后触发该状态上报
  52 + // console.info('AVPlayerstate initialized called.');
  53 + // this.avPlayer.prepare().then(() => {
  54 + // console.info('AVPlayer prepare succeeded.');
  55 + // })
  56 + // break;
  57 + // case 'prepared': // prepare调用成功后上报该状态机
  58 + // console.info('AVPlayer state prepared called.');
  59 + // this.avPlayer.play(); // 调用播放接口开始播放
  60 + // break;
  61 + // case 'playing': // play成功调用后触发该状态机上报
  62 + // console.info('AVPlayer state playing called.');
  63 + // break;
  64 + // case 'paused': // pause成功调用后触发该状态机上报
  65 + // console.info('AVPlayer state paused called.');
  66 + // this.avPlayer.play(); // 再次播放接口开始播放
  67 + // break;
  68 + // case 'completed': // 播放结束后触发该状态机上报
  69 + // console.info('AVPlayer state completed called.');
  70 + // this.avPlayer.stop(); //调用播放结束接口
  71 + // break;
  72 + // case 'stopped': // stop接口成功调用后触发该状态机上报
  73 + // console.info('AVPlayer state stopped called.');
  74 + // this.avPlayer.reset(); // 调用reset接口初始化avplayer状态
  75 + // break;
  76 + // case 'released':
  77 + // console.info('AVPlayer state released called.');
  78 + // break;
  79 + // default:
  80 + // console.info('AVPlayer state unknown called.');
  81 + // break;
  82 + // }
  83 + // })
  84 + // }
  85 +
18 build() { 86 build() {
19 Column(){ 87 Column(){
20 Row(){ 88 Row(){
@@ -85,50 +153,7 @@ struct AudioDetail { @@ -85,50 +153,7 @@ struct AudioDetail {
85 .padding({ left: 49, right: 49 }) 153 .padding({ left: 49, right: 49 })
86 .justifyContent(FlexAlign.SpaceBetween) 154 .justifyContent(FlexAlign.SpaceBetween)
87 .margin({ top: 60 }) 155 .margin({ top: 60 })
88 - // 进度条  
89 - Row(){  
90 - Slider({  
91 - value: this.outSetValueOne,  
92 - min: 0,  
93 - max: 100,  
94 - style: SliderStyle.OutSet  
95 - })  
96 - .trackColor('rgba(0,0,0,0.5)')  
97 - .selectedColor('#ED2800')  
98 - .showTips(true)  
99 - .onChange((value: number, mode: SliderChangeMode) => {  
100 - this.outSetValueOne = value  
101 - console.info('value:' + value + 'mode:' + mode.toString())  
102 - })  
103 - }  
104 - .width('100%')  
105 - .padding({left:24,right:24})  
106 - .margin({top:110})  
107 - // 播放按钮  
108 - Row(){  
109 - Image($r('app.media.loop'))  
110 - .width(24)  
111 - .height(24)  
112 - Image($r('app.media.Backward'))  
113 - .width(24)  
114 - .height(24)  
115 - Image($r('app.media.play'))  
116 - .width(60)  
117 - .height(60)  
118 - .backgroundColor('rgba(255,255,255,0.1)')  
119 - .padding(14)  
120 - .borderRadius(50)  
121 - Image($r('app.media.fastForward'))  
122 - .width(24)  
123 - .height(24)  
124 - Image($r('app.media.doubleSpeed'))  
125 - .width(24)  
126 - .height(24)  
127 - }  
128 - .width('100%')  
129 - .justifyContent(FlexAlign.SpaceBetween)  
130 - .margin({top:56})  
131 - .padding({left:32,right:32}) 156 + AVPlayer()
132 } 157 }
133 } 158 }
134 .height('100%-56') 159 .height('100%-56')
@@ -146,14 +171,15 @@ struct AudioDetail { @@ -146,14 +171,15 @@ struct AudioDetail {
146 .fontSize(12) 171 .fontSize(12)
147 .fontColor('#999999') 172 .fontColor('#999999')
148 .backgroundColor('rgba(255,255,255,0.1)') 173 .backgroundColor('rgba(255,255,255,0.1)')
149 - 174 + .borderRadius(0)
  175 + .backgroundColor('[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor')
150 .onChange((value:string)=>{ 176 .onChange((value:string)=>{
151 this.text = value 177 this.text = value
152 }) 178 })
153 // 消息 179 // 消息
154 Badge({ 180 Badge({
155 count:100, 181 count:100,
156 - style:{badgeSize:6,badgeColor:'#FA2A2D'}, 182 + style:{fontSize:12,badgeColor:'#FA2A2D'},
157 }){ 183 }){
158 Image($r('app.media.news')) 184 Image($r('app.media.news'))
159 .width(24) 185 .width(24)
@@ -163,7 +189,7 @@ struct AudioDetail { @@ -163,7 +189,7 @@ struct AudioDetail {
163 // 点赞 189 // 点赞
164 Badge({ 190 Badge({
165 count:100, 191 count:100,
166 - style:{badgeSize:6,badgeColor:'#FA2A2D'}, 192 + style:{fontSize:12,badgeColor:'#FA2A2D'},
167 }){ 193 }){
168 Image($r('app.media.like')) 194 Image($r('app.media.like'))
169 .width(24) 195 .width(24)
@@ -185,19 +211,6 @@ struct AudioDetail { @@ -185,19 +211,6 @@ struct AudioDetail {
185 .justifyContent(FlexAlign.SpaceBetween) 211 .justifyContent(FlexAlign.SpaceBetween)
186 212
187 // 播放列表 213 // 播放列表
188 - // Panel(this.showList) { // 展示日程  
189 - // Column() {  
190 - // Text('Today Calendar')  
191 - // Divider()  
192 - // Text('1. afternoon 4:00 The project meeting')  
193 - // }  
194 - // }  
195 - // .type(PanelType.Foldable).mode(PanelMode.Half)  
196 - // .dragBar(true) // 默认开启  
197 - // .halfHeight(500) // 默认一半  
198 - // .onChange((width: number, height: number, mode: PanelMode) => {  
199 - // console.info(`width:${width},height:${height},mode:${mode}`)  
200 - // })  
201 } 214 }
202 .height('100%') 215 .height('100%')
203 .backgroundColor('#20272E') 216 .backgroundColor('#20272E')