java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述
在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现。
解决方案
首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示。
.wxml中(播放进度结构的代码):
{{play.currentTime}}
{{play.duration}}
在上述代码中,第五行用到了slider组件,其值为播放进度 play.percent。
.wxss中(播放进度样式的代码) :
.content-play-progress{
display: flex;
align-items: center;
margin: 0 35rpx;
font-size: 9pt;
text-align: center;
}
.content-play-progress>view{
flex: 1;
}
保存上述代码后,运行程序,效果如图:
图 1 微信小程序进度条的实现
.js中(控制进度条的进度和时间的代码) :
onReady: function(){
this.audioCtx=wx.createInnerAudioContext()
var that=this
//播放失败检测
this. audioCtx.onError(function(){
console.log( ‘ 播放失败: ' +that.audioCtx.src)
})
//播放完成自动换下一曲
this. audioCtx.OnEnded(function(){
that.next()
})
//自动更新播放进度
this. audioCtx.onPlay(function(){
this. audioCtx.onTimeUpdate(function(){
that.setData({
‘ play.duration ' : formatTime(that.audioCtx.duration),
‘ play.currrentTime ' : formatTime(that.audioCtx. currrentTime),
‘ play.percent ' : that.audioCtx. currrentTime /
that.audioCtx.duration*100
})
})
//默认选择第一曲
T his.setMusic(0)
//格式化时间
function formatTime(time){
var minute=Math.floor(time/60)%60;
var second=Math.floor(time)%60
return (minute<10? ' 0 ' +minute:minute)+ ' : ' +
(second<10? ' 0 ' +second:second)
}
})
}
上述代码中,通过调用audioCtx的 onTimeUpdate() 的方法,获取音视频状态信息,并通过 formatTime() 函数处理时间格式,最后渲染到页面实现实时更新效果,效果如图:
图 2 微信小程序进度条的滑动
在slider组件上绑定 bindchange 事件,可以实现滑动进度条调节音视频文件播放进度,代码示例 :
在.js文件中编写 sliderChange 函数获取用户当前选择的进度,将时间通过 audioCtx 对象的 seek() 方法进行设置,代码示例:
sliderChange: function(e){
var second=e.detail.value* that.audioCtx.duration/100
that.audioCtx.seek(secend)
},
总结
到此这篇关于微信小程序实现音频文件播放进度的实例代码的文章就介绍到这了,更多相关小程序音频文件播放进度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码相关推荐
- 微信公众账号后台怎么解除小程序_微信小程序解除绑定 微信小程序怎么授权...
该如何注销小程序? 微信小程序目前无法取消,也是微信小程序最脆弱.最无助的地方.如果你确定你不想要这个小程序,你可以转移和改变主题和其中的所有信息,这样你的小程序就会变成别人的小程序,与你无关.相当于 ...
- 简单分享怎么开发自己的微信小程序_微信小程序快速制作步骤
小程序开发除了专业人士会自己开发之外,就是外包开发和模板搭建这两种方法. 外包小程序开发需要持续不断地与外包团队沟通,投入的精力也不少,总体价格不低,基本在万元左右, 最适合新手的还是小程序模板搭建啦 ...
- 上传声音 微信小程序_微信小程序之----audio音频播放
audio audio为音频组件,我们可以轻松的在小程序中播放音频. audio组件属性如下: 属性名类型默认值说明 id String video 组件的唯一标识符, src String 要播放音 ...
- 上传声音 微信小程序_微信小程序录音文件保存,播放
最近做微信小程序需要把录音文件保存起来然后在另一个地方再播放,录音用的是wx.startRecord接口返回的是录音文件的临时路径,开始以为是和选择图片保存图片没什么两样的操作,结果和后端同事一起折腾 ...
- JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下 这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
- java反编译微信小程序_微信小程序反编译的实现
首先声明:本文章仅供学习之用,不可它用. 一.前言 看到人家上线的小程序的效果,纯靠推测,部分效果在绞尽脑汁后能做出大致的实现,但是有些细节,费劲全力都没能做出来.很想一窥源码?查看究竟?看看大厂的前 ...
- input ios问题 小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色 卸载placeholder-class里面的co ...
- php mysql特殊符号过滤微信小程序_微信小程序数据过滤(filter)方法
因为微信小程序的wxml和js的内部实现机制是分开编译的.所以在wxml是没办法调用js的函数的.这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据做一些特殊处理.比如我们从后端获取 ...
- object picker 微信小程序_微信小程序 demo分享
选择器示例demo: 1.普通选择器 2.多列选择器 3.时间选择器 4.日期选择器 5.省市区选择器 wxml 普通选择器:(普通数组) 当前选择:{{array[index]}} 普通选择器2:( ...
最新文章
- php 记事本源代码_php实现记事本案例
- 用 Flask 来写个轻博客 (27) — 使用 Flask-Cache 实现网页缓存加速
- ThinkPHP3验证码、文件上传、缩略图、分页(自定义工具类、session和cookie)
- filter执行先后问题_filter的执行顺序是怎样的?
- 程序员职业自由6个阶段,你处于哪个?
- ElasticSearch之term vector
- pyhton链式赋值在可变类型/不可变类型上的区别以及其本质
- stm32 vscode 编译_STM32开发之 VSCode+gcc环境编译
- 手机窃取PC信息,APT基础。
- C/C++中如何接收return返回来的数组元素
- 高清图片、视频素材免费下载
- 如何修改input提示文字样式
- 本地化部署方案 VS 云托管方案
- Emacs 新闻组 之四 联系人管理
- java 邮件 加密_基于Java的邮件加密解密
- 使用 Ruby 开发代码生成器
- 服务器网页能进去app进不去怎么办啊,ao3网页版进入 ao3进不去怎么办
- ubuntu/linux系统知识(17)图形化的包管理工具Synaptic
- C# string格式化(小数点保留/进制转换等)
- linux定时任务整点执行,Linux 设置定时任务crontab命令