小程序f2自定义html,微信小程序自定义样式的播放器

我使用的是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 经测试可正常使用，有问题可联系我哦~~