我使用的是wepy的框架,然后代码如下。。。包括拖拉进度条播放,暂停,播放,等功能,样式模仿的是网易云音乐光盘转动效果,可将黑圆圈换成一个光盘图片就更好看了
.audio-poster {
display: flex;
justify-content: center;
align-items: center;
width: 76rpx;
height: 76rpx;
box-sizing: border-box;
margin: 10rpx;
background: #101010;
border-radius: 50%;
.poster-img {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
}
}
.audio-box {
position: relative;
width: 100%;
box-sizing: border-box;
background: #f2f2f2;
padding: 10rpx 0;
align-self: flex-start;
display: flex;
flex-direction: row;
align-items: center;
}
.progress-bar {
display: flex;
align-items: center;
.progress-now {
width: 70rpx;
text-align: center;
font-size: 24rpx;
}
.progress-line {
position: relative;
width: 426rpx;
display: flex;
align-items: center;
.progress-line-active {
display: inline-block;
width: 0rpx;
font-size: 0;
border-top: 1px solid #e51c23;
}
.progress-circle {
position: absolute;
left: 0rpx;
width: 30rpx;
height: 30rpx;
box-sizing: border-box;
background: #e51c23;
border-radius: 50%;
}
.progress-line-total {
display: inline-block;
width: 226rpx;
font-size: 0;
border-top: 1px solid #bbb;
}
}
.audio-title {
position: absolute;
top: 20rpx;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24rpx;
}
.play-button {
color: #e51c23;
margin-left: 16rpx;
font-size: 48rpx;
}
}
东京塔
{{currentTime}}
{{duration}}
import wepy from 'wepy';
let startPageX = 0;
export default class NewAudio extends wepy.component {
props = {};
data = {
playState: true,
innerAudioContext: wepy.createInnerAudioContext(),
currentTime: '00:00',
duration: '00:00',
circleLeft: 0
};
methods = {
play: () => {
this.innerAudioContext.play();
this.playState = true;
this.$apply();
},
pause() {
this.innerAudioContext.pause();
this.playState = false;
this.$apply();
},
stop() {
this.innerAudioContext.stop();
},
dragStart(e) {
startPageX = e.touches[0].clientX;
},
dragMove(e) {
// console.log(e.touches[0].clientX);
let newLeft = 0;
if (
(this.circleLeft >= startPageX - e.touches[0].clientX &&
startPageX - e.touches[0].clientX >= 0) ||
(this.circleLeft <= 396 + startPageX - e.touches[0].clientX &&
startPageX - e.touches[0].clientX <= 0)
) {
newLeft = (e.touches[0].clientX - startPageX) * 2;
startPageX = e.touches[0].clientX;
this.circleLeft = newLeft + this.circleLeft;
let newPosition = this.innerAudioContext.currentTime;
newPosition = this.circleLeft / 396 * this.innerAudioContext.duration;
this.innerAudioContext.seek(newPosition);
this.$apply();
if (this.innerAudioContext.paused) {
this.innerAudioContext.play();
this.playState = true;
this.$apply();
}
}
},
updateTime: () => {
this.circleLeft =
this.innerAudioContext.currentTime /
this.innerAudioContext.duration *
396;
this.currentTime = `${
Math.round(this.innerAudioContext.currentTime / 60) < 10
? `0${Math.round(this.innerAudioContext.currentTime / 60)}`
: `${Math.round(this.innerAudioContext.currentTime / 60)}`
}:${
Math.round(this.innerAudioContext.currentTime % 60) < 10
? `0${Math.round(this.innerAudioContext.currentTime % 60)}`
: `${Math.round(this.innerAudioContext.currentTime % 60)}`
}`;
this.duration = `${
Math.round(this.innerAudioContext.duration / 60) < 10
? `0${Math.round(this.innerAudioContext.duration / 60)}`
: `${Math.round(this.innerAudioContext.duration / 60)}`
}:${
Math.round(this.innerAudioContext.duration % 60) < 10
? `0${Math.round(this.innerAudioContext.duration % 60)}`
: `${Math.round(this.innerAudioContext.duration % 60)}`
}`;
this.$apply();
setTimeout(this.methods.updateTime, 1000);
}
};
onLoad() {
this.innerAudioContext = wepy.createInnerAudioContext();
this.innerAudioContext.src =
'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46';
this.innerAudioContext.onPlay(() => {
this.methods.updateTime();
});
this.innerAudioContext.autoplay = true;
this.innerAudioContext.onError(res => {
console.log(res.errMsg);
console.log(res.errCode);
});
}
}
wx:18362981113 经测试可正常使用,有问题可联系我哦~~