小程序自定义音频播放

Posted 2020-12-08 悟空dong

html
<!-- 自定义音乐播放器 -->
            <view class="audio" wx:elif="{{articleType===3&&articleData.videoUrl}}">
                <image class="bg" src="{{util.isUrl(articleData.coverPicture)?articleData.coverPicture:\'/assets/bg_lv.png\'}}"></image>
                <image mode="aspectFill" class="poster" src="{{util.isUrl(articleData.coverPicture)?articleData.coverPicture:\'/assets/bg_lv.png\'}}"></image>
                <view class="control-process">
                    <text class="current-process">{{current_process}}</text>
                    <slider class="slider" bindchange="hanle_slider_change" bindtouchstart="handle_slider_move_start" bindtouchend="handle_slider_move_end" min="0" block-size="16" max="{{slider_max}}" activeColor="#fff" backgroundColor="rgba(255,255,255,.3)" value="{{slider_value}}" />
                    <text class="total-process">{{total_process}}</text>
                </view>
                <view class="icon-list ">
                    <image bindtap="prev" mode="widthFix" src="/assets/icon_last.png" class="audio-icon"></image>
                    <image mode="widthFix" src="{{is_play?\'/assets/lALPBFf_6KlotvJWVg_86_86.png\':\'/assets/icon_play.png\'}}" class="audio-icon audio-play" bindtap="audio_play"></image>
                    <image bindtap="next" mode="widthFix" src="/assets/icon_next.png" class="audio-icon"></image>
                </view>
            </view>

CSS
.audio {
    position: relative;
    height: 600rpx;
    padding: 60rpx 32rpx 52rpx;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    background: rgba(0,0,0,.18);
}

.audio .bg {
    position: absolute;
    top: 0;
    left: -100%;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 300%;
    height: 300%;
    z-index: -1;
    filter: blur(40rpx);
    
}
.editor {
    padding: 32rpx;
    box-sizing: border-box;
    color: #333;
    font-size: 28rpx;
    background: #fff;
}
.editor view {
    max-width: 100% !important;
}

.audio .poster {
    width: 250rpx;
    height: 250rpx;
    border-radius: 5px;
    background: transparent;
}
/* 音频滚动条start */
.control-process {
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.control-process .slider {
    width: 526rpx;
}
.control-process text {
    font-size: 24rpx;
    color: #fff;
}
/* 音频滚动条end */
.audio .icon-list {
    position: relative;
    margin: 0 auto;
    line-height: 102rpx;
}

.audio .icon-list .audio-icon + .audio-icon {
    margin-left: 72rpx;
}

.audio .icon-list .pattern {
    position: absolute;
    right: 20rpx;
}

.audio image {
    width: 64rpx;
    height: 64rpx;
    vertical-align: middle;
}

.audio .audio-play {
    width: 112rpx;
    height: 112rpx;
}

.audio .pattern {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 44rpx;
    height: 44rpx;
}

/* 音频end  */

 

JS
// 设置注册音频
 getaudio (item) {
    let that = this
      console.log(item)
      //  item.audioUrl为音频播放链接
      let response = item.audioUrl
      InnerAudioContext.src = response
      InnerAudioContext.volume = 0
      InnerAudioContext.autoplay = true
      setTimeout(function() {
        InnerAudioContext.volume = 1
        InnerAudioContext.autoplay = false
        InnerAudioContext.pause(() => {})
      }, 200)
      if (InnerAudioContext.duration == 0) {
        InnerAudioContext.onCanplay(() => {
          // 必须。可以当做是初始化时长
          InnerAudioContext.duration;
          // 必须。不然也获取不到时长
          console.log(InnerAudioContext.duration)
          setTimeout(() => {
            that.setData({
              current_process: format(InnerAudioContext.currentTime),
              slider_value: Math.floor(InnerAudioContext.currentTime),
              total_process: format(InnerAudioContext.duration),
              slider_max: Math.floor(InnerAudioContext.duration)
            })
            setTimeout(() => {
              if (that.data.total_process == 0) {
                that.setData({
                  current_process: format(InnerAudioContext.currentTime),
                  slider_value: Math.floor(InnerAudioContext.currentTime),
                  total_process: format(InnerAudioContext.duration),
                  slider_max: Math.floor(InnerAudioContext.duration)
                })
              }
            }, 1500)
          }, 1000)
        })
      } else {
        that.setData({
          current_process: format(InnerAudioContext.currentTime),
          slider_value: Math.floor(InnerAudioContext.currentTime),
          total_process: format(InnerAudioContext.duration),
          slider_max: Math.floor(InnerAudioContext.duration)
        })
      }
      //监听音乐更新
      InnerAudioContext.onTimeUpdate(() => {
        if (!that.data.is_moving_slider) {
          that.setData({
            current_process: format(InnerAudioContext.currentTime),
            slider_value: Math.floor(InnerAudioContext.currentTime),
            total_process: format(InnerAudioContext.duration),
            slider_max: Math.floor(InnerAudioContext.duration)
          })
        }
      })
      //监听音乐结束
      InnerAudioContext.onEnded(() => {
        that.setData({
          is_play: false,
          slider_value: 0,
          current_process: \'00:00\',
          is_ended: true
        })
      })
    
  },
//销毁的时候置空音乐播放器
  onUnload() {
    let that = this
    InnerAudioContext.stop()
    InnerAudioContext.seek(0)
    that.setData({
      is_play: false,
      slider_value: 0,
      current_process: \'00:00\',
      is_ended: true
    })
  },
  // 拖动进度条，到指定位置
  hanle_slider_change(e) {
    const position = e.detail.value
    this.seekCurrentAudio(position)
  },
  // 拖动进度条控件
  seekCurrentAudio(tion) {
    // 更新进度条
    let that = this,
      position = Math.floor(tion);
    InnerAudioContext.seek(position)
    that.setData({
      current_process: format(position),
      slider_value: Math.floor(position)
    })
  },
  // 进度条滑动
  handle_slider_move_start() {
    this.setData({
      is_moving_slider: true
    });
  },
  handle_slider_move_end() {
    this.setData({
      is_moving_slider: false
    });
  },
  // 点击播放暂停
  audio_play: function() {
    let that = this
    console.log()
    if (this.data.is_play) {
      that.setData({
        is_play: false
      })
      InnerAudioContext.pause(() => {
        console.log(\'暂停播放\')
      })
    } else if (!this.data.is_play) {
      that.setData({
        is_play: true
      })
      InnerAudioContext.play(() => {
        console.log(\'播放\')
      })
    }
  },
  // 上一首
  prev: function() {
    let that = this
    if (that.data.audio_article.preArticleId != 0) {
      wx.redirectTo({
        url: \'/pages/audio_article/audio_article?articleId=\' +
          that.data.audio_article.preArticleId
      })
    }
  },
  // 下一首
  next: function() {
    let that = this
    if (that.data.audio_article.nextArticleId != 0) {
      wx.redirectTo({
        url: \'/pages/audio_article/audio_article?articleId=\' +
          that.data.audio_article.nextArticleId
      })
    } else { // 如果是最后一首
      that.setData({
        is_play: false,
        slider_value: 0,
        current_process: \'00:00\',
        is_ended: true
      })
    }
  },