微信小程序 条形加载读取进度 切换音频进度。简单实现（官方文档）
自定义实现音频播放，连接如下
https://blog.csdn.net/qq_35349982/article/details/102778340
这个是官方的音频
wxml文件 。主要是 slider标签的属性
<view class="page"><view class="page__hd"><text class="page__title">audio</text><text class="page__desc">音频</text></view><view class="page__bd"><view class="section section_gap"><audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio></view></view><view class="section section_gap"><text class="section__title">播放</text><view class="body-view"><button bindtap="playAudio">播放</button></view></view><view class="section section_gap"><text class="section__title">暂停</text><view class="body-view"><button bindtap="pauseAudio">暂停</button></view></view><view class="section section_gap"><text class="section__title">进度</text><view class="body-view"><slider bindchange="timeSliderChanged" bindchanging="Changed" value="{{sliderV}}" max="{{sliderMax}}" left-icon="cancel" right-icon="success_no_circle"/></view></view>
</view>
js文件 。主要是滑动的监听函数。设置一个bool值
Page({data: {bo:true,sliderV:0,sliderMax: 414,current: {poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',name: '此时此刻',author: '许巍',src: 'https://img.kuang100.net/daoyou/yinping/1568713339138.mp3',},audioAction: {method: 'pause'}},audioPlayed: function (e) {console.log('audio is played')},audioTimeUpdated: function (e) {if (this.data.bo) {console.log("正在播放")//设置滚动条this.setData({sliderV: e.detail.currentTime,bo: true});this.duration = e.detail.duration;}},timeSliderChanged: function (e) {console.log("拖动完成")if (!this.data.bo){this.setData({bo:true,audioAction: {method: 'setCurrentTime',data: e.detail.value}});}},Changed: function(e) {console.log("正在拖动")this.setData({bo: false});},playAudio: function () {this.setData({audioAction: {method: 'play'}});},pauseAudio: function () {this.setData({audioAction: {method: 'pause'}});},
})
代码仓库地址:https://gitee.com/gy297879328/applet_development.git
微信小程序 条形加载读取进度 切换音频进度。简单实现（官方文档）相关推荐
- 微信小程序 条形加载读取进度 切换音频进度。简单实现（自定义音频界面实现）
一开始用的官方组件发现是固定的.太丑了(代码如下) https://blog.csdn.net/qq_35349982/article/details/102740252 于是自己又搞了一个,踩了踩坑 ...
- 微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
- 微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多 组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
- 微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
- 微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载 在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题 在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题 问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
- 微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
- 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
最新文章
- [05]EXTJS4.0的读写器reader,writer
- Linux深入理解Socket异常
- 使用JQUERY实现局部页面定时刷新
- hdfs mv命令_如何HDFS mv命令工作
- Jmeter之Bean shell使用（二）
- IT资料，重磅来袭！
- [其它] - 为什么中国的程序员技术偏低
- python判断_python的判断
- Matplotlib 中文用户指南 3.5 艺术家教程
- mysql 图片转为二进制_php 图片转为二进制数据的方法
- asp.net添加自定义用户控件并传值
- 分布式游戏网关--fooking
- Sourse Insight使用过程中的常使用功能简介
- Python selenium 文件自动下载 （自动下载器）
- delphi xe6 让 ListView 在 Android 可回弹[根据龟山阿卍原创修改为xe6版本]
- 记事本编码html乱码,记事本乱码怎么办【解决方法】
- html静态网页模板如何上传,html – 如何使用模板生成静态网页？
- 付款方对接银联入网仿真测试系统
- linux数据库删除命令大全,linux删除数据库命令
- 怎么知道服务器是否正版,盗版太坑爹！五招识别Win7旗舰版正版