小程序自定义样式音频播放器

wxml!

<view class='audioPlayer'>
  <view class='player'>
    <view class='audioControls'>
        <view class='bottom' catchtap='playAudio'>
          <!-- 按钮 -->
          <view wx:if="{{isPlayAudio}}">
            <image src='../images/icon-28.png' />
          </view>
          <view wx:else>
            <image src='../images/icon-27.png' />
          </view>
        </view>
        <view class='slider'>
          <slider bindchange='sliderChange' block-color="#f8c130" activeColor='#f8c130' backgroundColor="#aeaeae" block-size="12" value='{{audioTime}}' />
        </view>
        <view class='time'>
          <view class="timeLeft">{{showTime1}}</view>
          <view class="timeRight">{{showTime2}}</view>
        </view>
      </view>
  </view>
</view>

wxss!!

.flex{
  float: left;
  width: 100%;
  position: relative;
}
.audioPlayer{
  width: 100%;
  height: 114rpx;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  background: #f4f4f4;
}
.player{
  width: 100%;
  height: 100%;
  position: relative;
}
.audioBack{
  width: 100%;
  height: 100%;
}
.audioControls{
  width: 100%;
  height: 80rpx;
   background: #f4f4f4;
  color: #666;
  font-size: 6pt;
  text-align: center;
}
.audioControls .bottom{
  width: 84rpx;
  height: 100%;
  float: left;
}
.audioControls .bottom image{
  margin-top: 15rpx;
  margin-left: 15rpx;
  width: 54rpx;
  height: 54rpx;
}
.audioControls .slider{
  width: calc(100% - 84rpx);
  height: 100%;
  float: left;
}
.slider slider{
  width: 95%;
  margin-left: 4%;
  margin-right: 0;
}
.audioControls .time{
  width: calc(100% - 104rpx);
  height: 30rpx;
  position: absolute;
  bottom: -5px;
  right: 0px;
  font-size: 12px;
  color: #aeaeae;
}
.timeLeft{
  float: left;
  height: 10px;
}
.timeRight{
  float: right;
   height: 10px;
}

page{
  background: #ffffff;
}

删除线格式 删除线格式 删除线格式
js!!!

const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
Page({
  data: {
    audiolist: [
      {
        audiosrc: 'https://zhuye-yinpin-1255409941.cos.ap-beijing.myqcloud.com/1_8.mp3'
      }
    ],
    isPlayAudio: false,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0
  },
  onLoad: function () {

  },
  onShow: function () {
    this.Initialization();
    this.loadaudio();
  },
  //初始化播放器,获取duration
  Initialization() {
    var t = this;
    if (this.data.audiolist[0].audiosrc.length != 0) {
      //设置src
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      //运行一次
      innerAudioContext.play();
      innerAudioContext.pause();
      innerAudioContext.onCanplay(() => {
        //初始化duration
        innerAudioContext.duration
        setTimeout(function () {
          //延时获取音频真正的duration
          var duration = innerAudioContext.duration;
          var min = parseInt(duration / 60);
          var sec = parseInt(duration % 60);
          if (min.toString().length == 1) {
            min = `0${min}`;
          }
          if (sec.toString().length == 1) {
            sec = `0${sec}`;
          }
          t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` });
        }, 1000)
      })
    }
  },
  //拖动进度条事件
  sliderChange(e) {
    var that = this;
    innerAudioContext.src = this.data.audiolist[0].audiosrc;
    //获取进度条百分比
    var value = e.detail.value;
    this.setData({ audioTime: value });
    var duration = this.data.audioDuration;
    //根据进度条百分比及歌曲总时间,计算拖动位置的时间
    value = parseInt(value * duration / 100);
    //更改状态
    this.setData({ audioSeek: value, isPlayAudio: true });
    //调用seek方法跳转歌曲时间
    innerAudioContext.seek(value);
    //播放歌曲
    innerAudioContext.play();
  },
  //播放、暂停按钮
  playAudio() {
    //获取播放状态和当前播放时间
    var isPlayAudio = this.data.isPlayAudio;
    var seek = this.data.audioSeek;
    innerAudioContext.pause();
    //更改播放状态
    this.setData({ isPlayAudio: !isPlayAudio })
    if (isPlayAudio) {
      //如果在播放则记录播放的时间seek,暂停
      this.setData({ audioSeek: innerAudioContext.currentTime });
    } else {
      //如果在暂停,获取播放时间并继续播放
      innerAudioContext.src = this.data.audiolist[0].audiosrc;
      if (innerAudioContext.duration != 0) {
        this.setData({ audioDuration: innerAudioContext.duration });
      }
      //跳转到指定时间播放
      innerAudioContext.seek(seek);
      innerAudioContext.play();
    }
  },
  loadaudio() {
    var that = this;
    //设置一个计步器
    this.data.durationIntval = setInterval(function () {
      //当歌曲在播放时执行
      if (that.data.isPlayAudio == true) {
        //获取歌曲的播放时间,进度百分比
        var seek = that.data.audioSeek;
        var duration = innerAudioContext.duration;
        var time = that.data.audioTime;
        time = parseInt(100 * seek / duration);
        //当歌曲在播放时,每隔一秒歌曲播放时间+1,并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        //填充字符串,使3:1这种呈现出 03:01 的样式
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var min1 = parseInt(duration / 60);
        var sec1 = parseInt(duration % 60);
        if (min1.toString().length == 1) {
          min1 = `0${min1}`;
        }
        if (sec1.toString().length == 1) {
          sec1 = `0${sec1}`;
        }
        //当进度条完成,停止播放,并重设播放时间和进度条
        if (time >= 100) {
          innerAudioContext.stop();
          that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` });
          return false;
        }
        //正常播放,更改进度信息,更改播放时间信息
        that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` });
      }
    }, 1000);
  },
  onUnload: function () {
    //卸载页面,清除计步器
    clearInterval(this.data.durationIntval);
  }
})

效果图:在这里插入图片描述

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值