HarmonyOS鸿蒙Next中如何做一个实时的avPlayer的音乐进度条？

HarmonyOS鸿蒙Next中如何做一个实时的avPlayer的音乐进度条？ 目前项目中用的是avPlayer播放音乐，已经实现了播放和暂停的功能，但是不知道该怎么做进度条。

我希望这个进度条能实现以下几点功能：
1、能够正确显示歌曲的时长

2、能够实时显示歌曲播放的时间

3、能够手动滑动实现音乐的快进或后退

以上是我希望能够实现的功能，如果大家有经验、有思路，欢迎大家答复，在此谢谢！

8 回复

滑块及进度条自定义：滑块及进度条自定义是影音娱乐类应用中高频场景之一，如用户播放视频时需要调节音量、亮度、饱和度、弹幕透明度、字体大小及颜色深浅等；

更多关于HarmonyOS鸿蒙Next中如何做一个实时的avPlayer的音乐进度条？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的，

这有个写好的项目，功能强大：

https://gitee.com/harmonyos_samples/audio-interaction

cke_2294.png cke_2403.png

├──entry/src/main/ets/
│  ├──common
│  │   ├──constants                     // 常量
│  │   └──utils                         // 工具
│  ├──components                        // 各模块组件
│  │   ├──ControlAreaComponent.ets      // 音频操控区组件
│  │   ├──LyricsComponent.ets           // 歌词组件
│  │   ├──MusicInfoComponent.ets        // 音乐内容组件
│  │   ├──PlayerInfoComponent.ets       // 播控内容区组件
│  │   └──TopAreaComponent.ets          // 顶部区域组件
│  ├──dataSource                        // 歌单数据
│  │   ├──SongDataSource.ets            // 歌曲数据
│  │   └──SongListData.ets              // 歌曲列表数据
│  ├──entryability
│  │   └──EntryAbility.ets              // Ability的生命周期回调内容
│  ├──entrybackupability
│  │   └──EntryBackupAbility.ets        // EntryBackupAbility的生命周期回调内容
│  ├──lyric                             // 歌词功能
│  └──pages                             // 页面
├──MediaService/src/main/ets
│   ├──songDataController                // 歌曲信息数据
│   │   ├──PlayerData.ets                // 播放数据
│   │   ├──SongData.ets                  // 歌曲源数据
│   │   └──SongItemBuilder.ets           // 歌曲组合数据
│   └──utils
│       ├──AudioRendererController.ets   // 音频播放控制
│       ├──AVSessionController.ets       // 媒体会话控制
│       ├──BackgroundUtil.ets            // 后台播放功能
│       ├──Logger.ets                    // 日志功能
│       ├──MediaTools.ets                // 媒体数据转换工具类
│       └──PreferencesUtil.ets           // 首选项存储功能
└──entry/src/main/resources              // 应用静态资源目录

好的，谢谢，

基础功能

1获取歌曲总时长

const totalSeconds = Math.floor(avPlayer.duration / 1000000);

2 实时更新播放进度

avPlayer.on('timeUpdate', (currentTime: number) => {
  this.currentPosition = currentTime; // 单位：微秒
  this.currentSeconds = Math.floor(currentTime / 1000000);
});

3 使用 Slider 组件展示进度条并绑定数据：

Slider({
  value: this.currentSeconds,
  min: 0,
  max: this.totalSeconds,
  onChange: (value: number) => { /* 处理拖动逻辑 */ }
})

手动滑动控制

1 在 onChange 回调中记录目标位置并更新UI：

private targetPosition: number = 0;

Slider({
  onChange: (value: number) => {
    this.targetPosition = value * 1000000; // 转换为微秒
    // 更新展示的拖动时间（非实际跳转）
  }
})

2在 onChangeEnd 回调中调用 seekTo 方法执行跳转：

Slider({
  onChangeEnd: () => {
    avPlayer.seekTo(this.targetPosition, media.SeekMode.SEEK_PREVIOUS_SYNC);
  }
})

时间格式化显示

实现毫秒转分钟/秒的格式化函数：

private formatTime(seconds: number): string {
  const min = Math.floor(seconds / 60).toString().padStart(2, '0');
  const sec = (seconds % 60).toString().padStart(2, '0');
  return `${min}:${sec}`;
}

好的，谢谢，我试试，

在HarmonyOS Next中，使用AVPlayerController获取播放进度。通过on(‘timeUpdate’)监听时间变化事件，实时更新UI进度条。使用Slider组件展示和交互进度，绑定currentProgressTime与duration属性实现动态刷新。确保在ArkTS中正确管理状态与事件回调。

在HarmonyOS Next中实现avPlayer的实时进度条，可以通过以下步骤完成：

  1. 获取音频总时长：通过avPlayer.getDuration()获取音频总时长（毫秒），转换为秒或分钟格式用于显示。

  2. 实时更新播放进度：使用定时器（如setInterval）或监听timeupdate事件，定期调用avPlayer.getCurrentTime()获取当前播放位置，并更新进度条UI。

  3. 实现进度条交互：使用<slider>组件，绑定value属性到当前播放时间，并监听change事件。当用户拖动时，调用avPlayer.seekTo(value)跳转到指定位置。

示例代码片段：

// 初始化avPlayer和Slider
const avPlayer = ...; // 初始化avPlayer
const slider = ...; // 获取Slider组件

// 更新总时长
slider.max = avPlayer.getDuration();

// 定时更新进度（每500ms）
setInterval(() => {
  slider.value = avPlayer.getCurrentTime();
}, 500);

// 监听Slider拖动事件
slider.on('change', (value) => {
  avPlayer.seekTo(value);
});

注意处理生命周期和性能，避免频繁更新导致卡顿。

回到顶部