首页 > 代码库 > 微信小程序把玩(二十七)audio组件

微信小程序把玩(二十七)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.jpgcontrols="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    }  })}})
<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

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