HarmonyOS音符跳动：构建你的音乐播放器 原创

import { http } from '@kit.NetworkKit'
1.

const req = http.createHttp()
1.

req.request('请求地址url')
.then((res: http.HttpResponse) => {
AlertDialog.show({ message: JSON.stringify(res) })
})
1.
2.
3.
4.

class AudioPlayer {
  constructor() {
    this.player = OH_AVPlayer_Create();
  }
  play(url) {
    OH_AVPlayer_SetURLSource(this.player, url);
    OH_AVPlayer_Prepare(this.player);
    OH_AVPlayer_Play(this.player);
  }
  pause() {
    OH_AVPlayer_Pause(this.player);
  }
  // 其他播放器控制方法...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

import media from '@ohos.multimedia.media'
import { BusinessError } from '@kit.BasicServicesKit'
import { audio } from '@kit.AudioKit'
import {Size_Data as sd} from '../Common/Constant/Size_data'
import {Configuration} from '../Common/Constant/Configuration'

/**
 * 音频播放器操作类
 * 提供音频播放器的初始化、播放控制和错误处理等功能
 */
export class player_op{
  is_paused:boolean = false // 播放器暂停状态标志
  player:media.AVPlayer|undefined // 音频播放器实例

  /**
   * 初始化播放器回调函数
   * 设置播放器的事件监听，包括错误处理和状态变化
   */
  Init_player_callingback(){
    if(this.player==undefined) return
    // 错误事件处理
    this.player.on('error',(err:BusinessError)=>{
      this.player?.reset()
      AlertDialog.show({
        message:'当前曲目无法播放',
        alignment:DialogAlignment.Center,
        width:sd.play_failure_width,
        height:sd.play_failure_height,
        shadow:{radius:50,color:Configuration.dialog_background_color,offsetX:30,offsetY:-30}
      })
    })
    // 状态变化事件处理
    this.player.on('stateChange',async (state:string,reason:media.StateChangeReason)=>{
      switch (state) {
        case 'idle':
          console.info('AvPlayer_State_Change: Player reset, now state: Idle')
          this.player?.release()
          break
        case 'initialized':
          console.info('AvPlayer_State_Change: Player initialized, now state: Initialized')
          if(this.player!=undefined){
            //设置播放器渲染参数，必须在Prepare调用前设置
            this.player.audioRendererInfo = {
              usage: audio.StreamUsage.STREAM_USAGE_MUSIC,
              rendererFlags:0
            }
          }
          this.player?.prepare()
          break
        case 'prepared':
          console.info('AvPlayer_State_Change: Player prepared, now state: prepared')
          this.player?.play()
          break
        case 'playing':
          //播放到末尾后自动跳转到Completed状态
          console.info('AvPlayer_State_Change: Player play, now state: playing')
          break
        case 'paused':
          console.info('AvPlayer_State_Change: Player play, now state: paused')
          break
        case 'completed':
          console.info('AvPlayer_State_Change: now state: Complete')
          this.player?.stop()
          break
        case 'stopped':
          this.player?.reset()
          break
        case 'released':
          this.player = undefined
          break
        default :
          break
      }
    })
  }

  /**
   * 开始播放音频
   * @param url 音频文件的URL
   */
  Start_play(url:string){
    media.createAVPlayer().then((_player:media.AVPlayer)=>{
      this.player = _player
      this.Init_player_callingback()
      this.player.url = url
    })
  }

  /**
   * 暂停播放
   */
  player_pause(){
    if(this.is_paused) return
    this.is_paused = true
    this.player?.pause()
  }

  /**
   * 继续播放
   */
  player_continue(){
    if(!this.is_paused) return
    this.is_paused = false
    this.player?.play()
  }

  /**
   * 重置播放器并播放新的音频
   * @param _url 新音频文件的URL
   */
  player_reset(_url:string){
    this.is_paused = false
    if(this.player==undefined){
      this.Start_play(_url)
    }else{
      this.player.release().then(()=>{
        this.player = undefined
        this.Start_play(_url)
      })
    }
  }

}

// 创建并导出音频播放器操作实例
const Player =  new player_op()
export default Player
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.

import {Song,Page_transmission as pt,Static_Config} from '../Class_def/song_def'
import http from "@ohos.net.http"
import {Size_Data as sd} from '../Common/Constant/Size_data'
import { CircleShape } from '@kit.ArkUI'
import {Order} from '../Common/Constant/Order'
import player from '../Api/AVPlayer'
import {web_dialog} from '../Build/Dialog'
import {Configuration} from '../Common/Constant/Configuration'
import text from '@ohos.graphics.text'


@Builder
export function song_builder(name:string,param:object){
  Song_page({current_song:Static_Config.current_song,page_info:(param as pt).page_info})
}

@Entry
@Component
struct test{
  build() {
  }
}

@Component
struct Song_page {
  @State current_song:Song = new Song()
  @State lyrics:Array<string> = []
  page_info:NavPathStack|undefined

