小程序自定义音频组件

舍弃掉小程序原有的样式，因为小程序原有的样式既不好看，还无法自定义宽高（无法全屏）比较鸡肋

下面是我自定义之后的样式

话不多说，上代码:

<view class="baner">
  <!-- 背景图 -->
  <image class='audioBg' src='{{staticImg}}detailsPge/bannerImg.png'></image>
  <!-- 控制按钮 -->
  <image class='transmit' src="{{bLink}}" bindtap='transmit'></image>
  <!-- <view class='icon_control'>播放</view> -->
</view>

.baner{
  width:100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.audioBg{
  display: block;
  width:100%;
  height:370rpx;
}
.transmit{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  margin: auto;
  display: block;
  width:80rpx;
  height:80rpx;
}

　

data: {
    // 控制按钮图片
    bLink:'https://resource.yirenheju.cn/schoolBusiness/detailsPge/icon_play.png',
  },



  // 小程序的音频(背景音乐)（所用音乐和信息均是小程序文档中的demo）
  transmit: function () {
    var that = this;
    var bLink = that.data.bLink;
    backgroundAudioManager.title = '此时此刻'
    backgroundAudioManager.epname = '此时此刻'
    backgroundAudioManager.singer = '许巍'
    backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
    // 设置了 src 之后会自动播放
    backgroundAudioManager.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
    backgroundAudioManager.onPlay(function () {
      that.setData({
        bLink: 'https://resource.yirenheju.cn/schoolBusiness/detailsPge/icon_stop.png'
      })
    });
    if (bLink == 'https://resource.yirenheju.cn/schoolBusiness/detailsPge/icon_stop.png'){
      backgroundAudioManager.pause();
      backgroundAudioManager.onPause(function () {
        that.setData({
          bLink: 'https://resource.yirenheju.cn/schoolBusiness/detailsPge/icon_play.png'
        })
      });
    }
　　// 音频播放结束事件监听（用于改变播放音频结束时的状态，以便于下一次启动）
　　backgroundAudioManager.onEnded(function () {
　　that.setData({
　　　　bLink: 'https://resource.yirenheju.cn/schoolBusiness/detailsPge/icon_play.png'
　　　　})
　　});
  },

　　推荐一篇别人的自定义的音频组件（类似于音乐播放器）对于想做多音频的可以借鉴

https://www.cnblogs.com/luxiaoyao/p/9371366.html

转载于:https://www.cnblogs.com/xinheng/p/10881544.html