「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
// 文件名：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%');
}
}