diff --git a/ui/src/audioplayer/AudioTitle.js b/ui/src/audioplayer/AudioTitle.js
index 39c2389db..bf509c668 100644
--- a/ui/src/audioplayer/AudioTitle.js
+++ b/ui/src/audioplayer/AudioTitle.js
@@ -27,21 +27,22 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
           <QualityInfo record={qi} className={classes.qualityInfo} />
         )}
       </span>
-      {!isMobile && (
-        <span className={clsx(classes.songInfo)}>
-          {`${song.artist} - ${song.album}` +
-            (song.year ? ` - ${song.year}` : '')}
-        </span>
-      )}
-      {isMobile && (
+      {isMobile ? (
         <>
-          <span className={clsx(classes.songInfo, classes.songArtist)}>
-            {`${song.artist}`}
+          <span className={classes.songInfo}>
+            <span className={'songArtist'}>{song.artist}</span>
           </span>
           <span className={clsx(classes.songInfo, classes.songAlbum)}>
-            {song.year ? `${song.album} - ${song.year}` : `${song.album}`}
+            <span className={'songAlbum'}>{song.album}</span>
+            {song.year ? ` - ${song.year}` : ''}
           </span>
         </>
+      ) : (
+        <span className={classes.songInfo}>
+          <span className={'songArtist'}>{song.artist}</span> -{' '}
+          <span className={'songAlbum'}>{song.album}</span>
+          {song.year ? ` - ${song.year}` : ''}
+        </span>
       )}
     </Link>
   )