  aboutToAppear(): void {
    //Get lyrics
    if(this.current_song.id<0) return
    this.get_http()
  }

  async get_http() : Promise<void>{
    let http_request = http.createHttp()
    let response = http_request.request(
      Order.url + Order.get_lyrics + this.current_song.id.toString()
    );

    await response.then((data)=>{
      if(data.responseCode==200){
        //Get new search data
        this.lyrics.splice(0,this.lyrics.length)      //Clear content
        let res = data.result as string
        let json_res = JSON.parse(res) as object
        let lrc = (json_res?.["lrc"]) as object
        let lrc_content = (lrc as object)?.["lyric"] as string
        let base:number = 0
        for(let i=0;i!=lrc_content.length;i++){
          if(lrc_content[i]==']') base = i+1
          if(lrc_content[i]=='\n') this.lyrics.push(lrc_content.substring(base,i))
        }
      }else{
        console.info("Search request fail")
      }
    })
  }

  build() {
    NavDestination(){
      Column(){
        Stack(){
          //当前歌曲名称
          Text(this.current_song.song_name)
            .width('100%')
            .fontSize(30)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .padding(5)
            .position({left:0,top:10})

          //返回按钮
          Button(){
            Text("<")
              .fontSize(20)
              .fontColor(Color.White)
          }
          .borderWidth(1.5)
          .borderColor(Color.White)
          .backgroundColor(Color.Transparent)
          .width('10%')
          .height('90%')
          .margin(10)
          .position({left:5,top:2})
          .type(ButtonType.Circle)
          .onClick((event: ClickEvent) => {
            this.page_info?.pop()
          })

        }
        .width('100%')
        .height('7%')
        .margin({top:10})

        //歌手名称，点击可打开显示歌手主页的网页
        Text(this.current_song.singer_name)
          .width('100%')
          .fontSize(20)
          .fontColor(Configuration.singer_name_color)
          .textAlign(TextAlign.Center)
          .onClick(()=>{
            let dialog_controller:CustomDialogController|null = new CustomDialogController({
              builder: web_dialog({
                singer_id:this.current_song.singer_id.toString()
              }),
              alignment:DialogAlignment.Bottom,
              offset:{dx:0,dy:-100},
              shadow:{radius:50,color:Color.Red,offsetX:30,offsetY:-30}
            })
            dialog_controller.open()
            dialog_controller = null
          })

        Blank().height(30)

        //Main Content：用于显示歌词
        List(){
          ForEach(this.lyrics,(line:string)=>{
            ListItem(){
              Text(line)
                .fontSize(20)
                .width('100%')
                .textAlign(TextAlign.Center)
                .fontColor(Configuration.lyric_color)
            }
            .width('100%')
            .height(sd.lyrics_line)
            .margin(10)
          },(index:number)=>index.toString())
        }
        .height('65%')
        .width('100%')
        .scrollBar(BarState.Off)

        /*按键区，包含三个按键，分别为
         * 1. 切换上一首，待后续添加逻辑
         * 2. 暂停或继续播放
         * 3. 切换下一首，待后续添加逻辑
         */
        Row(){

          Image($r('app.media.last'))
            .margin({left:'20%'})
            .size({width:sd.next_button,height:sd.next_button})
            .clipShape(new CircleShape({width:sd.next_button,height:sd.next_button}))

          Image($r('app.media.play'))
            .size({width:sd.play_button,height:sd.play_button})
            .clipShape(new CircleShape({width:sd.play_button,height:sd.play_button}))
            .margin({left:'7%'})
            .onClick(()=>{
              if(player.player!=undefined){
                if(player.is_paused) player.player_continue()
                else player.player_pause()
              }
            })

          Image($r('app.media.next'))
            .size({width:sd.next_button,height:sd.next_button})
            .clipShape(new CircleShape({width:sd.next_button,height:sd.next_button}))
            .margin({left:'7%'})

        }
        .width('100%')
        .height('20%')

        //content({current_song:this.current_song}).width('100%').height('100%')
      }
      .width('100%')
      .height('100%')
      .linearGradient({
        direction:GradientDirection.Bottom,colors:
        [['#FF4D4D',0.0],
          ['#FF7A7A',0.5],
          ['#FFA5A5',1.0]]})
    }.hideTitleBar(true)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.