vue 沿着弧线拖拽进度条_基于VUE和JS手写的移动端H5自定义音乐播放器(直线进度条和圆形滚动进度条)...

export default{

name:'music-view',

components: {

},

props: {

type:'',

},

data () {return{

cTime:'00:00', //已播放时间

dTime: '00:00', //总播放时间

play: false, //播放暂停按钮

audioHttp: 'http://up.mcyt.net/?down/46426.mp3', //音频链接

}

},

mounted () {

const music= this.$refs.player //音频所在对象

const musicBar = this.$refs.runbar //颜色进度条所在对象

const musicWidth = this.$refs.runfatbar.offsetWidth //底部进度条总宽

const rightCircle = this.$refs.yuanright.style //圆形滚动进度条右边

const leftCircle = this.$refs.yuanleft.style //圆形滚动进度条左边

//获得音频加载完成可播放时的处理

music.addEventListener('canplay', () =>{

const musicTime= music.duration //获得音频时长

const branch = Math.floor(mus