微信小程序把玩(二十七)audio组件
音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用)
主要属性:
wxml
<audio
action="{{action}}"
src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3'
poster= 'http://avatar.csdn.net/E/3/9/1_u014360817.jpg'
controls="true"
name="钢琴曲"
author="不详"/>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<!--正常速度-->
<button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>
<!--慢放-->
<button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>
js
Page({
data:{
// text:"这是一个页面"
action: {
method: ''
}
},
audioPlay:function() {
this.setData({
action: {
method: 'play'
}
})
},
audioPause:function(){
this.setData({
action: {
method: 'pause'
}
})
},
audioPlaybackRateNormal:function() {
this.setData({
action:{
method: 'setPlaybackRate',
data: 1
}
})
},
audioPlaybackRateSlowDown:function() {
this.setData({
action: {
method: 'setPlaybackRate',
data: 0.5
}
})
}
})
微信小程序把玩(二十七)audio组件的更多相关文章
- 微信小程序把玩(十七)input组件
原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml ...
- 微信小程序把玩(二十八)image组件
原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源 ...
- 微信小程序把玩(二十九)video组件
原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button ...
- 微信小程序把玩(二十四)toast组件
原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其 ...
- 微信小程序把玩(二十五)loading组件
原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...
- 微信小程序把玩(二十六)navigator组件
原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指定. 主要属性: wxml <naviga ...
- 微信小程序把玩(二十二)action-sheet组件
原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-s ...
- 微信小程序把玩(二十三)modal组件
原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件-- ...
- 微信小程序把玩(二十)slider组件
原文:微信小程序把玩(二十)slider组件 slider滑动组件用的不太多,在其他平台反正我是用的不多 主要属性: wxml <slider max="100" step= ...
随机推荐
- 【t075】郁闷的记者
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 你是一个体育报社的记者,你接受到一个艰难的任务:有N支足球队参加足球比赛,现在给你一些比赛的结果,需要 ...
- [NPM] Create a node script to replace a complex npm script
In this lesson we will look at pulling out complex npm script logic into an external JavaScript file ...
- js进阶 9-12 js如何实现级联菜单 (章节测试)
js进阶 9-12 js如何实现级联菜单 (章节测试) 一.总结 一句话总结: 1.js如何实现级联菜单 ? 二维数组,以第一级菜单的文本值做键,以对应的二级菜单选项的文本做值 2.用哪个属性可以获 ...
- Winform 中tabcontrol 美化
需要对tabcontrol按照美工出的图进行美化 对tabpage页进行标题设置,首先对整个tabcontrol的DrawMode设置为OwnerDrawFixed,由于需要对标题宽度有要求,设置si ...
- 华为软件开发云(DevCloud):免费可商用的项目管理工具
在软件开发技术和理念层出不穷的今天,如何更快的适应变化的环境,更好的满足客户的需求,已经成为决定从小到大各种规模企业能否活下去的关键. 天下武功唯快不破,在当今大环境中更是如此,微服务,敏捷开发,新的 ...
- C#之Linq、where()、FindAll()的区别
原地址 C#之Linq.where().FindAll()的区别 对于实现了IEnumerable接口的类.类型.集合可以使用Linq.Linq的扩展方法where().FindAll()来查询符合谓 ...
- apt-get install 的参数(add-apt-repository)
apt-get install 是 ubuntu 下的软件安装命令. sudo apt-get -y install: -y:yes,在命令行交互提示中,直接输入 yes: 1. 使用 add-apt ...
- HTML5 的成长之路
html5历史 w3c从2008年提出html5的概念,目前html5的版本已经趋于稳定,也逐步得到了业界的认可和接受. 以前我们有一个疑问,HTML5与Flash究竟谁将在移动互联网时代称霸市场?这 ...
- 部署NetCore项目(本文介绍用用IIS部署)
首先要下载安装Core Runtim: 然后在IIS中的模块中就可以看到如下内容: 这时环境就搭好了: 下面按照正常的发布流程走就行了,关键看下面(一定要选择无托管代码)
- 在vs中启动项目,同时给项目传递参数
问题的引出:项目在startup.cs文件中做了控制,根据读取的控制台的ip 和端口启动项目 : dotnet project --ip 127.0.0.1 --port 8001 这样写的好处是 ...