小程序开发 自己写自定义audio播放器

这好像是个vue版本的audio播放器

音频播放器的界面效果图

其中，<view class='audiosBox'>表示整个音频播放器的盒子，<view class="title">表示音频名称的盒子，<view class="box">则包含了播放进度条和播放按钮的盒子。

在进度条部分，使用了<slider>标签，绑定了bindchange事件，表示当进度条滑动时触发的函数。block-size表示滑块的大小，step表示每次滑动的步长，value表示当前进度，max表示最大进度，selected-color表示滑块选中时的颜色。

在播放按钮部分，使用了<view class="audioOpen">表示播放/暂停按钮的盒子，使用了<image>标签来显示图标。wx:if表示根据条件来显示/隐藏元素，{{!isOpen}}表示当isOpen为false时显示播放按钮，当isOpen为true时显示暂停按钮。

最后，该代码涉及的函数包括了sliderChange、listenerButtonPlay、listenerButtonPause等，用于处理滑动进度条、播放/暂停音频等操作。

代码如下

wxml
<view class="media">
        <view class="title">媒体介绍</view>
        <view class='audiosBox'>
          <view class="title">
            xxx路
          </view>
          <view class="box">
            <view class='slid'>
              <slider bindchange="sliderChange" block-size="12px" step="0.01" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />
              <view>
                <text class='times'>{{starttime}}</text>
                <!-- 进度时长 -->
                <!-- <text class='times'>{{duration}}</text> -->
                <!-- 总时长 -->
              </view>
            </view>
            <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!isOpen}}">
              <image src="/images/img/play_cheng.png" />
            </view>
            <view class="audioOpen" bindtap="listenerButtonPause" wx:if="{{isOpen}}">
              <image src="/images/img/suspend_cheng.png" />
            </view>
          </view>
        </view>
      </view>
  

js 注意调用wx的方法否则不执行 又是一个小细节

const bgMusic = wx.getBackgroundAudioManager()
data: {
    isOpen: false, //播放开关
    starttime: '00:00', //正在播放时长
    duration: '0', //总时长
    src: 'https://media.w3.org/2010/05/sintel/trailer.mp4', // 当前音频的src地址
    isPlay: false, // 是否播放了
},

onUnload() {
    // 如果离开当前页面就停止播放
    var that = this
    that.listenerButtonStop() //停止播放
},
listenerButtonPlay: function () {
var that = this
if (!this.data.isPlay) {
  // ！！！ ios 播放时必须加title 不然会报错导致音乐不播放
  // 这块的值需要自己替换哦
  bgMusic.title = '我是音频'
  bgMusic.epname = '我是音频'
  bgMusic.src = this.data.src
  bgMusic.coverImgUrl = '我是一个音频背景图'
}

bgMusic.onTimeUpdate(() => {
  //bgMusic.duration总时长  bgMusic.currentTime当前进度
  var duration = parseInt(bgMusic.duration);
  var offset = bgMusic.currentTime;
  var currentTime = parseInt(bgMusic.currentTime);
  var min = parseInt(currentTime / 60);
  var max = parseInt(bgMusic.duration);
  var sec = currentTime % 60;
  if (sec < 10) {
    sec = "0" + sec;
  };
  if (min < 10) {
    min = "0" + min;
  };
  var starttime = min + ':' + sec; /*  00:00  */
  that.setData({
    offset: currentTime,
    starttime: starttime,
    max: max,
    changePlay: true,
    duration,
    offset
  })
})
// 监听播放结束
bgMusic.onEnded(() => {
  that.setData({
    starttime: '00:00',
    isOpen: false,
    offset: 0,
  })

})
bgMusic.play()
that.setData({
  isOpen: true,
  isPlay: false
 })
},
//暂停播放
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,
    })
},

css
 
.media{
  margin-top: 60rpx;
}

.audiosBox {
  width: 100%;
  height: 222rpx;
  background: #F7F7F7;
  border-radius: 16rpx;
  margin: auto;
}
.audiosBox .title{
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  margin-left: 20rpx;
  padding-top: 20rpx;
}
.audiosBox .box{
  display: flex;
  align-items: center;
  margin-top: 30rpx;
}
/*按钮大小  */
.audioOpen {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audioOpen image{
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 20rpx;
}
.image2 {
  margin-left: 10%;
}
/*进度条长度  */
.slid {
  flex: 1;
  position: relative;
}
.slid view {
  display: flex;
  justify-content: space-between;
}
.slid view>text:nth-child(1) {
  color: #4c9dee;
  margin-left: 5rpx;
  margin-top: 20rpx;
}
.slid view>text:nth-child(2) {
  margin-right: 6rpx;
}
slider {
  /* width: 580rpx; */
  margin: 0;
  margin-left: 25rpx;
}
.title{
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 28rpx;
}
.times {
  width: 100rpx;
  text-align: center;
  display: inline-block;
  font-size: 24rpx;
  color: #999999;
  margin-top: 5rpx;
}
.title view {
  text-indent: 2em;
}