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

2019-11-20 08:51:40

字體：大中小

來源：轉載

供稿：網友

音頻播放已經封裝的很好！只需配合屬性設置即可！（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>

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 } })}})

相關文章：

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