tracking synth with track-player

rauversion · Sep 1, 2024 · ee266e5 · ee266e5
1 parent 3613fb6
commit ee266e5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/app/controllers/tracking_events_controller.rb b/app/controllers/tracking_events_controller.rb
@@ -8,7 +8,7 @@ def show
     city = location_data&.city || nil
     country = location_data&.country || nil
 
-    track = Track.find(params[:track_id])
+    track = Track.friendly.find(params[:track_id])
     ua = request.user_agent
 
     browser = Browser.new(ua)

diff --git a/app/javascript/controllers/audio_player_controller.js b/app/javascript/controllers/audio_player_controller.js
@@ -46,6 +46,9 @@ export default class extends Controller {
 
     // Listen for the 'ended' event to play the next song
     this.audio.addEventListener("ended", this.nextSong.bind(this));
+
+    // Listen for the 'audio-process-mouseup' event
+    document.addEventListener(`audio-process-mouseup-${this.idValue}`, this.updateSeek.bind(this));
   }
 
   autoPlay() {
@@ -120,6 +123,9 @@ export default class extends Controller {
     this.currentTime.textContent = this.formatTime(this.audio.currentTime);
     // Check for halfway event trigger
     this.checkHalfwayEvent(percent);
+
+    // Dispatch the custom event
+    this.dispatchAudioProgressEvent(this.audio.currentTime, percent);
   }
 
   checkHalfwayEvent(percent) {
@@ -143,6 +149,18 @@ export default class extends Controller {
     .catch(error => console.error("Error tracking event:", error));
   }
 
+  dispatchAudioProgressEvent(currentTime, percent) {
+    const ev = new CustomEvent(`audio-process-${this.idValue}`, {
+      detail: {
+        position: currentTime,
+        percent: parseFloat(percent.toFixed(2))/100
+      }
+    });
+
+    // console.log(ev)
+    document.dispatchEvent(ev);
+  }
+
   updateDuration() {
     this.duration.textContent = this.formatTime(this.audio.duration);
   }
@@ -152,6 +170,14 @@ export default class extends Controller {
     this.audio.currentTime = percent * this.audio.duration;
   }
 
+  updateSeek(event) {
+    const { position } = event.detail;
+    if (position !== undefined && !isNaN(position)) {
+      this.audio.currentTime = position;
+      this.updateProgress();  // Update the progress bar and related UI
+    }
+  }
+
   formatTime(seconds) {
     const minutes = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);

diff --git a/app/javascript/controllers/track_player_controller.js b/app/javascript/controllers/track_player_controller.js
@@ -42,7 +42,7 @@ export default class extends Controller {
     document.removeEventListener(`audio-process-${this.idValue}`, this.audioProcessListeners)
     document.removeEventListener(`audio-process-${this.idValue}-play`, this.audioProcessPlayListeners)
     document.removeEventListener(`audio-process-${this.idValue}-pause`, this.audioProcessPauseListeners)
-
+    document.removeEventListener(`audio-process-mouseup-${trackId}`, this.audioProcessPauseListeners)
     this.destroyWave()
   }
 
@@ -99,7 +99,7 @@ export default class extends Controller {
   }
 
   audioProcessListeners(e) {
-    //console.log(e.detail)
+    console.log(e.detail)
     this._wave.seekTo(e.detail.percent)
   }
 
@@ -120,13 +120,14 @@ export default class extends Controller {
   drawerListener(e) {
     setTimeout(() => {
       const trackId = this.idValue
-      const ev = new CustomEvent(`audio-process-mouseup`, {
+      const ev = new CustomEvent(`audio-process-mouseup-${trackId}`, {
         detail: {
           trackId: trackId,
           position: this._wave.getCurrentTime(),
           percent: this._wave.getCurrentTime() / this._wave.getDuration()
         }
       })
+      console.log("EV", ev)
       document.dispatchEvent(ev)
     }, 20)
   }