将原生JavaScript音乐播放器代码转换为Vue.js组件

{/'title/':/'将原生JavaScript音乐播放器代码转换为Vue.js组件/',/'description/':/'将原生JavaScript代码改写成Vue.js组件，实现音乐播放控制、进度条拖动、时间显示、循环播放、收藏等功能，提高代码可读性和维护性。/',/'keywords/':/'音乐播放器, Vue.js, JavaScript, 组件, 播放控制, 进度条, 时间显示, 循环播放, 收藏/',/'content/':/'{///'data///':{///'music///':null,///'playBtn///':null,///'seekbar///':null,///'currentTime///':null,///'duration///':null,///'favIcon///':null},///'mounted///':{///'this.music=document.querySelector('.music-element');///'///',///'this.playBtn=document.querySelector('.play');///'///',///'this.seekbar=document.querySelector('.seekbar');///'///',///'this.currentTime=document.querySelector('.current-time');///'///',///'this.duration=document.querySelector('.duration');///'///',///'this.favIcon=document.querySelector('.favorite');///'///',///'this.music.onloadeddata=()=>/{///'///',///'this.seekbar.max=this.music.duration;///'///',///'var ds=parseInt(this.music.duration%60);///'///',///'var dm=parseInt((this.music.duration/60)%60);///'///',///'this.duration.innerHTML=dm+':'+ds;///'///',///'};///'///',///'this.music.ontimeupdate=()=>/{///'///',///'this.seekbar.value=this.music.currentTime;///'///',///'};///'///',///'this.music.addEventListener('timeupdate',()=>/{///'///',///'var cs=parseInt(this.music.currentTime%60);///'///',///'var cm=parseInt((this.music.currentTime/60)%60);///'///',///'this.currentTime.innerHTML=cm+':'+cs;///'///',///'},false);///'///',///'},///'methods///':{///'handlePlay///':{///'if(this.music.paused){///'///',///'this.music.play();///'///',///'this.playBtn.className='pause';///'///',///'this.playBtn.innerHTML='<i class=/'material-icons/'>pause';///'///',///'}else/{///'///',///'this.music.pause();///'///',///'this.playBtn.className='play';///'///',///'this.playBtn.innerHTML='<i class=/'material-icons/'>play_arrow';///'///',///'}///'///',///'this.music.addEventListener('ended',()=>/{///'///',///'this.playBtn.className='play';///'///',///'this.playBtn.innerHTML='<i class=/'material-icons/'>play_arrow';///'///',///'this.music.currentTime=0;///'///',///'});///'///',///'},///'handleSeekBar///':{///'this.music.currentTime=this.seekbar.value;///'///',///'},///'handleFavorite///':{///'this.favIcon.classList.toggle('active');///'///',///'}///'///',///'}/'}