微信小程序音乐播放器 (防网易云 音乐)转

音乐播放器

在页面的模板中，定义了一些 <view> 和 <image> 元素，用于显示音乐的信息和控制按钮

在页面的 onLoad 钩子函数中，调用了 getDataFromServer 方法来获取音乐数据，并创建了一个 BackgroundAudioManager 实例来控制背景音频播放。然后，为 BackgroundAudioManager 实例添加了一些事件监听器，用于监听音频的播放、暂停和停止事件。

handlePlay 方法用于切换音乐的播放状态；getDataFromServer 方法用于从服务器获取音乐数据；musicControl 方法用于控制音乐的播放和暂停。

一个简单的音乐播放器功能，可以显示音乐信息、控制音乐播放和暂停，并且可以从服务器获取音乐数据。

<view class="music-container">
  <view class="music-name">{{music.name}}</view>
  <view class="music-author">{{music.author}}</view>
  <image class="arm {{isPlay && 'arm-reset'}}" src="/images/music-line.png"></image>
  <view class="disc-container" bindtap="handlePlay">
    <image class="disc" src="/images/musicbgc.png"></image>
    <image class="music-image {{isPlay && 'disc-animate'}}" src="/images/music-dish.png" ></image>
  </view>
  <view class="player">
    <view class="btns">
      <!-- <image class="play-btn" src="{{isPlay?'play':'stop'}}" ></image> -->
    </view>
  </view>
</view>

Page({
  data:{
    isPlay:false,
    music:{}
  },
  onLoad(){
    this.getDataFromServer();
    this.bam = wx.getBackgroundAudioManager();
    this.bam.onPlay(() => {
      this.setData({isPlay:true})
    })
    this.bam.onPause(() => {
      this.setData({isPlay:false})
    })
    this.bam.onStop(() => {
      this.setData({isPlay:false})
    })
    // 
    this.setData({
      isPlay:true
    })
  },
  handlePlay(){
    const isPlay = !this.data.isPlay;
    this.setData({isPlay});
    this.musicControl();
  },
  getDataFromServer(){
    const result = {
      "name":"name",
      "author":"author",
      "picUrl":"https://p1.music.126.net/0fDn168ubsIt7tG54Twaxw==/18813743464883299.jpg",
      "url":"http://localhost:3000/audios/pangtuodayuli.mp3"
    }
    this.setData({music:result})
  },
  musicControl(){
    const {isPlay} = this.data;
    if(isPlay){
      this.bam.src = this.data.music.url;
      this.bam.title = this.data.music.name;
    }else{
      this.bam.pause();
    }
  }
})

.music-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.music-container .music-name{
  margin: 10rpx 0;
  font-size: 36rpx;
}
.music-container .music-author{
  font-size: 28rpx;
  margin: 6rpx 0;
}
.music-container .arm{
  width: 176rpx;
  height: 324rpx;
  position: relative;
  left: 130rpx;
  top: 245rpx;
  z-index: 99;
  transform: rotate(-25deg);
  transform-origin: top;
  transition: transform .7s linear;
}
.disc-container{
  position: relative;
  top: -128rpx;
  width: 490rpx;
  height: 490rpx;
}
.disc-container .disc{
  width: 100%;
  height: 100%;
}
.disc-container .music-image{
  width: 350rpx;
  height: 350rpx;
  border-radius: 100%;
  position: absolute;
  left: 0;right: 0;top: 0;bottom: 0;
  margin: auto;
}
.music-container .arm-reset{
  transform: rotate(0deg);
}
.disc-animate{
  animation: rotate 2.5s 1s linear infinite;
}
@keyframes rotate{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.player{
  width: 100%;
  position: absolute;
  bottom: 60rpx;
}
.btns{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.btns image{
  width: 36rpx;
  height: 36rpx;
}
.btns .play-btn,.btns .stop-btn{
  width: 90rpx;
  height: 90rpx;
}