「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。
关键词
- UI互动应用
- 音乐控制
- 播放控制
- 动态展示
- 状态管理
- 按钮与进度条
一、功能说明
虚拟音乐控制台支持以下功能:
- 播放/暂停控制:通过按钮切换播放与暂停状态。
- 歌曲切换:点击“下一首”按钮切换到歌曲列表中的下一首。
- 进度条动态更新:实时显示当前播放进度,播放结束后自动切换到下一首歌曲。
- 音量调节:通过滑块调整音量,音量值实时更新在界面上。
- 歌曲信息展示:显示当前播放的歌曲名称和状态。
- 图片展示:在界面顶部添加一张图片,提升视觉效果。
二、所需组件
@Entry
和@Component
装饰器Column
和Row
布局组件Text
组件用于显示当前歌曲信息Button
组件用于音乐播放控制(播放、暂停、下一首)Slider
组件用于音量调节Progress
组件用于动态显示播放进度Image
组件用于展示示例图片@State
修饰符用于状态管理
三、项目结构
- 项目名称:
VirtualMusicControl
- 自定义组件名称:
MusicControlPage
- 代码文件:
MusicControlPage.ets
、Index.ets
四、代码实现
// 文件名:MusicControlPage.ets@Component
export struct MusicControlPage {@State isPlaying: boolean = false; // 播放状态@State currentSong: string = '歌曲1'; // 当前播放的歌曲@State songList: string[] = ['歌曲1', '歌曲2', '歌曲3']; // 歌曲列表@State songIndex: number = 0; // 当前歌曲索引@State songProgress: number = 0; // 当前播放进度(百分比)@State volume: number = 50; // 音量(0-100)private intervalId: number | null = null; // 定时器 ID// 切换到下一首歌曲nextSong(): void {this.songIndex = (this.songIndex + 1) % this.songList.length;this.currentSong = this.songList[this.songIndex];this.songProgress = 0; // 播放新歌曲时重置进度条}// 播放/暂停切换togglePlayPause(): void {this.isPlaying = !this.isPlaying;if (this.isPlaying) {this.startTimer();} else {this.clearTimer();}}// 更新播放进度updateProgress(): void {if (this.isPlaying) {this.songProgress += 2; // 每秒增加2%if (this.songProgress >= 100) {this.songProgress = 0; // 播放结束时重置进度this.nextSong(); // 自动切换到下一首}}}// 启动定时器startTimer(): void {if (!this.intervalId) {this.intervalId = setInterval(() => this.updateProgress(), 1000); // 每秒更新进度}}// 清理定时器clearTimer(): void {if (this.intervalId) {clearInterval(this.intervalId);this.intervalId = null;}}onInit(): void {this.startTimer(); // 页面加载时启动定时器}onDestroy(): void {this.clearTimer(); // 页面销毁时清理定时器}build(): void {Column({ space: 20 }) {// 添加图片Image($r('app.media.cat')) // 添加一张图片.width(158).height(188);Text('虚拟音乐控制台').fontSize(24).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 显示当前歌曲信息Text(`当前播放: ${this.currentSong}`).fontSize(18).alignSelf(ItemAlign.Center);// 播放/暂停按钮Button(this.isPlaying ? '暂停' : '播放').onClick(() => this.togglePlayPause()).margin({ top: 10 });// 下一首按钮Button('下一首').onClick(() => this.nextSong()).margin({ top: 10 });// 播放进度条Progress({value: this.songProgress,total: 100,type: ProgressType.Linear,}).color(Color.Green).height(8).margin({ top: 10 });// 显示音量Text(`音量: ${this.volume}`).fontSize(18).alignSelf(ItemAlign.Center).margin({ top: 10 });// 音量调节滑块Slider({value: this.volume,min: 0,max: 100,}).blockColor(Color.Blue).trackColor(Color.Gray).onChange((value: number) => (this.volume = value));}.padding(20).width('100%').height('100%');}
}
// 文件名:Index.etsimport { MusicControlPage } from './MusicControlPage';@Entry
@Component
struct Index {build() {Column() {MusicControlPage() // 调用虚拟音乐控制台页面}.padding(20)}
}
效果示例:用户可以通过播放/暂停按钮控制音乐的播放,通过下一首按钮切换歌曲,进度条展示当前播放进度。界面顶部还显示了一张图片,增强了视觉效果。
五、代码解读
-
图片展示
- 使用
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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章:
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
本篇将带你实现一个虚拟音乐控制台。用户可以通过界面控制音乐的播放、暂停、切换歌曲,并查看当前播放的歌曲信息。页面还支持调整音量和动态显示播放进度,是音乐播放器界面开发的基础功能示例。 关键词 UI互动应用音乐控制播放控制动态展示状态管理按钮…...
Navicat 17 功能简介 | SQL 美化
SQL美化 本期,我们将深入挖掘 Navicat 的实用的SQL代码美化功能。你只需简单地点击“SQL 美化”按钮,即可轻松完成 SQL 的格式化。 随着 17 版本的发布,Navicat 也带来了众多的新特性,包括兼容更多数据库、全新的模型设计、可视化…...
C++ 只出现一次的数字 - 力扣(LeetCode)
点击链接即可查看题目:136. 只出现一次的数字 - 力扣(LeetCode) 一、题目 给你一个 非空 整数数组 nums ,除了某个元素只出现一次以外,其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间…...
Unity3D仿星露谷物语开发5之角色单例模式
1、目的 使用单例模式创建角色对象,保证整个游戏中只有一个角色,并且让游戏对象具有全局可访问性。 2、流程 (1)创建SingletonMonobehaviour脚本 Assets下创建Scripts目录用于存放所有的脚本,再创建Misk子目录&…...
解析在OceanBase创建分区的常见问题|OceanBase 用户问题精粹
在《分区策略和管理分区计划的实践方案》这篇文章中,我们介绍了在ODC中制定分区策略及有效管理分区计划的经验。有不少用户在该帖下提出了使用中的问题,其中一个关于创建分区的限制条件的问题,也是很多用户遭遇的老问题。因此本文以其为切入&…...
python学习路径(一)
学习 Python 的完整大纲应该从基础知识到高级应用层层递进,并以构建自己的项目为目标,最终形成自己的知识体系。以下是一个完整、详细且逻辑清晰的学习路径: 第一部分:Python 基础 1. 环境配置与工具 Python 安装与版本管理&…...
【Nginx-5】Nginx 限流配置指南:保护你的服务器免受流量洪峰冲击
在现代互联网应用中,流量波动是常态。无论是突发的用户访问高峰,还是恶意攻击,都可能导致服务器资源耗尽,进而影响服务的可用性。为了应对这种情况,限流(Rate Limiting)成为了一种常见的保护措施…...
OpenCV(python)从入门到精通——运算操作
加法减法操作 import cv2 as cv import numpy as npx np.uint8([250]) y np.uint8([10])x_1 np.uint8([10]) y_1 np.uint8([20])# 加法,相加最大只能为255 print(cv.add(x,y))# 减法,相互减最小值只能为0 print(cv.subtract(x_1,y_1))图像加法 import cv2 as…...
MFC 自定义网格控件
一、什么是 Custom Control? Custom Control(自定义控件) 是 MFC(Microsoft Foundation Classes)框架中提供的一种控件类型,用于实现自定义的外观和功能。当标准控件(例如 CEdit、CButton、CLi…...
什么是卷积?卷积的意义
卷积是一种在数学和信号处理中广泛应用的运算方法,它通常被用于描述两个函数之间的关系。在信号处理中,卷积可以将两个信号进行组合,以得到一个新的信号,该信号反映了这两个原始信号之间的关系。 具体来说,假设有两个…...
μC/OS-Ⅱ源码学习(7)---软件定时器
快速回顾 μC/OS-Ⅱ中的多任务 μC/OS-Ⅱ源码学习(1)---多任务系统的实现 μC/OS-Ⅱ源码学习(2)---多任务系统的实现(下) μC/OS-Ⅱ源码学习(3)---事件模型 μC/OS-Ⅱ源码学习(4)---信号量 μC/OS-Ⅱ源码学习(5)---消息队列 μC/OS-Ⅱ源码学习(6)---事件标志组 本文进一…...
3D和AR技术在电商行业的应用有哪些?
3D展示和AR技术在电商行业的应用为消费者带来了更为直观、沉浸式的购物体验,显著提升了商品展示效果和销售转化率。以下是3D和AR技术在电商行业的具体应用: 1、商品3D展示: 通过3D技术,商品可以在电商平台上以三维形式呈现&…...
数据增强的几大方式
1. 随机擦除(Random Erasing) 说明 随机在图像中选取一个矩形区域,将其像素值随机化或设为零,以增加模型对部分缺失信息的鲁棒性。 import numpy as np import cv2def random_erasing(image, sl0.02, sh0.2, r10.3):h, w, _ image.shapearea h * wta…...
GraphReader: 将长文本结构化为图,并让 agent 自主探索,结合的大模型长文本处理增强方法
GraphReader: 将长文本结构化为图,并让 agent 自主探索,结合的大模型长文本处理增强方法 论文大纲理解为什么大模型和知识图谱不够?还要多智能体 设计思路数据分析解法拆解全流程核心模式提问为什么传统的长文本处理方法会随着文本长度增加而…...
VTK 模型封闭 closeSurface 补洞, 网格封闭性检测
网格封闭性检测 见: vtk Edges 特征边 提取 网格封闭性检测_vtkfeatureedges-CSDN博客 由于以前做过3D打印模型,要求模型必须是封闭的,原来对模型封闭有研究过,不过没有记录;现在又遇到,整理一下ÿ…...
【译】仅有 Text2SQL 是不够的: 用 TAG 统一人工智能和数据库
原文地址:Text2SQL is Not Enough: Unifying AI and Databases with TAG 摘要 通过数据库为自然语言问题提供服务的人工智能系统有望释放出巨大的价值。此类系统可让用户利用语言模型(LM)的强大推理和知识能力,以及数据管理系统…...
Java:链接redis报错:NoSuchElementException: Unable to validate object
目录 前言报错信息排查1、确认redis密码设置是否有效2、确认程序配置文件,是否配置了正确的redis登录密码3、检测是否是redis持久化的问题4、确认程序读取到的redis密码没有乱码 原因解决 前言 一个已经上线的项目,生产环境的redis居然没有设置密码&…...
每日一题 334. 递增的三元子序列
334. 递增的三元子序列 使用贪心来找到三个数字 class Solution { public:bool increasingTriplet(vector<int>& nums) {int first INT_MAX;int second INT_MAX;for(int num : nums){if(num < first){first num;}else if(num < second){second num;}els…...
金仓 Kingbase 日常运维 SQL 汇总
金仓 Kingbase 日常运维 SQL 汇总 1 单机启停 sys_ctl start|stop|restart 或指定data路径和端口等 sys_ctl start|stop|restart -D /data/kingbase/data -p 543222 集群启停 sys_monitor start|stop|restart3 修改配置后重新加载 sys_ctl reload4 初始化实例 initdb -E ut…...
JAVA开发ERP时在 PurchaseOrderServiceImpl.java 中添加日志记录进行调试
在 PurchaseOrderServiceImpl.java 中添加日志记录,以便在保存订单时输出参数进行调试。可以使用 Spring 的日志框架(SLF4J 和 Logback)来实现这一点。 添加日志记录 引入 SLF4J 依赖: 确保项目中已经包含了 SLF4J 和 Logback 的依赖。通常在…...
36.3 grafana-dashboard看图分析
kube-prometheus中的grafana总结 db使用 sqlit,volume类型为emptydir 无法持久化,pod扩缩就重新创建通过configMap设置的prometheus DataSource 通过 prometheus-k8s svc对应的 域名访问下面对应两个prometheus容器,有HA 各个dashboard通过 …...
面试题整理5----进程、线程、协程区别及僵尸进程处理
面试题整理5----进程、线程、协程区别及僵尸进程处理 1. 进程、线程与协程的区别1.1 进程(Process)1.2 线程(Thread)1.3 协程(Coroutine)2. 总结对比 3. 僵尸进程3.1 什么是僵尸进程?3.2 僵尸进…...
【C语言程序设计——基础】顺序结构程序设计(头歌实践教学平台习题)【合集】
目录😋 <第1关:顺序结构的应用> 任务描述 相关知识 编程要求 测试说明 我的通关代码: 测试结果: <第2关:交换变量值> 任务描述 相关知识 编程要求 测试说明 我的通关代码: 测试结果: <第…...
LLM大语言模型私有化部署-OpenEuler22.03SP3上容器化部署Dify与Qwen2.5
背景 Dify 是一款开源的大语言模型(LLM) 应用开发平台。其直观的界面结合了 AI 工作流、 RAG 管道、 Agent 、模型管理、可观测性功能等,让您可以快速从原型到生产。相比 LangChain 这类有着锤子、钉子的工具箱开发库, Dify 提供了更接近生产需要的完整…...
C语言中的转义字符
C语言中的转义字符 常见字符ASCII码表...
ilqr算法原理推导及代码实践
目录 一. ilqr原理推导1.1 ilqr问题描述1.2 ilqr算法原理1.3 ilqr算法迭代过程 二. ilqr实践代码 一. ilqr原理推导 1.1 ilqr问题描述 本文参考知乎博主: LQR与iLQR:从理论到实践【详细】 基础LQR只能处理线性系统 (指可以使用 x ( k 1 ) A x ( k ) B u ( k )…...
系列1:基于Centos-8.6部署Kubernetes (1.24-1.30)
每日禅语 “木末芙蓉花,山中发红萼,涧户寂无人,纷纷开自落。”这是王维的一首诗,名叫《辛夷坞》。这首诗写的是在辛夷坞这个幽深的山谷里,辛夷花自开自落,平淡得很,既没有生的喜悦ÿ…...
finereport新的数据工厂插件使用场景一 通过accessToken获取数据
1 有两个接口,一个接口获取一个accessToken,一个接口根据accessToken来获取数据。代码示例为: @RequestMapping(value = {"df_test/getAccessToken"},method = {RequestMethod.GET})@ResponseBodypublic String getAccessToken(HttpServletRequest req, HttpServ…...
matlab绘图时设置左、右坐标轴为不同颜色
目录 一、需求描述 二、实现方法 一、需求描述 当图中存在两条曲线,需要对两条曲线进行分别描述时,应设置左、右坐标轴为不同颜色,并设置刻度线,且坐标轴颜色需要和曲线颜色相同。 二、实现方法 1.1、可以实现: 1…...
魏裕雄的JAVA学习总结
JAVA学习总结 Java面向对象程序设计知识总结第1章 初识Java与面向对象程序设计JAVA概述面向对象程序设计思想JAVA开发环境搭建第一个JAVA程序JAVA常用开发工具 第2章 Java编程基础变量与常量运算符与表达式选择结构循环结构方法数组JVM中的堆内存与栈内存 第3章 面向对象程序设…...
深度学习从入门到精通——图像分割实战DeeplabV3
DeeplabV3算法 参数配置关于数据集的配置训练集参数 数据预处理模块DataSet构建模块测试一下数据集去正则化模型加载模块DeepLABV3 参数配置 关于数据集的配置 parser argparse.ArgumentParser()# Datset Optionsparser.add_argument("--data_root", typestr, defa…...
SAP抓取外部https报错SSL handshake处理方法
一、问题描述 SAP执行报表抓取https第三方数据,数据获取失败。 报错消息: SSL handshake with XXX.COM:449 failed: SSSLERR_SSL_READ (-58)#SAPCRYPTO:SSL_read() failed##SapSSLSessionStartNB()==SSSLERR_SSL_READ# SSL:SSL_read() failed (536875120/0x20001070)# …...
Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总
背景 在实际开发中,我发现团队对于这几个路径的设置上是纯靠猜的,通过一点点地尝试来找到可行的路径,这是不应该的,我们应该很清晰地了解这几个概念,以下通过截图和代码进行细节讲解。 npm run dev 下的路径如何处理&…...
穷举vs暴搜vs深搜vs回溯vs剪枝专题一>全排列II
题目: 解析: 这题设计递归函数,主要把看如何剪枝 代码: class Solution {private List<List<Integer>> ret;private List<Integer> path;private boolean[] check;public List<List<Integer>> p…...
Nginx中Server块配置的详细解析
Nginx中Server块配置的详细解析 一、Server块简介 在Nginx配置文件中,server块是非常关键的部分。它用于定义虚拟主机,一个server块就代表一个虚拟主机。这使得我们可以在一台Nginx服务器上通过不同的配置来处理多个域名或者基于不同端口的服务请求。 …...
【后端面试总结】Redis的三种模式原理介绍及优缺点
Redis作为一款高性能的键值对数据库,提供了多种模式以满足不同场景下的需求。本文将详细介绍Redis的三种主要模式:主从复制模式、哨兵模式(Sentinel)和集群模式(Cluster),包括它们的原理、配置、…...
TCP协议详解
目录 一. TCP协议概述 1. 概念 2. 特点 (1) 面向连接 (2) 可靠传输 (3) 面向字节流 (4) 全双工通信 (5) 流量控制和拥塞控制 二. TCP协议报文格式 1. 源端口号 和 目的端口号 (16位) 2. 序号 和 确认序号 (32位) 3. 首部长度 (4位) 4. 保留位 (6位) 7. 控制位 8.…...
Webpack学习笔记(2)
1.什么是loader? 上图是Webpack打包简易流程,webpack本身只能理解js和json这样的文件,loader可以让webpack解析其他类型文件,并且将文件转换成模块供我们使用。 test识别出那些文件被转换,use定义转换时使用哪个loader转换 上图…...
【漏洞复现】Grafana 安全漏洞(CVE-2024-9264)
🏘️个人主页: 点燃银河尽头的篝火(●’◡’●) 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦 一、漏洞概述 1.1漏洞简介 漏洞名称:Grafana 安全漏洞 (CVE-2024-9264)漏洞编号:CVE-2024-9264 | CNNVD-202410-1891漏洞类型:命令注入、本地文件包含漏洞威胁等级:…...
C++实现最大字段和
又是一道非常基础且经典的动态规划题目:假设有一个整数序列,我们将连续的几个元素组成的序列称为子段,要求我们得出所有子段和中最大的一个~ 例如:{-2,11,-4,13,-5,-2},这一序列中&a…...
当我用影刀AI Power做了一个旅游攻略小助手
在线体验地址:旅游攻略小助手https://power.yingdao.com/assistant/ca1dfe1c-9451-450e-a5f1-d270e938a3ad/share 运行效果图展示: 话不多说一起看下效果图: 智能体的截图: 工作流截图: 搭建逻辑: 其实这…...
K8s HPA的常用功能介绍
Kubernetes 的 Horizontal Pod Autoscaler (HPA) 是一种自动扩展功能,用于根据资源使用情况(如 CPU、内存等)或自定义指标,动态调整 Pod 的副本数量,从而保证应用的性能和资源利用率。 以下是 HPA 的常用功能介绍&…...
web3跨链预言机协议-BandProtocol
项目简介 Band Protocol 项目最初于 2017年成立并建立在 ETH 之上。后于2020年转移到了 Cosmos 网络上,基于 Cosmos SDK 搭建了一条 Band Chain 。这是一条 oracle-specific chain,主要功能是提供跨链预言机服务。Cosmos生态上第一个,也是目…...
Python如何正确解决reCaptcha验证码(9)
前言 本文是该专栏的第73篇,后面会持续分享python爬虫干货知识,记得关注。 我们在处理某些国内外平台项目的时候,相信很多同学或多或少都见过,如下图所示的reCaptcha验证码。 而本文,笔者将重点来介绍在实战项目中,遇到上述中的“reCaptcha验证码”,如何正确去处理并解…...
电商数据采集电商,行业数据分析,平台数据获取|稳定的API接口数据
电商数据采集可以通过多种方式完成,其中包括人工采集、使用电商平台提供的API接口、以及利用爬虫技术等自动化工具。以下是一些常用的电商数据采集方法: 人工采集:人工采集主要是通过基本的“复制粘贴”的方式在电商平台上进行数据的收集&am…...
【java】Executor框架的组成部分
目录 1. 任务(Task)2. 执行器(Executor)3. 任务结果(Future)4. 线程池(ThreadPool)5. 任务队列(Work Queue)6. 线程工厂(Thread Factoryÿ…...
KMP算法基础
文章一览 前言一、核心思想二、实现步骤三、图解实现四、next数组的实现总结 前言 本栏目将讲解在学习过程中遇到的各种常用算法,深入浅出的讲解算法的用法与使用场景。 那么话不多说,让我们进入第一个算法KMP算法吧! 一、核心思想 KMP&am…...
C语言——实现百分制换算为等级分
问题描述:百分制换算为等级分 //百分制换算为等级分#include<stdio.h>void my_function(int x) {if(x>95 && x<100){printf("A");}else if(x>81 && x<94){printf("B");}else if(x>70 && x<8…...
@pytest.fixture() 跟 @pytest.fixture有区别吗?
在iOS UI 自动化工程里面最早我用的是pytest.fixture(),因为在pycharm中联想出来的fixture是带()的,后来偶然一次我没有带()发现也没有问题,于是详细查了一下pytest.fixture() 和 pytest.fixtur…...
docker run命令大全
docker run命令大全 基本语法常用选项基础选项资源限制网络配置存储卷和挂载环境变量重启策略其他高级选项示例总结docker run 命令是 Docker 中最常用和强大的命令之一,用于创建并启动一个新的容器。该命令支持多种选项和参数,可以满足各种使用场景的需求。以下是 docker ru…...