「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台 ...

本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲，并检察当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度，是音乐播放器界面开辟的基础功能示例。

---

关键词

• UI互动应用
  
• 音乐控制
  
• 播放控制
  
• 动态展示
  
• 状态管理
  
• 按钮与进度条
  

---

一、功能说明

虚拟音乐控制台支持以下功能：

• 播放/暂停控制：通过按钮切换播放与暂停状态。
  
• 歌曲切换：点击“下一首”按钮切换到歌曲列表中的下一首。
  
• 进度条动态更新：实时显示当前播放进度，播放结束后自动切换到下一首歌曲。
  
• 音量调节：通过滑块调整音量，音量值实时更新在界面上。
  
• 歌曲信息展示：显示当前播放的歌曲名称和状态。
  
• 图片展示：在界面顶部添加一张图片，提升视觉结果。
  

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• Column 和 Row 结构组件
  
• Text 组件用于显示当前歌曲信息
  
• Button 组件用于音乐播放控制（播放、暂停、下一首）
  
• Slider 组件用于音量调节
  
• Progress 组件用于动态显示播放进度
  
• Image 组件用于展示示例图片
  
• @State 修饰符用于状态管理
  

---

三、项目结构

• 项目名称：VirtualMusicControl
  
• 自定义组件名称：MusicControlPage
  
• 代码文件：MusicControlPage.ets、Index.ets
  

---

四、代码实现

1. // 文件名：MusicControlPage.ets
3. @Component
4. export struct MusicControlPage {
5.   @State isPlaying: boolean = false; // 播放状态
6.   @State currentSong: string = '歌曲1'; // 当前播放的歌曲
7.   @State songList: string[] = ['歌曲1', '歌曲2', '歌曲3']; // 歌曲列表
8.   @State songIndex: number = 0; // 当前歌曲索引
9.   @State songProgress: number = 0; // 当前播放进度（百分比）
10.   @State volume: number = 50; // 音量（0-100）
12.   private intervalId: number | null = null; // 定时器 ID
14.   // 切换到下一首歌曲
15.   nextSong(): void {
16.     this.songIndex = (this.songIndex + 1) % this.songList.length;
17.     this.currentSong = this.songList[this.songIndex];
18.     this.songProgress = 0; // 播放新歌曲时重置进度条
19.   }
21.   // 播放/暂停切换
22.   togglePlayPause(): void {
23.     this.isPlaying = !this.isPlaying;
24.     if (this.isPlaying) {
25.       this.startTimer();
26.     } else {
27.       this.clearTimer();
28.     }
29.   }
31.   // 更新播放进度
32.   updateProgress(): void {
33.     if (this.isPlaying) {
34.       this.songProgress += 2; // 每秒增加2%
35.       if (this.songProgress >= 100) {
36.         this.songProgress = 0; // 播放结束时重置进度
37.         this.nextSong(); // 自动切换到下一首
38.       }
39.     }
40.   }
42.   // 启动定时器
43.   startTimer(): void {
44.     if (!this.intervalId) {
45.       this.intervalId = setInterval(() => this.updateProgress(), 1000); // 每秒更新进度
46.     }
47.   }
49.   // 清理定时器
50.   clearTimer(): void {
51.     if (this.intervalId) {
52.       clearInterval(this.intervalId);
53.       this.intervalId = null;
54.     }
55.   }
57.   onInit(): void {
58.     this.startTimer(); // 页面加载时启动定时器
59.   }
61.   onDestroy(): void {
62.     this.clearTimer(); // 页面销毁时清理定时器
63.   }
65.   build(): void {
66.     Column({ space: 20 }) {
67.       // 添加图片
68.       Image($r('app.media.cat')) // 添加一张图片
69.         .width(158)
70.         .height(188);
72.       Text('虚拟音乐控制台')
73.         .fontSize(24)
74.         .fontWeight(FontWeight.Bold)
75.         .alignSelf(ItemAlign.Center);
77.       // 显示当前歌曲信息
78.       Text(`当前播放: ${this.currentSong}`)
79.         .fontSize(18)
80.         .alignSelf(ItemAlign.Center);
82.       // 播放/暂停按钮
83.       Button(this.isPlaying ? '暂停' : '播放')
84.         .onClick(() => this.togglePlayPause())
85.         .margin({ top: 10 });
87.       // 下一首按钮
88.       Button('下一首')
89.         .onClick(() => this.nextSong())
90.         .margin({ top: 10 });
92.       // 播放进度条
93.       Progress({
94.         value: this.songProgress,
95.         total: 100,
96.         type: ProgressType.Linear,
97.       })
98.         .color(Color.Green)
99.         .height(8)
100.         .margin({ top: 10 });
102.       // 显示音量
103.       Text(`音量: ${this.volume}`)
104.         .fontSize(18)
105.         .alignSelf(ItemAlign.Center)
106.         .margin({ top: 10 });
108.       // 音量调节滑块
109.       Slider({
110.         value: this.volume,
111.         min: 0,
112.         max: 100,
113.       })
114.         .blockColor(Color.Blue)
115.         .trackColor(Color.Gray)
116.         .onChange((value: number) => (this.volume = value));
117.     }
118.     .padding(20)
119.     .width('100%')
120.     .height('100%');
121.   }
122. }

