文档章节

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

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:22
字数 160
阅读 16
收藏 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
江门
高级程序员
微信小程序端 html2wxml 转换接口 - html2wxml4j

项目介绍 微信小程序端 html2wxml 转换接口 Java版 基于JFinal+Jsoup 实现功能 目前仅实现解析Html并转换成JSON,将生成的JSON通过接口访问返回给微信小程序端, 微信小程序端使用html2wxml...

山东-小木
08/06
0
0
微信小程序 Html2Wxml4J 0.95 更新,支持 Video 和 Audio 解析

html2wxml4J是微信小程序前端html渲染组件html2wxml的后台接口Java版 本次更新内容: 【新增】Video视频标签解析 支持html5中Video标签大部分属性 支持自动播放 支持静音播放 【新增】Audio...

山东-小木
08/07
0
3
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
【值得收藏】微信小程序开发干货合集,快上车!

小程序的成功,让广大程序员早已不再纠结该不该学习小程序开发 ,但会纠结如何学习小程序开发,为帮助大家更好的学习小程序开发,特地整理一批相关学习资源,供大家交流学习! 近期优秀文章 ...

慕课网
08/10
0
0
微信小程序开发框架从入门到放弃

用框架是不可能用框架的,这辈子都不可能用框架。 微信小程序上手成本低,开发成本低,流量红利,推广成本低等等,很多公司的创业项目都会首选小程序来试水,小程序开发太火爆了,苦逼了前端工...

Runner羊
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

零拷贝I:用户模式视角

英文原文地址:http://www.linuxjournal.com/article/6345。内容是关于 Zero Copy(零拷贝) 的详细介绍。在RocketMQ的Consumer 消费消息过程,使用了零拷贝技术。作用是即使被频繁调用,文件传...

Jacktanger
6分钟前
1
0
记在k8s的pod上使用apache的commons-net:ftp功能时,ftp一直上传文件失败

在k8s的pod上使用apache的commons-net:ftp功能时,一直显示: 即上传文件失败,但是在本地环境进行上传时却又显示上传成功,让人十分不解。在网上搜索了一下ftp的一些资料发现ftp共有两种模式...

helplove
7分钟前
0
0
Go map实现原理

map数据结构 Golang的map使用哈希表作为底层实现,一个哈希表里可以有多个哈希表节点,也即bucket,而每个bucket就保存了map中的一个或一组键值对。 map数据结构由runtime/map.go/hmap定义:...

恋恋美食
14分钟前
0
0
debian python library re-install

apt-get install python-aptsudo apt-get install python-pkg-resources python-setuptools --reinstall...

关上越
19分钟前
0
0
Elasticsearch地理位置总结

更多内容请参考 : https://www.felayman.com 翻译版本:https://es.xiaoleilu.com/310_Geopoints/00_Intro.html 官方原文:https://www.elastic.co/guide/en/elasticsearch/guide/current/g......

xiaomin0322
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部