小程序教程

微信小程序把玩（二十七）audio组件

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

音频播放已经封装的很好！只需配合属性设置即可！ （method和data配合使用）

主要属性：


wxml

  1. <audio
  2.     action="{{action}}"
  3.     src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3'
  4.     poster= 'http://avatar.csdn.net/E/3/9/1_u014360817.jpg'
  5.     controls="true"
  6.     name="钢琴曲"
  7.     author="不详"/>

  9. <button type="primary" bindtap="audioPlay">播放</button>
  10. <button type="primary" bindtap="audioPause">暂停</button>
  11. <!--正常速度-->
  12. <button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>
  13. <!--慢放-->
  14. <button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>
复制代码

js

  1. Page({
  2.   data:{
  3.     // text:"这是一个页面"
  4.     action: {
  5.       method: ''
  6.     }
  7.   },

  9.   audioPlay:function() {
  10.     this.setData({
  11.      action: {
  12.        method: 'play'
  13.      }
  14.    })
  15.   },
  16. audioPause:function(){
  17.    this.setData({
  18.      action: {
  19.        method: 'pause'
  20.      }
  21.    })
  22. },
  23. audioPlaybackRateNormal:function() {
  24.    this.setData({
  25.      action:{
  26.        method: 'setPlaybackRate',
  27.        data: 1
  28.      }
  29.    })
  30. },
  31. audioPlaybackRateSlowDown:function() {
  32.   this.setData({
  33.     action: {
  34.       method: 'setPlaybackRate',
  35.       data: 0.5
  36.     }
  37.   })
  38. }
  39. })
复制代码

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习