小程序使用createInnerAudioContext实现音乐播放

实现效果：点击图片音乐开始播放，图片旋转，再点击暂停，图片暂停旋转，等音乐全部播放完成，图片暂停旋转

wxml:

<view class="top">
  <view class="center" style="animation-play-state:{{rocate}}">
    <image bindtap="play" mode="aspectFit" src="cloud://cloud1-2gjflokc7f174718.636c-cloud1-2gjflokc7f174718-1308882505/img1.jpg" alt=""/>
  </view>
</view>

wxss:

/* pages/musuc/music.wxss */
.top{
  width: 500rpx;
  height: 500rpx;
  border-radius: 50% 50%;
  background: url('//s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f='); 
  background-size: 100% 100%;
  margin: 0 auto;
}
.top .center{
  width: 65%;
  height: 65%;
  margin-left: 17.5%;
  margin-top: 17.5%;
  border-radius: 50% 50%;
  overflow: hidden;
  background-color: brown;
  transform-style: preserve-3d;
  animation: myrocate 10s linear infinite; 
}
.top .center image{
  width: 100%;
  height: 100%;
} 
@keyframes myrocate{
  from{transform: rotateZ(0deg);}
  to{transform: rotateZ(360deg);}
}

js:

// pages/musuc/music.js

const innerAudioContext = wx.createInnerAudioContext()
// innerAudioContext.autoplay = true
innerAudioContext.src = 'cloud://cloud1-2gjflokc7f174718.636c-cloud1-2gjflokc7f174718-1308882505/金玟岐 - 岁月神偷.mp3'
innerAudioContext.onPlay(() => {
  console.log('开始播放')
})
innerAudioContext.onStop(()=>{
  console.log('结束')
})
innerAudioContext.onError((res) => {
  console.log(res.errMsg)
  console.log(res.errCode)
})
var timer
Page({
    
  /**
   * 页面的初始数据
   */
  data: {
    isplay: false,
    tran:"trans",
    rocate:"paused"
  },
  play(){
    if(this.data.isplay == false){
      this.setData({
        isplay: true 
      })
      this.setData({
        rocate:"running"
      })
      innerAudioContext.play()
      
    }else{
      this.setData({
        isplay: false 
      })
      this.setData({
        rocate:"paused"
      })
      innerAudioContext.pause()
      console.log(innerAudioContext.currentTime)
      console.log(innerAudioContext.duration)
    }
    timer= setInterval(()=>{
      if(innerAudioContext.currentTime == innerAudioContext.duration
        && innerAudioContext.duration!=0){
        this.setData({
          rocate:"paused"
        })
        clearInterval(timer)
      }
    },30)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})