首先来展示一下效果:
中间的播放条以及下面的浮窗就是我们呈现的最终效果。
音频播放使用的组件是:
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;
}