playerComponent = ({ props: ["songData"], data() { return { selected: this.value, waveformSVG: null, cursor: null, player: null, w: null, h: null, duration: null, currentTime: 0, currentVolume: 4, reverseTimeMode: false, isPlaying: false }; }, methods: { onPlay() { this.isPlaying = true; }, onPause() { this.isPlaying = false; }, onTime() { this.currentTime = this.player.currentTime; const p = this.player.currentTime / this.duration; this.updateCursor(p); }, onMetaData() { this.duration = this.player.duration; }, dragged(event, d) { const box = this.waveformSVG.node().getBoundingClientRect(); const x = Math.max( 0, Math.min(event.sourceEvent.clientX - box.x, box.width) ); const p = x / box.width; console.log(event); this.player.currentTime = this.duration * p; this.currentTime = this.player.currentTime; this.updateCursor(p); }, dragended(d) {}, updateCursor(p) { const w = this.waveformSVG.node().getBoundingClientRect().width; this.cursor.attr("x", this.w * p); }, toggleTimeMode() { this.reverseTimeMode = !this.reverseTimeMode; }, seekAudio(dir) { this.player.currentTime = this.player.currentTime + dir * 5; }, setVolume() { this.currentVolume = (this.currentVolume + 1) % 5; this.player.volume = (this.currentVolume + 1) / 5; }, async togglePlay() { if (!this.player.paused) { this.isPlaying = false; this.player.pause(); return; } try { await this.player.play(); this.isPlaying = true; } catch (err) { this.isPlaying = false; } } }, computed: { getCurrentTime() { if (!this.reverseTimeMode) return this.currentTime; return this.duration - this.currentTime; } }, filters: { formatSeconds(n) { const d = new Date(n * 1000); return `${String(d.getMinutes()).padStart(2, "0")}:${String( d.getSeconds() ).padStart(2, "0")}`; } }, mounted() { this.player = this.$refs.player; this.player.addEventListener("play", this.onPlay); this.player.addEventListener("pause", this.onPause); this.player.addEventListener("timeupdate", this.onTime); this.player.addEventListener("loadedmetadata", this.onMetaData); this.player.addEventListener("loadeddata", (e) => console.log(e)); this.waveformSVG = d3.select(this.$refs.waveform).select("svg"); this.waveformSVG.call( d3 .drag() .on("start", this.dragged) .on("drag", this.dragged) .on("end", this.dragended) ); this.w = this.waveformSVG.attr("width"); this.h = this.waveformSVG.attr("height"); this.cursor = this.waveformSVG .append("rect") .attr("height", this.h) .attr("width", 2) .attr("rx", 1) .attr("ry", 1) .attr("x", 0) .attr("fill", "white"); }, template: `

-{{ getCurrentTime | formatSeconds }} / {{ duration | formatSeconds }}

` })

{{ songData.title }}

{{ songData.author }}