很简单的一个音乐播放器

data:{

src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
currentTime: 0,
duration: 0,
result: '00:00',
isOpen:false,/**是否播放 */

}

onLoad: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('myAudio')
var that=this;
wx.setNavigationBarTitle({
title: that.data.name
});
},
audioPlay: function () {
this.audioCtx.play()
this.setData({
isOpen: true
})
},
audioPause: function () {
this.audioCtx.pause()
this.setData({
isOpen: false
})
},
 
updata(e) {
var that = this;
// console.log((e.detail.currentTime / 100).toFixed(2))
let duration = e.detail.duration.toFixed(2) * 100,
currentTime = e.detail.currentTime.toFixed(2) * 100;
that.setData({
duration: duration,
currentTime: currentTime
})
that.formatSeconds(currentTime / 100);
},
sliderChange(e) {
var that = this
that.setData({
currentTime: e.detail.value
})
that.audioSeek(e.detail.value)
},
audioSeek: function (currentTime) {
this.audioCtx.seek(currentTime / 100)
},
 
wxml
 
<audio src="{{src}}" id="myAudio" bindtimeupdate="updata"></audio>
<view class="progress">
<text>{{result}}</text>
<slider bindchange="sliderChange" step="2" value="{{currentTime}}" max="{{duration}}" class="slider" selected-color="#ff5e5e"/>
<text>{{times}}</text>
</view>
<view class="audioOpen" bindtap="audioPlay" wx:if="{{!isOpen}}">
<image src="../../../../style/images/icon28.png"/>
</view>
<view class="audioOpen" bindtap="audioPause" wx:if="{{isOpen}}">
<image src="../../../../style/images/icon31.png"/>
</view>

微信小程序做radio,可以拖动进度条的更多相关文章

  1. 微信小程序纯css制作圆形进度条所遇到的问题

    wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...

  2. 用微信小程序做H5游戏尝试

    微信小程序发布后,公司虽然没有拿到第一批内测资格,但作为微信亲密合作伙伴,一定要第一时间去尝试啦.现在微信小程序刚发布还在测试阶段,可以说是1.0版本,所以框架和结构内容都还不多,相关的文档跟微信AP ...

  3. 微信小程序_(组件)可拖动movable-view

    微信小程序movable-view组件官方文档 传送门 Learn 一.moveable-view组件 一.movable-view组件 direction:movable-view的移动方向,属性值 ...

  4. 用微信小程序做一个小电商 sku

    效果展示图 功能点概述 图一功能点有 搜索 轮播图 商品展示 图二功能点 导航栏 加入购物车 图四功能点 评论点 图五购物车 复选框 ( 全选全不选 ) 即点即改 总计结算 功能详解 1.A(搜索) ...

  5. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

  6. 微信小程序组件radio

    表单组件radio:官方文档 Demo Code: Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: ' ...

  7. 微信小程序 - 下载图片并且显示进度

    lastUpDate: 2018-8-12 请把请求地址加入到downLoadFile 提示:首先得要在公众号设置对应的downLoadFile地址. downImg : 下载图片 wxml js d ...

  8. 微信小程序 改变radio(单选钮)默认大小

    /* 单选钮样式 */ radio { transform:scale(0.5); }

  9. 微信小程序单选按钮radio选中的值value的获取方法,setTimeout定时器的用法

    获取radio值的方法: func:function(e){ var val=e.detail.value;//获取radio值,类型:字符串 var val2=parseInt(val);//将字符 ...

随机推荐

  1. 关于Oracle.ManagedDataAccess数据库表加字段后,必须重启的问题

    关于Oracle.ManagedDataAccess数据库表加字段后,必须重启的问题,解决方法如下:在数据库连接字串中,增加一个参数:Metadata Pooling=false如“Data Sour ...

  2. RBAC权限管理设计

    一.权限简介 1. 问:为什么程序需要权限控制? 答:生活中的权限限制,① 看灾难片电影<2012>中富人和权贵有权登上诺亚方舟,穷苦老百姓只有等着灾难的来临:② 屌丝们,有没有想过为什么 ...

  3. 解决js复制在安卓和ios兼容问题

    var clipboard = new ClipboardJS('.fr', { // target: function() { // return document.querySelector('d ...

  4. linux log4j乱码问号的解决

    原因: linux本地设置的文件编码格式不是UTF-8 解决办法: 运行locale命令看一下结果: 把LC_CTYPE修改为“zh_CN.UTF-8”: cd ~/ vi .bashrc 添加: L ...

  5. Java入门:基础算法之二进制转换为十进制

    Java有两种方法可以将二进制数转换为十进制数: 1)使用Integer类的Integer.parseInt()方法. 2)自己编写转换逻辑. 方法1:使用Integer.parseInt()实现二进 ...

  6. 神经网络6_CNN(卷积神经网络)、RNN(循环神经网络)、DNN(深度神经网络)概念区分理解

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程,QQ:231469242) https://study.163.com/course/introduction.htm?courseId ...

  7. Python读写文件的几种方式

    一.pandas pandas模块是数据分析的大杀器,它使得对于文件相关的操作变得简单. 看一下它的简单使用 import pandas as pd # 读取 df = pd.read_csv('al ...

  8. Entity Framework入门教程(18)---EF6中基于代码进行配置方式

    EF6中基于代码进行配置方式 我们以前对EF进行配置时是在app.config/web.config下的<entityframework>节点下进行配置的,EF6引进了基于代码的配置方法. ...

  9. Ubuntu设置和查看环境变量

    设置环境变量的三种方法 1.1 临时设置 export PATH=/home/yan/share/usr/local/arm/3.4.1/bin:$PATH 1.2 当前用户的全局设置 打开~/.ba ...

  10. 使用/dev/poll的str_cli函数

    void str_cli(FILE *fp, int sockfd) { int stdineof; char buf[MAXLINE]; int n; int wfd; ]; struct dvpo ...