diff --git a/client/components/tables/AllFilesTable.vue b/client/components/tables/AllFilesTable.vue
index bb47abd3..57b000b9 100644
--- a/client/components/tables/AllFilesTable.vue
+++ b/client/components/tables/AllFilesTable.vue
@@ -96,12 +96,8 @@ export default {
   },
   methods: {
     getRelativePath(path) {
-      var filePath = path.replace(/\\/g, '/')
-      var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-      return filePath
-        .replace(audiobookPath + '/', '')
-        .replace(/%/g, '%25')
-        .replace(/#/g, '%23')
+      var relativePath = path.replace(/\\/g, '/').replace(this.audiobookPath.replace(/\\/g, '/') + '/', '')
+      return this.$encodeUriPath(relativePath)
     }
   },
   mounted() {}
diff --git a/client/components/tables/OtherFilesTable.vue b/client/components/tables/OtherFilesTable.vue
index f02e211d..2b334e59 100644
--- a/client/components/tables/OtherFilesTable.vue
+++ b/client/components/tables/OtherFilesTable.vue
@@ -71,15 +71,9 @@ export default {
     },
     otherFilesCleaned() {
       return this.files.map((file) => {
-        var filePath = file.path.replace(/\\/g, '/')
-        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-
         return {
           ...file,
-          relativePath: filePath
-            .replace(audiobookPath + '/', '')
-            .replace(/%/g, '%25')
-            .replace(/#/g, '%23')
+          relativePath: this.getRelativePath(file.path)
         }
       })
     },
@@ -99,6 +93,10 @@ export default {
     },
     clickBar() {
       this.showFiles = !this.showFiles
+    },
+    getRelativePath(path) {
+      var relativePath = path.replace(/\\/g, '/').replace(this.audiobookPath.replace(/\\/g, '/') + '/', '')
+      return this.$encodeUriPath(relativePath)
     }
   },
   mounted() {}
diff --git a/client/components/tables/TracksTable.vue b/client/components/tables/TracksTable.vue
index 4bebad6e..3dd9fe96 100644
--- a/client/components/tables/TracksTable.vue
+++ b/client/components/tables/TracksTable.vue
@@ -75,15 +75,9 @@ export default {
     },
     tracksCleaned() {
       return this.tracks.map((track) => {
-        var trackPath = track.path.replace(/\\/g, '/')
-        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
-
         return {
           ...track,
-          relativePath: trackPath
-            .replace(audiobookPath + '/', '')
-            .replace(/%/g, '%25')
-            .replace(/#/g, '%23')
+          relativePath: this.getRelativePath(track.path)
         }
       })
     },
@@ -100,6 +94,10 @@ export default {
   methods: {
     clickBar() {
       this.showTracks = !this.showTracks
+    },
+    getRelativePath(path) {
+      var relativePath = path.replace(/\\/g, '/').replace(this.audiobookPath.replace(/\\/g, '/') + '/', '')
+      return this.$encodeUriPath(relativePath)
     }
   },
   mounted() {}
diff --git a/client/players/PlayerHandler.js b/client/players/PlayerHandler.js
index c4c0a6f0..46cee3bf 100644
--- a/client/players/PlayerHandler.js
+++ b/client/players/PlayerHandler.js
@@ -132,7 +132,7 @@ export default class PlayerHandler {
     var audioTracks = (this.audiobook.tracks || []).map((track) => {
       var audioTrack = new AudioTrack(track)
       audioTrack.startOffset = runningTotal
-      audioTrack.contentUrl = `/lib/${this.audiobook.libraryId}/${this.audiobook.folderId}/${track.path}?token=${this.userToken}`
+      audioTrack.contentUrl = `/lib/${this.audiobook.libraryId}/${this.audiobook.folderId}/${this.ctx.$encodeUriPath(track.path)}?token=${this.userToken}`
       audioTrack.mimeType = this.getMimeTypeForTrack(track)
       audioTrack.canDirectPlay = !!this.player.playableMimetypes[audioTrack.mimeType]
 
diff --git a/client/plugins/init.client.js b/client/plugins/init.client.js
index e06fbb93..50582804 100644
--- a/client/plugins/init.client.js
+++ b/client/plugins/init.client.js
@@ -138,6 +138,10 @@ function xmlToJson(xml) {
 }
 Vue.prototype.$xmlToJson = xmlToJson
 
+Vue.prototype.$encodeUriPath = (path) => {
+  return path.replace(/\\/g, '/').replace(/%/g, '%25').replace(/#/g, '%23')
+}
+
 const encode = (text) => encodeURIComponent(Buffer.from(text).toString('base64'))
 Vue.prototype.$encode = encode
 const decode = (text) => Buffer.from(decodeURIComponent(text), 'base64').toString()