"音乐"小程序：播放器2

wxml

<!--pages/player/index.wxml-->
<view class="content">
      <view class="music_title">
          <view class="music_name">{{play.title}}</view>
          <view class="music_singer">--{{play.singer}}--</view>
      </view>
      <view class="music_cover">
          <view class="music_img">
               <image src="{{play.coverImgUrl}}" ></image>
          </view>
          <view class="music_progress">
            <text>{{play.currentTime}}</text>
            <view>
            <slider bindchanging="sliderChanging"  value="{{play.percent}}"activeColor="#d33a31" block-size="20" backgroundColor="#dadada"  />
          </view>
            <text>{{play.duration}}</text>
          </view>
      </view>
      <view class="music_control">
           <view class="music_nail">
               <image src="{{play.coverImgUrl}}" style="width:145rpx;height:145rpx"></image>
           </view>
           <view class="music_info">
                <view class="name">{{play.title}}</view>
                <view class="singer">{{play.singer}}</view>
           </view>
           <view class="music_button">
            <button bindtap='audioPlay'>播放</button>
            <button bindtap='audioPause'>暂停</button>
            <button bindtap='audioPlayBack'>回放</button>
           </view>
      </view>
</view>

wxss

/* pages/player/index.wxss */
.content{
  width: 750rpx;
  height:auto;
   display:flex;
   flex-direction: column;
   /* background-color: */
}
.music_title{
  width:100%;
  height:200rpx;
  /* border:4rpx solid red;
  background:yellow; */
  text-align:center;
}
.music_name{
   font-size: 40rpx;
   font-weight: bold;
   margin-top:30rpx;
}
.music_singer{
  font-size: 36rpx;
  margin-top:16rpx;
}
.music_cover{
  width:100%;
  height:700rpx;
  /* border:4rpx solid red;
  background:green; */
  display: flex;
  flex-direction: column;
  text-align: center;
}
.music_cover image{
  width: 400rpx;
  height: 400rpx;
  margin-top:80rpx;
  /* animation-play-state: false;
  animation: rotateImage 10s linear infinite; */
  border-radius: 50%;
  border: 1px solid #333;
}

@keyframes rotateImage {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.music_progress{

 text-align: center;
 display: flex;
 align-items: center;
  margin: 50rpx 35rpx;
  font-size: 30rpx;

}
.music_progress > view {
  flex: 1;
}

.music_control{
  width:100%;
  height:150rpx;
  /* border:4rpx solid red;
  background:blue; */
  display: flex;

}
.music_nail{
  /* border:3rpx solid red; */
  width:150rpx;
}
.music_info{
  /* border:3rpx solid red; */
  width:300rpx;
  line-height: 50rpx;
}
.music_info .name{
  font-size:30rpx;font-weight: bold;
}
/* .music_info .singer{
  
} */
.music_button{
  /* border:3rpx solid red; */
  width:290rpx;
  display:flex;
}
.music_button button{
  width:90rpx;
}

js

// pages/player/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    play: {
      title: '踏雪寻卿',
      singer: '董真',
      src: 'https://downsc.chinaz.net/Files/DownLoad/sound1/201803/9825.mp3',
      coverImgUrl: '/images/rec1.png',
      currentTime:'00:00',
      duration:'00:00',
      percent:0


    } 
  },
 // 滚动条调节歌曲进度
 sliderChange: function(e) {
  var second = e.detail.value * this.audioCtx.duration / 100
  this.audioCtx.seek(second)
},
 audioPlay() {
  this.audioData.play()
  console.log('播放')
},
audioPause() {
  this.audioData.pause()
  console.log('暂停')
},
audioPlayBack() {
  this.audioData.seek(this.audioData.currentTime-3)
},
audioStop() {
  this.audioData.stop()
},
audioStart() {
   this.audioData.seek(0)
},
  /**
   * 生命周期函数--监听页面加载
   */
  audioCtx: null,
  onLoad: function() {
    this.audioData =wx.createInnerAudioContext()
    this.audioData.src = this.data.play.src
    // this.audioData.autoplay = true
    console.log(this.audioData)
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})