微信小程序 audio 組件實例詳解

更新時間：2016年09月28日 09:15:07 作者：順子_RTFSC

這篇文章主要介紹了微信小程序 audio 組件實例詳解的相關(guān)資料,需要的朋友可以參考下

音頻播放已經(jīng)封裝的很好！只需配合屬性設置即可！（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">調(diào)為1倍速</button>
<!--慢放-->
<button type="primary" bindtap="audioPlaybackRateSlowDown">調(diào)為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
 }
 })
}
})

相關(guān)文章：

hello WeApp                     icon組件
Window                             text組件                                 switch組件
 tabBar底部導航               progress組件                         action-sheet
應用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件