combination/miniprogram/packageAPI/pages/media/voice/voice.wxml

<import src="../../../common/head.wxml" />
<import src="../../../common/foot.wxml" />

<view class="container page" data-weui-theme="{{theme}}">
  <template is="head" data="{{title: '录音/音频'}}"/>

  <view class="page-body">
    <view class="page-section">
      <block wx:if="{{recording === false && playing === false && hasRecord === false}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="startRecord">
            <image src="/image/record.png"></image>
          </view>
          <view class="page-body-button"></view>
        </view>
      </block>

      <block wx:if="{{recording === true}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="stopRecord">
            <view class="button-stop-record"></view>
          </view>
          <view class="page-body-button"></view>
        </view>
      </block>

      <block wx:if="{{hasRecord === true && playing === false}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedPlayTime}}</text>
          <text class="time-small">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button"></view>
          <view class="page-body-button" bindtap="playVoice">
            <image src="/image/play.png"></image>
          </view>
          <view class="page-body-button" bindtap="clear">
            <image src="/image/trash.png"></image>
          </view>
        </view>
      </block>

      <block wx:if="{{hasRecord === true && playing === true}}">
        <view class="page-body-time">
          <text class="time-big">{{formatedPlayTime}}</text>
          <text class="time-small">{{formatedRecordTime}}</text>
        </view>
        <view class="page-body-buttons">
          <view class="page-body-button" bindtap="stopVoice">
            <image src="/image/stop.png"></image>
          </view>
          <view class="page-body-button" bindtap="pauseVoice">
            <image src="/image/pause.png"></image>
          </view>
          <view class="page-body-button" bindtap="clear">
            <image src="/image/trash.png"></image>
          </view>
        </view>
      </block>
    </view>
  </view>

  <template is="foot" />
</view>