Initial transcription support

client/players/AudioTrack.js

@@ -1,32 +1,43 @@
 export default class AudioTrack {
-  constructor(track, userToken) {
-    this.index = track.index || 0
-    this.startOffset = track.startOffset || 0 // Total time of all previous tracks
-    this.duration = track.duration || 0
-    this.title = track.title || ''
-    this.contentUrl = track.contentUrl || null
-    this.mimeType = track.mimeType
-    this.metadata = track.metadata || {}
+    constructor(track, userToken) {
+        this.index = track.index || 0
+        this.startOffset = track.startOffset || 0 // Total time of all previous tracks
+        this.duration = track.duration || 0
+        this.title = track.title || ''
+        this.contentUrl = track.contentUrl || null
+        this.transcriptUrl = track.transcriptUrl || null
+        this.mimeType = track.mimeType
+        this.metadata = track.metadata || {}
 
-    this.userToken = userToken
-  }
-
-  get fullContentUrl() {
-    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
-
-    if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
-    }
-    return `${window.location.origin}${this.contentUrl}?token=${this.userToken}`
-  }
-
-  get relativeContentUrl() {
-    if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
-
-    if (process.env.NODE_ENV === 'development') {
-      return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
+        this.userToken = userToken
     }
 
-    return this.contentUrl + `?token=${this.userToken}`
-  }
-}
+    get fullContentUrl() {
+        if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
+
+        if (process.env.NODE_ENV === 'development') {
+            return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
+        }
+        return `${window.location.origin}${this.contentUrl}?token=${this.userToken}`
+    }
+
+    get relativeContentUrl() {
+        if (!this.contentUrl || this.contentUrl.startsWith('http')) return this.contentUrl
+
+        if (process.env.NODE_ENV === 'development') {
+            return `${process.env.serverUrl}${this.contentUrl}?token=${this.userToken}`
+        }
+
+        return this.contentUrl + `?token=${this.userToken}`
+    }
+
+    get relativeTranscriptionUrl() {
+        if (!this.transcriptUrl || this.transcriptUrl.startsWith('http')) return this.transcriptUrl
+
+        if (process.env.NODE_ENV === 'development') {
+            return `${process.env.serverUrl}${this.transcriptUrl}?token=${this.userToken}`
+        }
+
+        return this.transcriptUrl + `?token=${this.userToken}`
+    }
+}

client/players/LocalAudioPlayer.js

@@ -35,6 +35,8 @@ export default class LocalAudioPlayer extends EventEmitter {
     var audioEl = document.createElement('audio')
     audioEl.id = 'audio-player'
     audioEl.style.display = 'none'
+    audioEl.crossOrigin = 'anonymous'
+
     document.body.appendChild(audioEl)
     this.player = audioEl
 
@@ -135,6 +137,18 @@ export default class LocalAudioPlayer extends EventEmitter {
       this.usingNativeplayer = true
       this.player.src = this.currentTrack.relativeContentUrl
       this.player.currentTime = this.startTime
+
+      if (document.getElementById('transcription-track')) {
+        document.getElementById('transcription-track').remove()
+      }
+      const trackElement = document.createElement("track");
+
+      trackElement.id = "transcription-track";
+      trackElement.kind = "subtitles";
+      trackElement.label = "Transcription";
+      trackElement.default = true;
+      trackElement.src = this.currentTrack.relativeTranscriptionUrl;
+      this.player.appendChild(trackElement);
       return
     }
 
@@ -168,7 +182,7 @@ export default class LocalAudioPlayer extends EventEmitter {
 
     this.hlsInstance.attachMedia(this.player)
     this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
-      this.hlsInstance.loadSource(this.currentTrack.relativeContentUrl)
+     this.hlsInstance.loadSource(this.currentTrack.relativeContentUrl)
 
       this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
         console.log('[HLS] Manifest Parsed')
@@ -206,6 +220,19 @@ export default class LocalAudioPlayer extends EventEmitter {
     this.trackStartTime = Math.max(0, this.startTime - (this.currentTrack.startOffset || 0))
     this.player.src = this.currentTrack.relativeContentUrl
     console.log(`[LocalPlayer] Loading track src ${this.currentTrack.relativeContentUrl}`)
+
+    if (document.getElementById('transcription-track')) {
+      document.getElementById('transcription-track').remove()
+    }
+    const trackElement = document.createElement("track");
+
+    trackElement.id = "transcription-track";
+    trackElement.kind = "subtitles";
+    trackElement.label = "Transcription";
+    trackElement.default = true;
+    trackElement.src = this.currentTrack.relativeTranscriptionUrl;
+    this.player.appendChild(trackElement);
+
     this.player.load()
   }
 
@@ -338,4 +365,4 @@ export default class LocalAudioPlayer extends EventEmitter {
     var last = bufferedRanges[bufferedRanges.length - 1]
     return last.end
   }
-}
+}