微信小程序学习之前（2）-- radio组件

<view class="page">
  <view class="page__hd">
    <text class="page__title">卖小二的蘑菇</text>
    <text class="page__desc">这是一首美丽的音乐</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap">
      <!-- 使用audio组件获取到音乐讯息 -->
      <audio src="{{current.src}}" 
        poster="{{current.poster}}" 
        name="{{current.name}}" 
        author="{{current.author}}" 
        action="{{audioAction}}" 
        bindtimeupdate="audioTimeUpdated" 
        controls>
      </audio>
    </view>
  </view>


  <view class="section section_gap">
    <text class="section__title">开始播放</text>
    <view class="body-view">
      <button bindtap="playAudio">开始播放</button>
    </view>
  </view>


  <view class="section section_gap">
    <text class="section__title">暂停</text>
    <view class="body-view">
      <button bindtap="pauseAudio">暂停</button>
    </view>
  </view>


  <view class="section section_gap">
    <text class="section__title">播放进度</text>
    <view class="body-view">
      <slider bindchange="timeSliderChanged" 
        left-icon="cancel" 
        right-icon="success_no_circle"/>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">播放速度</text>
    <view class="body-view">
      <slider min="1" max="4" 
        bindchange="playbackRateSliderChanged" 
        left-icon="cancel" 
        right-icon="success_no_circle"/>
    </view>
  </view>
</view>

Page({
data: {
  poster: 'https://7869-xiaoqiandxiaoer-1301574130.tcb.qcloud.la/'+
          '1574985801016.png?sign=17406d93a373ac8ada28e0601d8375'+
           '28&t=1585146389',
      name: '灵秀',
      author: '双笙',
      src: 'https://7869-xiaoqiandxiaoer-1301574130.tcb.qcloud.la/'+
      '%E5%8F%8C%E7%AC%99%20-%20%E7%81%B5%E7%A7%80.mp3?sign=2f59a'+
      '74160f164a4c1259f75da887564&t=1585146420',
  },
  audioTimeUpdated (e) {
  this.duration = e.detail.duration;
  },
  //设置播放进度
  timeSliderChanged (e) {
    if (!this.duration)
      return;
    var time = this.duration * e.detail.value / 100;
    this.setData({
      audioAction: {
        method: 'setCurrentTime',
        data: time
      }
    });
  },
  //设置播放速度
  playbackRateSliderChanged (e) {
    this.setData({
      audioAction: {
        method: 'setPlaybackRate',
        data: e.detail.value
      }
    })
  },
  //音乐开始播放
  playAudio () {
    this.setData({
      audioAction: {
        method: 'play'
      }
    });
  },
  //暂停
  pauseAudio () {
    this.setData({
      audioAction: {
        method: 'pause'
      }
    });
  }
})

.green{
    color: #09BB07;
}
.red{
    color: #F76260;
}
.blue{
    color: #10AEFF;
}
.yellow{
    color: #FFBE00;
}
.gray{
    color: #C9C9C9;
}
.strong{
    font-weight: bold;
}
.bc_green{
    background-color: #09BB07;
}
.bc_red{
    background-color: #F76260;
}
.bc_blue{
    background-color: #10AEFF;
}
.bc_yellow{
    background-color: #FFBE00;
}
.bc_gray{
    background-color: #C9C9C9;
}


.tc{
    text-align: center;
}


input{
    padding: 10px 15px;
    background-color: #fff;
}
checkbox, radio{
    margin-right: 5px;
}
.btn-area{
    padding: 0 15px;
}
.btn-area button{
    margin-top: 10px;
    margin-bottom: 10px;
}
.page {
    min-height: 100%;
    flex: 1;
    background-image: url(https://7869-xiaoqiandxiaoer-1301574130.tcb.qcloud.la/1574985801016.png?sign=7570e1d96a5f012c24555f5947ea373f&t=1585149296);
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 40px;
}
.page__title{
    display: block;
    font-size: 20px;
}
.page__desc{
    margin-top: 5px;
    font-size: 14px;
    color: #888888;
}
.section{
    margin-bottom: 40px;
}
.section_gap{
    padding: 0 15px;
}
.section__title{
    margin-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}