1. 程式人生 > >微信小程式把玩(二十七)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 } }) } })