diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index 08c290379c..bf3e4f0932 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -12,6 +12,7 @@ import toast from '../toast/toast';
 import { copy } from '../../scripts/clipboard';
 import dom from '../../scripts/dom';
 import globalize from '../../scripts/globalize';
+import itemHelper from '../../components/itemHelper';
 import loading from '../loading/loading';
 import '../../elements/emby-select/emby-select';
 import '../listview/listview.scss';
@@ -71,8 +72,8 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
             const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
             html += `${createAttribute(globalize.translate('MediaInfoSize'), size)}<br/>`;
         }
-        for (let i = 0, length = version.MediaStreams.length; i < length; i++) {
-            const stream = version.MediaStreams[i];
+        version.MediaStreams.sort(itemHelper.sortTracks);
+        for (const stream of version.MediaStreams) {
             if (stream.Type === 'Data') {
                 continue;
             }
diff --git a/src/components/playback/playbackmanager.js b/src/components/playback/playbackmanager.js
index cd634d71cf..9736d597db 100644
--- a/src/components/playback/playbackmanager.js
+++ b/src/components/playback/playbackmanager.js
@@ -3657,7 +3657,7 @@ class PlaybackManager {
         if (player.audioTracks) {
             const result = player.audioTracks();
             if (result) {
-                return result;
+                return result.sort(itemHelper.sortTracks);
             }
         }
 
@@ -3666,14 +3666,14 @@ class PlaybackManager {
         const mediaStreams = (mediaSource || {}).MediaStreams || [];
         return mediaStreams.filter(function (s) {
             return s.Type === 'Audio';
-        });
+        }).sort(itemHelper.sortTracks);
     }
 
     subtitleTracks(player = this._currentPlayer) {
         if (player.subtitleTracks) {
             const result = player.subtitleTracks();
             if (result) {
-                return result;
+                return result.sort(itemHelper.sortTracks);
             }
         }
 
@@ -3682,7 +3682,7 @@ class PlaybackManager {
         const mediaStreams = (mediaSource || {}).MediaStreams || [];
         return mediaStreams.filter(function (s) {
             return s.Type === 'Subtitle';
-        });
+        }).sort(itemHelper.sortTracks);
     }
 
     getSupportedCommands(player) {
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index c51c018739..9004c6d288 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -274,7 +274,7 @@ function renderAudioSelections(page, mediaSources) {
     const tracks = mediaSource.MediaStreams.filter(function (m) {
         return m.Type === 'Audio';
     });
-    tracks.sort((a, b) => itemHelper.sortTracks(a, b));
+    tracks.sort(itemHelper.sortTracks);
     const select = page.querySelector('.selectAudio');
     select.setLabel(globalize.translate('Audio'));
     const selectedId = mediaSource.DefaultAudioStreamIndex;
@@ -304,7 +304,7 @@ function renderSubtitleSelections(page, mediaSources) {
     const tracks = mediaSource.MediaStreams.filter(function (m) {
         return m.Type === 'Subtitle';
     });
-    tracks.sort((a, b) => itemHelper.sortTracks(a, b));
+    tracks.sort(itemHelper.sortTracks);
     const select = page.querySelector('.selectSubtitles');
     select.setLabel(globalize.translate('Subtitles'));
     const selectedId = mediaSource.DefaultSubtitleStreamIndex == null ? -1 : mediaSource.DefaultSubtitleStreamIndex;