First step: make the player handle both transcode and native audio streams

approot/mediaplayer.xml

@@ -3,7 +3,8 @@
 <!--FORMS message blocks-->
 
 <message id="Lms.MediaPlayer.template">
-	<audio id="lms-mp-audio"></audio>
+	<audio id="lms-mp-audio">
+	</audio>
 	<div class="container">
 		<div class="Lms-player-seek-container">
 			<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>

docroot/js/mediaplayer.js

@@ -14,8 +14,8 @@ LMS.mediaplayer = function () {
 	var _elems = {};
 	var _offset = 0;
 	var _duration = 0;
-	var _audioSrc;
-	var _mode = Mode.File;
+	var _audioNativeSrc;
+	var _audioTranscodedSrc;
 
 	var _updateControls = function() {
 		if (_elems.audio.paused) {
@@ -115,8 +115,8 @@ LMS.mediaplayer = function () {
 
 		_elems.playpause.addEventListener("click", function() {
 			if (_elems.audio.paused) {
-				if (_elems.audio.hasAttribute("src"))
-					_elems.audio.play();
+				if (_elems.audio.firstChild)
+					_playTrack();
 			}
 			else
 				_elems.audio.pause();
@@ -129,15 +129,17 @@ LMS.mediaplayer = function () {
 			_requestNextTrack();
 		});
 		_elems.seek.addEventListener("change", function() {
-			if (!_elems.audio.hasAttribute("src"))
+			let mode = _getAudioMode();
+			if (!mode)
 				return;
 
 			let selectedOffset = parseInt(_elems.seek.value, 10);
 
-			switch (_mode) {
+			switch (mode) {
 				case Mode.Transcode:
 					_offset = selectedOffset;
-					_elems.audio.src = _audioSrc + "&offset=" + _offset;
+					_removeAudioSources();
+					_addAudioSourceIfSet(_audioTranscodeSrc +  "&offset=" + _offset);
 					_elems.audio.load();
 					_elems.audio.currentTime = 0;
 					_playTrack();
@@ -189,14 +191,42 @@ LMS.mediaplayer = function () {
 
 	}
 
+	var _removeAudioSources = function() {
+		while ( _elems.audio.lastElementChild) {
+			_elems.audio.removeChild( _elems.audio.lastElementChild);
+		}
+	}
+
+	var _addAudioSourceIfSet = function(audioSrc) {
+		let source = document.createElement('source');
+		source.src = audioSrc;
+		_elems.audio.appendChild(source);
+	}
+
+	var _getAudioMode = function() {
+		if (_elems.audio.currentSrc) {
+			if (_elems.audio.currentSrc.includes("format"))
+				return Mode.Transcode;
+			else
+				return Mode.File;
+		}
+		else
+			return undefined;
+	}
+
 	var loadTrack = function(params, autoplay) {
 		_offset = 0;
 		_duration = params.duration;
-		_audioSrc = params.resource;
-		_mode = params.mode;
+		_audioNativeSrc = params.native_resource;
+		_audioTranscodeSrc = params.transcode_resource;
 
 		_elems.seek.max = _duration;
-		_elems.audio.src = _audioSrc;
+
+		_removeAudioSources();
+		// ! order is important
+		_addAudioSourceIfSet(_audioNativeSrc);
+		_addAudioSourceIfSet(_audioTranscodeSrc);
+		_elems.audio.load();
 
 		_elems.curtime.innerHTML = _durationToString(_offset);
 		_elems.duration.innerHTML = _durationToString(_duration);

src/lms/ui/MediaPlayer.cpp

@@ -62,26 +62,18 @@ MediaPlayer::loadTrack(Database::IdType trackId, bool play)
 	const auto track {Database::Track::getById(LmsApp->getDbSession(), trackId)};
 	const std::string imgResourceMimeType {LmsApp->getImageResource()->getMimeType()};
 
-	std::string resource;
-	bool transcode;
-	if (LmsApp->getUser()->getAudioTranscodeEnable())
-	{
-		resource = LmsApp->getAudioTranscodeResource()->getUrlForUser(trackId, LmsApp->getUser());
-		transcode = true;
-	}
-	else
-	{
-		resource = LmsApp->getAudioFileResource()->getUrl(trackId);
-		transcode = false;
-	}
+	std::string nativeResource;
+	const std::string transcodeResource {LmsApp->getAudioTranscodeResource()->getUrlForUser(trackId, LmsApp->getUser())};
+//	if (!LmsApp->getUser()->getAudioTranscodeEnable())
+		nativeResource = LmsApp->getAudioFileResource()->getUrl(trackId);
 
 	const auto artists {track->getArtists()};
 
 	std::ostringstream oss;
 	oss
 		<< "var params = {"
-		<< " mode: " << (transcode ? "Mode.Transcode" : "Mode.File") << ","
-		<< " resource: \"" << resource << "\","
+		<< " native_resource: \"" << nativeResource << "\","
+		<< " transcode_resource: \"" << transcodeResource << "\","
 		<< " duration: " << std::chrono::duration_cast<std::chrono::seconds>(track->getDuration()).count() << ","
 		<< " title: \"" << StringUtils::jsEscape(track->getName()) << "\","
 		<< " artist: \"" << (!artists.empty() ? StringUtils::jsEscape(artists.front()->getName()) : "") << "\","