微信小程序音频播放，可拖动进度条，可有时间显示

首先来展示一下效果：

中间的播放条以及下面的浮窗就是我们呈现的最终效果。

音频播放使用的组件是：

wx.getBackgroundAudioManager();

在wx.request()中首先初始音频路径信息

wx.request({

success:(res)=> {

that.setData({

Title: audioinfo.bookName,//标题

p_src: getApp().globalData.book_pictrue,//封面

src: 'http://211.69.130.104/books/' + audioinfo.bookName + '/' + audioinfo.name,//音频

title: audioinfo.name,

author: audioinfo.bookName,

name: audioinfo.name,

audioid: audioinfo.id,

isshow: audioinfo.favourite

})

console.log(that.data.src)

if (audioinfo.picPath)

{

that.setData({

p_src: audioinfo.picPath

})

}

}

编写音乐播放器的代码，首先是要选择正确的音频组件，我选择是wx.getBackgroundAudioManager()，这里说一下wx.getBackgroundAudioManager()注意事项：

1.onTimeUpdate事件不执行，getBackgroundAudioManager对象的onPlay事件必须得添加一个方法（即使方法什么也不写）。

2.IOS 必须得设置Title属性 ,要不歌曲不会播放。

附代码：

js

//音频播放

playMusic: function () {

//let audio = this.data.audioList[this.data.audioIndex];

//let manager = wx.getBackgroundAudioManager();

//console.log("djfskdhfkjsdhfk");

manager.title = this.data.title || "音频标题";

manager.epname = this.data.epname || "专辑名称";

manager.singer = this.data.author || "歌手名";

// manager.coverImgUrl = this.data.poster;

// 设置了 src 之后会自动播放

manager.src = this.data.src;

//manager.play();

manager.currentTime = 0;

let that = this;

manager.onPlay(function () {

console.log("======onPlay======");

that.setData({

playStatus: true

})

that.countTimeDown(that, manager);

});

manager.onPause(function () {

that.setData({

playStatus: false

})

console.log("======onPause======");

});

manager.onEnded(function () {

console.log("======onEnded======");

that.setData({

playStatus: false

})

setTimeout(function () {

that.nextMusic();

}, 1500);



});

},



//循环计时

countTimeDown: function (that, manager, cancel) {

if (that.data.playStatus) {

setTimeout(function () {

if (that.data.playStatus) {

// console.log("duration: " + manager.duration);

// console.log(manager.currentTime);

that.setData({

progress: Math.ceil(manager.currentTime),

progressText: that.formatTime(Math.ceil(manager.currentTime)),

duration: Math.ceil(manager.duration),

durationText: that.formatTime(Math.ceil(manager.duration))

})

that.countTimeDown(that, manager);

}

}, 1000)

}

},



//拖动事件

sliderChange: function (e) {

let manager = wx.getBackgroundAudioManager();

manager.pause();

manager.seek(e.detail.value);

this.setData({

progressText: this.formatTime(e.detail.value)

})

setTimeout(function () {

manager.play();

}, 1000);

},



//列表点击事件

listClick: function (e) {

let pos = e.currentTarget.dataset.pos;

if (pos != this.data.audioIndex) {

this.setData({

audioIndex: pos,

showList: false

})

this.playMusic();

} else {

this.setData({

showList: false

})

}

},

//播放按钮

playOrpause: function () {

if (this.data.playStatus) {

manager.pause();

} else {

manager.play();

}

},

//播放按钮

listenerButtonPlay() {

var that = this

manager.play()

that.setData({

playStatus: false,

})

},

//暂停按钮

listenerButtonPause() {

var that = this

manager.pause();

that.setData({

playStatus: true,

})

},

//界面切换

pageChange: function () {

this.setData({

showList: true

})

},



//格式化时长

formatTime: function (s) {

let t = '';

s = Math.floor(s);

if (s > -1) {

let min = Math.floor(s / 60) % 60;

let sec = s % 60;

if (min < 10) {

t += "0";

}

t += min + ":";

if (sec < 10) {

t += "0";

}

t += sec;

}

return t;

},

wxml:

<!-- 进度条 -->

<view class='progress'>

<view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!playStatus}}">

<image class='image' src="../image/play.png" />

</view>

<view class="audioOpen" bindtap="listenerButtonPause" wx:if="{{playStatus}}">

<image class='image' src="../image/pause.png" />

</view>

<slider class='bar' bindchange="sliderChange" bindchanging="sliderChanging" value="{{progress}}" step="1" min='0' max='{{duration}}' activeColor="#1aad19" block-size="12" block-color="#1aad19" />

</view>

<view class="text">

<text class="front">{{progressText}}</text>

<text class="back">{{durationText}}</text>

</view>

wxss

/*音乐播放部分*/

/*播放按钮*/

.image{

margin-top:10rpx;

width: 80rpx;

height: 80rpx;

}

/*进度条*/

.progress{

/* top:750rpx; */

width: 85%;

}

/*进度条时间显示*/

.text{

display: flex;

flex-direction:row;

margin-top:90rpx;

}

.front{

width: 50%;

margin-left: 170rpx;

}

.flex{

display: flex;

}

.audioPlayer{

width: 100%;

height: 400rpx;

margin-bottom: 30rpx;

box-sizing: border-box;

padding: 20rpx 30rpx;

}

.player{

width: 100%;

height: 100%;

position: relative;

}

.audioBack{

width: 100%;

height: 100%;

}

.audioControls{

width: 100%;

height: 80rpx;

background: black;

opacity: .8;

position: absolute;

bottom: 0;

color: white;

font-size: 6pt;

line-height: 80rpx;

text-align: center;

}

.audioControls .bottom{

width: 60rpx;

height: 100%;

}

.audioControls .bottom image{

margin-top: 30%;

margin-left: 30%;

width: 40rpx;

height: 40rpx;

}

.audioControls .slider{

width: 520rpx;

height: 100%;

}

.slider slider{

width: 95%;

margin-left: 4%;

margin-right: 0;

}

.audioControls .time{

width: 120rpx;

height: 100%;

}



/*横向布局 */

.times{

width: 100rpx;

text-align: center;

display: inline-block;

font-size: 24rpx;

color:#a36363;

margin-top: 5rpx;

}



.down{

display: flex;

flex-direction:row;

}

.tubiao{

width:1%;

height: 70.2rpx;

margin-top: 23.4rpx;

margin-left: 23.4rpx;

background-color:#020202;

border-radius: 23.4rpx;

}