<divclass='daudio'><audioref="audio"@timeupdate="updateProgress"@ended="end"@loadedmetadata="loadedmetadata"controlsstyle="display: none"src="../assets/audio/y837.mp3"preload="metadata">
您的浏览器不支持音频播放
</audio><divclass="audioBox"><divclass="audioInfo"><h3>2022123434.mp3(3.75KB)</h3><pid="time">{{ duration }}/{{ current }}</p></div><imgref="control"v-if="!isPlay"src="../assets/images/paly.png"alt=""@click="audioPlay(true)"class="audioControls"/><imgref="control"v-elsesrc="../assets/images/suspend.png"alt=""@click="audioPlay(false)"class="audioControls"/></div></div>
javascript
exportdefault{name:"AudioPlayer",data(){return{audio:null,contorl:null,contorlDot:null,contorlProgress:null,contorlProgressBox:null,current:"00:00",duration:"00:00",isPlay:false};},props:{},created(){},mounted(){this.init()},methods:{init(){this.audio =this.$refs.audio;this.contorl =this.$refs.contorl;},// 时分秒转换transTime(value){let that =this;var time ="";var h =parseInt(`${value /3600}`);
value %=3600;var m =parseInt(`${value /60}`);var s =parseInt(`${value %60}`);if(h >0){
time = that.formatTime(h +":"+ m +":"+ s);}else{
time = that.formatTime(m +":"+ s);}return time;},// 补零formatTime(value){var time ="";var s = value.split(":");var i =0;for(; i < s.length -1; i++){
time += s[i].length ===1?"0"+ s[i]: s[i];
time +=":";}
time += s[i].length ===1?"0"+ s[i]: s[i];return time;},// 音频播放暂停audioPlay(status){if(status){this.audio.play();}else{this.audio.pause();}this.isPlay = status
},// 更新进度条与当前播放时间updateProgress(e){this.current =this.transTime(e.target.currentTime);},// 音频结束end(e){this.isPlay =false},loadedmetadata(e){this.duration =this.transTime(e.target.duration);}},//如果页面有keep-alive缓存功能,这个函数会触发activated(){},};</script>