首页 > 编程语言 >微信小程序slider抖动

微信小程序slider抖动

时间:2023-04-01 19:48:51浏览次数:34  
标签:log currentTime 抖动 微信 audioctx value slider 拖动 let

问题描述:做一个音乐播放器的UI,想要使用slider做歌曲进度条,能拖动那种。为了使进度条自动向前,设置了一个interval,每500ms更新一次,用audioctx.currentTime更新,有拖动的时候用拖动值更新。拖动进度条的时候发现:从B点拖到A点,小圆圈回先退回B点,然后弹回A点。声音播放没有回退现象,就是进度条piaji一下看得不爽。

解决方案:经过一系列尝试,最后在三个地方log:seek后的currentTime,拖动值,以及用来更新的currentTime:

        slider(e:any){
            let value=Number(e.detail.value);
            audioctx.seek(value);
            console.log("0:"+audioctx.currentTime);this.setData({
                isChanging:false, 
                timeId:setInterval(()=>{
                    if(this.data.isPlaying&&!this.data.isChanging){
                        this.update();
                    }
                },500)
            })
        },
        update(newVal?:Number){
            let value=newVal?newVal:audioctx.currentTime;
            console.log("1:"+value);
            console.log("2:"+audioctx.currentTime);
            let max=audioctx.duration;
            ......
        },

log结果如下:

 

 可以发现是seek后currentTime并没有立即更新导致的回退。但不知道为什么setTimeout并没有用,于是只能自己算时间了,拖动时清除上一个interval,拖动结束重新定时,反正误差不大:

        slider(e:any){
            let value=Number(e.detail.value);
            audioctx.seek(value);
            console.log("0:"+audioctx.currentTime);
            let i=0;
            this.setData({
                isChanging:false, 
                timeId:setInterval(()=>{
                    if(this.data.isPlaying&&!this.data.isChanging){
                        this.update(value+0.5*i);
                        i++;
                    }
                },500)
            })
        },
        update(newVal?:Number){
            let value=newVal?newVal:audioctx.currentTime;
            console.log("1:"+value);
            console.log("2:"+audioctx.currentTime);
            let max=audioctx.duration;
            while(value>lyricTime[lyricIndex]&&value>lyricTime[lyricIndex+1]){
                lyricIndex++;
                if(lyricIndex===lyricTime.length)
                    break;
            }
            while(value<lyricTime[lyricIndex]&&value<lyricTime[lyricIndex-1]){
                lyricIndex--;
                if(lyricIndex===0)
                    break;
            }
            this.setData({
                max:max,
                value:value,
                currentTop:lyricPos[lyricIndex]-lyricPos[0],
                currentIndex:lyricIndex
            });  
        },

 

标签:log,currentTime,抖动,微信,audioctx,value,slider,拖动,let
From: https://www.cnblogs.com/capterlliar/p/17279175.html

相关文章

  • 微信小程序登录、获取用户信息的流程及实现
    微信小程序登录、获取用户信息的流程及实现本篇文章将通过以下三步,让你了解到小程序登录、和用户信息获取的微信生态变迁,和流程上前后端技术实现。小程序登录流程小程序获取手机号小程序获取头像昵称小程序登录小程序登录是通过微信官方提供的登录能力,获取微信提供的用......
  • 暂停在博客园发布文章,请亲爱的读者们移步同名微信公众号
     各位亲爱的读者们,从2023年3月起,本人将暂停在博客园发布新文章,请移步本人的微信公众号“世民谈云计算”。公众号文章将同步至知乎同名号和头条同名号。感谢您一直以来的关注! 扫码关注本人的微信公众号: 知乎创作中心:https://www.zhihu.com/people/sammy-1-91/posts ......
  • 使用 wine 安装微信遇到的问题解决方法
    1.中文显示成方块添加启动环境变量:LANG=zh_CN.UTF-82.输入框不显示文字安装winetrickssudoaptinstallwinetricks#oryay-Sywinetricks然后安装riched20winetricksriched20......
  • 微信小程序之实现封装一个富文本编辑器 Editor
    前言富文本编辑器,可以对图片、文字进行编辑。编辑器导出内容支持带标签的html和纯文本的text,编辑器内部采用delta格式进行存储。通过setContents接口设置内容时,解析插入的html可能会由于一些非法标签导致解析错误,建议开发者在小程序内使用时通过delta进行插入。富文本......
  • 微信小程序组件化开发教程、微信小程序组件化开发示例代码
    微信小程序中的组件化开发可以使用template和Component两种方式来实现。template模板实现组件template模板是一种很简单的组件化方式,通常用于展示静态的内容。可以将页面中的某一段代码封装为一个template模板,再在需要使用的地方引入该模板即可。下面以一个简单的自定......
  • 微信小程序中图片上传
    封装了图片上传组件,支持多张上传,图片预览代码如下:组件调用:index.tsx<UploadPicmaxNumber={3}fileList={pics}fileChange={(e)=>{console.log('e',e)setPics(e)}}/>图片上传封装UploadPic.tsximportReactfrom'react';importTarofrom&......
  • SpringBoot 集成微信支付的各种支付产品
    SpringBoot是一款非常流行的Java开发框架,而微信支付则是众多移动支付产品中的佼佼者,整合两者可以让我们更方便地开发各种支付产品。在本篇博客中,我将介绍如何在SpringBoot中整合微信支付的各种支付产品。准备工作微信支付官网注册一个微信支付商户账号创建一个微信支付应用......
  • 微信小程序累计独立访客(UV)不低于 1000 是什么意思
    首先微信小程序“累计独立访客(UV)不低于1000”是指UV是UniqueVisitor的英文缩写,1天内相同的访客多次访问您的网站只计算1个UV,以cookie为依据。简单的说就是指:累计的不同IP的访客合计达到1000+才能开通流量主独立访客(UV)名词:UV=UniqueVisitor(独立访客数)说明:1天内相同的访客多......
  • 微信小程序i18n文件夹新增语言文件报:module is not defined
    背景:微信开发者工具的版本:1.06.2303060Stable 解决步骤:1.首先需要排除的是代码逻辑层面没有问题,对应要require的js文件也存在。2.升级微信开发者工具到最新版本3.打开详情=》本地设置,把“将JS编译成ES5”的去掉勾选后再次选择4.重新打开项目......
  • 分析微信好友数据,可以可视化好友男女比例分布,可视化省份来源,可视化签名的情感强度值
    一、分析数据可视化好友男女分布比例 1plt.rcParams['font.sans-serif']=['SimHei']2#用来正常显示中文标签3plt.rcParams['axes.unicode_minus']=False45#1.读取csv文件,把性别信息读取出来6defgetSex(filename):7lstsex=[]8withopen(fi......