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

原文:微信小程序把玩(二十七)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
    }
  })
}
})

时间: 2024-09-17 11:40:16

微信小程序把玩(二十七)audio组件的相关文章

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

原文:微信小程序把玩(十七)input组件 input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" ty

微信小程序把玩(二十二)action-sheet组件

原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-sheet-item为每个选项,action-sheet-cancel取消选项,与action-sheet-item中间会有间隔,并且点击会触发action-sheet监听事件 主要属性: wxml <!--触发action-sheet事件--> <button type="prim

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

原文:微信小程序把玩(二十)slider组件 slider滑动组件用的不太多,在其他平台反正我是用的不多 主要属性: wxml <slider max="100" step="10" show-value="true" bindchange="listenerSlider" /> js Page({ data:{ // text:"这是一个页面" }, /** * 监听slider */ lis

微信小程序把玩(二十四)toast组件

原文:微信小程序把玩(二十四)toast组件 toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--t

微信小程序把玩(二十九)video组件

原文:微信小程序把玩(二十九)video组件 视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的 重要属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton">点击显示视频组件</button> <!--视频组件src资源地址,binderror为监听错误信息--> <video src="http://mvvideo1.meitudata.com/

微信小程序把玩(二十五)loading组件

原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <button type="primary" bindtap="listenerButton">显示loading</button> <!--默认隐藏--> <loading hidden="{{hiddenLoading}}&quo

微信小程序把玩(二十六)navigator组件

原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指定. 主要属性: wxml <navigator url="../index/index">点击跳转不关闭当前页面</navigator> <navigator url="../logs/logs" redirect="true" >点击跳转关闭当前页面<

微信小程序把玩(二十三)modal组件

原文:微信小程序把玩(二十三)modal组件 modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button> <!--弹出框--> <modal title="退出应用" hid

微信小程序把玩(二十八)image组件

原文:微信小程序把玩(二十八)image组件 image组件也是一个程序不可缺少的,可以这样说一个app中image组件随处可以看到,一般 image有两种加载方式第一种是网络图片第二种是本地图片资源,都用src属性去指定. 重点属性: 三种缩放模式 九种剪切方式 wxml <!--3中是缩放模式 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来.也就是说,可以完整地将图片显示出来. asp