复制代码

1. // 文件名：Index.ets
3. import { MusicControlPage } from './MusicControlPage';
5. @Entry
6. @Component
7. struct Index {
8.   build() {
9.     Column() {
10.       MusicControlPage() // 调用虚拟音乐控制台页面
11.     }
12.     .padding(20)
13.   }
14. }

复制代码

  结果示例：用户可以通过播放/暂停按钮控制音乐的播放，通过下一首按钮切换歌曲，进度条展示当前播放进度。界面顶部还显示了一张图片，加强了视觉结果。
  

  

---

五、代码解读

• 图片展示
  
  
  
  • 使用 Image 组件加载图片，放置在界面顶部，宽度 158px，高度 188px。
    
  
  
• 播放控制
  
  
  
  • togglePlayPause() 切换播放和暂停状态，同时启动或清理定时器。
    
  
  
• 歌曲切换
  
  
  
  • nextSong() 切换歌曲，重置播放进度，支持循环播放。
    
  
  
• 动态进度条
  
  
  
  • Progress 组件绑定 songProgress，实时更新播放进度。
    
  
  
• 音量调节
  
  
  
  • Slider 实现音量调节，用户拖动滑块实时调整音量值。
    
  
  
• 状态管理
  
  
  
  • 使用 @State 管理播放状态、歌曲信息和音量，实现界面与功能的实时同步。
    
  
  

---

六、优化建议

• 增加“上一首”按钮，支持更多的播放控制功能。
  
• 添加播放列表展示，允许用户选择播放的歌曲。
  
• 通事后端支持真实音频播放，扩展实际应用场景。
  

---

七、结果展示

• 图片展示：顶部显示一张图片，增加视觉元素。
  
• 播放控制：用户通过按钮控制播放、暂停和切换歌曲。
  
• 动态进度条：实时更新歌曲播放进度。
  
• 音量调节：滑块调整音量，实时更新界面显示。
  

---

八、干系知识点

• 「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider和Progress组件
  
• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解
  

---

小结

通过本篇教程，用户学会了构建一个交互式的虚拟音乐控制台，包括播放控制、动态进度条更新和音量调节功能，展示了鸿蒙 UI 组件的组合使用。

---

下一篇预告

在下一篇「UI互动应用篇25 - 浅易购物车功能实现」中，我们将探讨如何实现一个浅易购物车功能，支持商品的添加、移除和总价计算。

---

上一篇： 「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预告组件

下一篇： 「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 浅易购物车功能实现

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=503
來源：坚果派
著作权归作者所有。贸易转载请联系作者得到授权，非贸易转载请注明出处。

---

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。