uniapp 音乐播放器监听进度

6 篇文章 0 订阅
6 篇文章 0 订阅
//音频进度更新事件
//current和duration初始化为0即可
//audio就看个人需要,有媒体音乐和背景音乐两种,在uniapp官网找自己需要的即可
this.audio.onTimeUpdate(() => {
    console.log('音频进度条发生更新')
    this.current = this.audio.currentTime;
    if (!this.duration) {
        this.duration = this.audio.duration;
    }
    if (this.duration > 0) {
        if (this.current === this.duration) {
            this.slideWidth = 100;
            return;
        }
        // this.slideWidth = parseInt(((parseInt(value) / parseInt(this.duration)) * 100).toFixed(2))
        // 计算百分数,也就是进度条的长度
        this.slideWidth = Number(((this.current / this.duration) * 100).toFixed(4));
    }
});
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现进度条,需要以下步骤: 1. 在页面中引入uni-ui组件库,可以使用uni-progress组件来实现进度条。 2. 绑定uni-progress组件的value属性到当前歌曲的播放进度,可以使用uni.getBackgroundAudioManager()获取全局唯一的背景音频管理器,通过onTimeUpdate事件监听音乐播放进度的变化,在事件回调中更新进度条的value属性。 3. uni-progress组件提供了一个show-info属性,可以用来显示进度条的百分比,可以根据需要选择是否显示。 4. 如果需要拖动进度条来调整歌曲的播放进度,可以给uni-progress组件绑定一个change事件,当进度条的值发生变化时,在事件回调中调用背景音频管理器的seek方法来跳转到指定的播放时间。 示例代码如下: ```html <template> <view> <audio :src="musicUrl" @play="onPlay" @pause="onPause"></audio> <uni-progress :value="progress" show-info @change="onChange"></uni-progress> </view> </template> <script> export default { data() { return { musicUrl: 'http://music.163.com/song/media/outer/url?id=1330348068.mp3', playing: false, duration: 0, currentTime: 0, progress: 0, } }, mounted() { uni.getBackgroundAudioManager().onTimeUpdate(() => { const audio = uni.getBackgroundAudioManager() this.duration = audio.duration this.currentTime = audio.currentTime this.progress = this.currentTime / this.duration * 100 }) }, methods: { onPlay() { this.playing = true }, onPause() { this.playing = false }, onChange(e) { const audio = uni.getBackgroundAudioManager() const position = e.detail.value / 100 * this.duration audio.seek(position) }, } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值