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);
}
})
效果图: