微信小程序 封装自定义音频播放组件

封装自定义音频播放器

如何封装组件

1.新建component文件夹（和pages同级）
2.内部新建文件夹 例如myaudio
3.点击新建component输入名称点击回车，例如myaudio1
4.如果此时出现运行不出来，不要怕，点击微信开发者工具最上面的一栏的清缓存（清除编译缓存），再点击编译就可以了

组件内容

myaudio.wxml

<view class='audiosBox'>
    <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!isOpen}}">
      <image  src="/images/pause.png" />
    </view>
    <view class="audioOpen" bindtap="listenerButtonPause" wx:if="{{isOpen}}">
      <image   src="/images/play.png" />
    </view>
    <view class='slid'>
      <slider bindchange="sliderChange"  block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />
      <view>
        <text class='times'>{{starttime}}</text> <!-- 进度时长 -->
       
        <text class='times'>{{duration}}</text>   <!-- 总时长 -->
      </view>
    </view>

index.wxss

/* 以下是音乐播放器的样式 */
.audiosBox{
  width: 700rpx;
  margin: 20rpx;
  height: 150rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f6f7f7;
  border-radius: 20rpx;
}
/*按钮大小  */
.audioOpen{
  width: 100rpx;
  height: 100rpx;
  /* border: 2rpx solid #4c9dee; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}
 /* 按钮上的图片 */
image{
  width: 100rpx;
  height:100rpx;
}

/*进度条长度  */
.slid{
  flex: 1;
  position: relative;
}
.slid view{
  display: flex;
  justify-content: space-between;
}
.slid view>text:nth-child(1){
  color: #4c9dee;
  margin-left:6rpx; 
}
.slid view>text:nth-child(2){
  color: #4c9dee;
  margin-right:50rpx; 
}
slider{
  width: 520rpx;
  margin: 0;
  margin-left: 35rpx;
}
/*横向布局  */
.times{
  width: 100rpx;
  text-align: center;
  display: inline-block;
  font-size: 30rpx;
  color:#999999;
  margin-top: 5rpx;
}
.title view{
  text-indent: 2em;
 
}

index.js

const bgMusic = wx.getBackgroundAudioManager()
const app = getApp()
Component({
  options:{
    addGlobalClass: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
  //音频地址从父组件获取
   address:{
     type: String,
     value:""
   }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isOpen: false,//播放开关
    starttime: '00:00', //正在播放时长
    duration: '00:20',   //总时长
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //播放
listenerButtonPlay: function () {
  var that = this
  //bug ios 播放时必须加title 不然会报错导致音乐不播放
  bgMusic.title = '儿童心音'  
  bgMusic.epname = '儿童心音'
  bgMusic.src = that.data.address;
  bgMusic.onTimeUpdate(() => { 
    //bgMusic.duration总时长  bgMusic.currentTime当前进度
    console.log(bgMusic.currentTime)
    var duration = bgMusic.duration; 
    var offset = bgMusic.currentTime;  
    var currentTime = parseInt(bgMusic.currentTime);
    var min = "0" + parseInt(currentTime / 60);
    var max = parseInt(bgMusic.duration);
    var sec = currentTime % 60;
    if (sec < 10) {
      sec = "0" + sec;
    };
    var starttime = min + ':' + sec;   /*  00:00  */
    that.setData({
      offset: currentTime,
      starttime: starttime,
      max: max,
      changePlay: true
    })
  })
  //播放结束
  bgMusic.onEnded(() => {
    that.setData({
      starttime: '00:00',
      isOpen: false,
      offset: 0
    })
    console.log("音乐播放结束");
  })
  bgMusic.play();
  that.setData({
    isOpen: true,
  })
},
//暂停播放
listenerButtonPause(){
  var that = this
 bgMusic.pause()
 that.setData({
   isOpen: false,
 })
},
listenerButtonStop(){
  var that = this
  bgMusic.stop()
},
// 进度条拖拽
sliderChange(e) {
  var that = this
  var offset = parseInt(e.detail.value);
  bgMusic.play();
  bgMusic.seek(offset);
  that.setData({
    isOpen: true,
  })
},
  }
})

在父组件中引用

1.先在json中定义
test1.json

{
  "usingComponents": {
    "myaudio1":"/component/myaudio/myaudio1"
  }
}

2.在wxml中使用
test1.wxml

address为要引入的音频地址
<myaudio1 address="{{src}}"></myaudio1>

3.在JS中加入音频地址

 data:{
src:"https://webfs.ali.kugou.com/202306021027/d912be100349851d859313d7cb66f93b/KGTX/CLTX001/fa715f44cf0bfb9c4e3a47084e643eff.mp3"
}

如果组件的CSS不起作用

在app.wxss加入

@import"component/myaudio/myaudio1.wxss";

主要参考这两篇博文
https://juejin.cn/post/6844904007513669645
https://juejin.cn/post/7070317353724018725