文档章节

微信小程序把玩(二十七)audio组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 160
阅读 10
收藏 0
点赞 0
评论 0

这里写图片描述

音频播放已经封装的很好!只需配合属性设置即可! (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
    }
  })
}
})

本文转载自:http://blog.csdn.net/u014360817/article/details/52672816

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
迅速上手:使用taro构建微信小程序基础教程

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用t...

mytac
07/18
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
04/18
0
0
Taro实践 - 快速开发【知乎】多端应用

来自团队小伙伴 - 阿集,关于 Taro 上手实践的一篇文章,希望对大家的使用有所帮助。 1. Taro 简介 是由凹凸实验室打造的一套遵循 语法规范的多端统一开发框架。 使用 ,我们可以只书写一套代...

凹凸实验室
06/27
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
01/25
644
2
憧憬Licoy/wepy-com-loadings

微信小程序Loading加载动画组件 基于Wepy开发的微信小程序loading加载动画组件 说明 安装 npm i wepy-com-loadings 使用 import wepy from 'wepy'import Loadings from "wepy-com-loadings"e...

憧憬Licoy
04/26
0
0
微信小程序 UI 组件库 - iView Weapp

iView Weapp —— 一套高质量的微信小程序 UI 组件库 iView Weapp 是什么? 微信小程序提供了自定义组件的功能,这使得 iView Weapp 成为了可能。小程序已经提供了很多组件和 API,但它们过于...

aresn
06/11
0
0
透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度
01/26
0
0
iView 发布微信小程序 UI 组件库 iView Weapp

末尾有彩蛋。 过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。 与此同时,我们也在思考,除了服务 PC Web...

Aresn
06/11
0
0
小程序UI组件库iView Weapp发布,开源、

TalkingData温馨提示:文末有彩蛋哟 过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。 与此同时,我们也在...

查杰
07/03
0
0
微信小程序开发--『狗蛋TV』

狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。 线上开...

李帅醒
05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

istio源码分析之pilot-discovery模块分析

本文分析的istio代码版本为0.8.0,commit为0cd8d67,commit时间为2018年6月18日。 本文为Service Mesh深度学习系列之一: Service Mesh深度学习系列part1—istio源码分析之pilot-agent模块分...

xiaomin0322
8分钟前
0
0
数据库基本操作:增删改查及联表操作

所用软件:SQL Server Management Studio 首先第一步,建立一个表。在这里命名为T1。并在里面填入几条数据。如图: T1 一.查询 查询所有:select * from T1; 按条件查询:select * from T1 ...

小_橙_子
12分钟前
0
0
Crontab作业时间设置

今天,遇到这么一个题目,周一到周五的9:00-16:59之间,每隔两分钟将某个命令运行一次。给的答案是: */2 9-16 * * 1-5 /usr/sbin/somecommand dosomething 乍一看,这个答案不对,应...

大别阿郎
17分钟前
0
0
ES17-JAVA API文档管理

1.保存文档 可以通过json工具把java对象转换成json字符串进行保存,也可以通过内置的帮助类直接构建json格式 /** * 获取客户端 * * @return */public static TransportClie...

贾峰uk
17分钟前
0
0
Python代码规范和命名规范

前言 Python 学习之旅,先来看看 Python 的代码规范,让自己先有个意识,而且在往后的学习中慢慢养成习惯 一、简明概述 1、编码 如无特殊情况, 文件一律使用 UTF-8 编码 如无特殊情况, 文件头...

blackfoxya
20分钟前
0
0
联动滑动之一:NestScrollChild和NestedScrollingParent

NestScrollChild和NestedScrollingParent 吐槽一下开源中国竟然标题字数有限制 由于项目中使用了CoordinateLayout来解决联动以及实现炫酷的UI效果,那么必须就要研究一波源码了,毕竟知其然知...

JerryLin123
37分钟前
1
0
cloudera spark2.2 读写hbase

cloudera spark2.2 读写hbase 例子 host = 'bigdata-03,bigdata-05,bigdata-04'conf = { "hbase.zookeeper.quorum": host, "hbase.mapreduce.inputtable": "student1"}k......

osenlin
42分钟前
0
0
数据库规范化

转载自 一个小时学会MySQL数据库 地址:http://www.cnblogs.com/best/p/6517755.html 截取其中 1.4 部分 用于自己学习使用 感谢作者:张果 1.4、数据库规范化 经过一系列的步骤,我们现在终于...

十万猛虎下画山
43分钟前
0
0
ios逆向之工具篇

Reveal:查看任意app的UI结构 注:1.不越狱的手机,可以用Reveal来查看自己app的UI结构,不能查看其它app的结构。 2.越狱手机上可以查看任意app的UI结构。 IDA:反编译工具 从App Store下载的...

HeroHY
43分钟前
0
0
EOS区块链平台智能合约示例HelloWorld

我们将介绍一个使用EOS智能合约构建hello World的例子。 一般环境设置通过上一篇文章已经说明,这方面的问题大家可以看本博客上一篇文章,本文引用了官方EOS在Git上的示例。 运行nodeos 要通...

笔阁
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部