diff --git a/src/components/Player.vue b/src/components/Player.vue index d5c8eff..01e1d44 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -1,26 +1,9 @@ @@ -105,7 +47,8 @@ export default { audio: {}, duration: 0, progress: 0, - interval: 0, + intervalProgress: 0, + intervalHistory: 0, preConvert: false, }; }, @@ -121,7 +64,6 @@ export default { play() { this.audio.play(); }, - pause() { if (!this.audio.paused) { this.audio.pause(); @@ -131,11 +73,17 @@ export default { this.duration = this.audio.duration; }, playing() { - window.clearInterval(this.interval); - this.interval = setInterval(() => { + window.clearInterval(this.intervalProgress); + window.clearInterval(this.intervalHistory); + + this.intervalProgress = setInterval(() => { this.progress = this.audio.currentTime; this.selectedTrack.percent = (100 / this.duration) * this.progress; }, 500); + + this.intervalHistory = setInterval(() => { + console.log(this.selectedTrack); + }, 10000); }, audioReset() { this.audio.pause(); @@ -238,7 +186,8 @@ export default { } }, reset() { - window.clearInterval(this.interval); + window.clearInterval(this.intervalProgress); + window.clearInterval(this.intervalHistory); if (!this.audio.paused) { this.audio.pause(); } @@ -409,17 +358,21 @@ export default { z-index: 1001; box-shadow: 0 0px 4px var(--shadow); } + #player .cover { width: 52px; margin-right: 4px; } + #playerBar { overflow: hidden; max-height: 52px; } -#playerBar > div { + +#playerBar>div { align-items: center; } + #playerControls button { display: flex; padding: 4px 12px;