audioWidth: 0, //播放进度的长
isPlaying: false, //是否正在播放
audioContent: null, //音频对象
currentTime: 0, //播放当前时间（处理后的 1：00）
duration: 0, //播放总时长 (处理后 4:30)
oriCurrentTime: 0, //播放当前时间 s
oriDuration: 100, //播放总时长 s
startPageX: 74, //开始的pageX
endPageX: 514, //结束的pageX
touchStartX: 0, //触摸开始pageX
<view class="progress-bar" bindtap="clickSeek">
<view class="all-time-line"></view>
<view class="play-time" style="width: {{audioWidth}}">
<view class="play-time-line"></view>
<view class="cicle" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>
</view>
</view>
.progress-bar{
position: relative;
width: 440rpx;
margin-left: 20rpx;
margin-right: 20rpx;
padding: 20rpx 0;
}
.all-time-line{
width: 100%;
height: 4rpx;
background-color: #C9C9C9;
}
.play-time{
width: 60%;
position: absolute;
left: 0;
top: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
z-index: 2;
}
.play-time-line{
width: 100%;
height: 4rpx;
background-color: #1FAB89;
box-shadow:0 0 10rpx rgba(31,171,137,0.6);
}
.cicle{
font-size: 0;
position: absolute;
top: -8rpx;
right: -8rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #1FAB89;
}
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
let src = ‘/images/index/Kalimba.mp3‘;
that.initMusic(src);
},
initMusic: function(audioSrc) {
// 音频
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
startPageX: res.windowWidth / 750 * that.data.startPageX,
endPageX: res.windowWidth / 750 * that.data.endPageX
})
},
})
let audioContent = wx.createInnerAudioContext();
that.setData({
audioContent: audioContent
})
audioContent = that.data.audioContent;
audioContent.src = audioSrc;
// 播放时间更新时
audioContent.onTimeUpdate(function() {
// if (that.data.oriDuration != 0) {
let currentTime;
let oriCurrentTime = parseInt(audioContent.currentTime);
that.setData({
currentTime: that.handle(oriCurrentTime),
// oriCurrentTime: parseInt(audioContent.currentTime)
audioWidth: oriCurrentTime / that.data.oriDuration * 100 + ‘%‘
})
// }
})
// 播放结束时
audioContent.onEnded(function() {
that.setData({
isPlaying: false,
currentTime: 0,
audioWidth: ‘0%‘
})
})
// 音频初始化完成设置时长
// audioContent.onCanplay(function() {
// audioContent.play();
// setTimeout(() => {
// that.setData({
// duration: that.handle(parseInt(audioContent.duration)),
// oriDuration: parseInt(audioContent.duration)
// })
// audioContent.stop();
// }, 1000)
// })
},
// 暂停播放点击
playMusic: function() {
var that = this;
// if(that.data.duration != 0){
if (that.data.isPlaying) {
that.setData({
isPlaying: false
})
that.data.audioContent.pause();
} else {
that.setData({
isPlaying: true
})
that.data.audioContent.play();
}
// }
},
// 秒变分钟
handle: function(time) {
return parseInt(time / 60) + ‘:‘ + ((time % 60) < 10 ? ‘0‘ + (time % 60) : (time % 60));
},
//滑动更改播放进度
touchStart: function(e) {
// console.log("x:" + e.touches[0].pageX + "Y:" + e.touches[0].pageY);
var that = this;
that.toSeek(e.touches[0].pageX);
},
touchMove: function(e) {
var that = this;
that.toSeek(e.touches[0].pageX);
// that.setData({
// touchStartX: e.touches[0].pageX
// })
},
touchEnd: function() {
var that = this;
that.toSeek(that.data.touchStartX);
},
clickSeek: function(e) {
let pageX = e.detail.x;
this.toSeek(pageX);
},
toSeek: function(pageX) {
var that = this;
// let playPercent = pageX / that.data.endPageX;
if (pageX > that.data.endPageX) {
pageX = that.data.endPageX;
}
if (pageX < that.data.startPageX) {
pageX = that.data.startPageX;
}
let playPercent = (pageX - that.data.startPageX) / (that.data.endPageX - that.data.startPageX);
// console.log(playPercent);
that.setData({
touchStartX: pageX,
audioWidth: playPercent * 100 + ‘%‘
})
let oriCurrentTime = parseInt(that.data.oriDuration * playPercent);
that.data.audioContent.seek(oriCurrentTime);
that.setData({
oriCurrentTime: oriCurrentTime,
currentTime: that.handle(oriCurrentTime)
})
},