diff --git a/app/xml_cdr/xml_cdr_details.php b/app/xml_cdr/xml_cdr_details.php
index a4b39d41a5..c8335e2e10 100644
--- a/app/xml_cdr/xml_cdr_details.php
+++ b/app/xml_cdr/xml_cdr_details.php
@@ -500,6 +500,47 @@
 		echo "<br /><br />\n";
 	}
 
+//call recording
+	if (permission_exists('xml_cdr_recording') && permission_exists('xml_cdr_recording_play')) {
+		//recording properties
+		if (!empty($record_path) && !empty($record_name) && permission_exists('xml_cdr_recording') && (permission_exists('xml_cdr_recording_play') || permission_exists('xml_cdr_recording_download'))) {
+			$record_extension = pathinfo($record_name, PATHINFO_EXTENSION);
+			switch ($record_extension) {
+				case "wav" : $record_type = "audio/wav"; break;
+				case "mp3" : $record_type = "audio/mpeg"; break;
+				case "ogg" : $record_type = "audio/ogg"; break;
+			}
+		}
+
+		echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
+		echo "<tr>\n";
+		echo "	<td align='left'><b>".$text['label-recording']."</b>&nbsp;</td>\n";
+		echo "	<td align='right'>\n";
+		//controls
+		if (!empty($record_path) || !empty($record_name)) {
+			echo "<audio id='recording_audio_".escape($xml_cdr_uuid)."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".escape($xml_cdr_uuid)."')\" onended=\"recording_reset('".escape($xml_cdr_uuid)."');\" src=\"download.php?id=".escape($xml_cdr_uuid)."\" type='".escape($record_type)."'></audio>";
+			echo button::create(['type'=>'button','title'=>$text['label-play'].' / '.$text['label-pause'],'icon'=>$settings->get('theme', 'button_icon_play'),'label'=>$text['label-play'],'id'=>'recording_button_'.escape($xml_cdr_uuid),'onclick'=>"recording_play('".escape($xml_cdr_uuid)."', null, null, 'true')",'style'=>'margin-bottom: 8px; margin-top: -8px;']);
+			if (permission_exists('xml_cdr_recording_download')) {
+				echo button::create(['type'=>'button','title'=>$text['label-download'],'icon'=>$settings->get('theme', 'button_icon_download'),'label'=>$text['label-download'],'onclick'=>"window.location.href='download.php?id=".urlencode($xml_cdr_uuid)."&t=bin';",'style'=>'margin-bottom: 8px; margin-top: -8px;']);
+			}
+		}
+		echo "	</td>\n";
+		echo "</tr>\n";
+		echo "</table>\n";
+		echo "<div class='card'>\n";
+		//progress bar
+		echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
+			echo "<tr class='list-row' id='recording_progress_bar_".$xml_cdr_uuid."' onclick=\"recording_seek(event,'".escape($xml_cdr_uuid)."')\">\n";
+				echo "<td id='playback_progress_bar_background_".escape($xml_cdr_uuid)."' class='playback_progress_bar_background' style='padding: 0; background-size: 100% 100% !important;'>\n";
+					echo "<span class='playback_progress_bar' id='recording_progress_".$xml_cdr_uuid."'></span>\n";
+				echo "</td>\n";
+			echo "</tr>\n";
+		echo "</table>\n";
+		echo "</div>\n";
+		echo "<br /><br />\n";
+		echo "<script>recording_load('".escape($xml_cdr_uuid)."');</script>\n";
+	}
+
 //show the call flow summary
 	echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
 	echo "<tr>\n";
diff --git a/resources/footer.php b/resources/footer.php
index badd35f9aa..87fca34bc0 100644
--- a/resources/footer.php
+++ b/resources/footer.php
@@ -101,6 +101,8 @@
 
 //set template variables
 
+	//add self
+		$view->assign('php_self', basename($_SERVER['PHP_SELF']));
 	//add translations
 		foreach($text as $key => $value) {
 			$array[str_replace('-', '_', $key)] = $value;
diff --git a/themes/default/template.php b/themes/default/template.php
index 944aa8abe9..d9f231db7b 100644
--- a/themes/default/template.php
+++ b/themes/default/template.php
@@ -715,37 +715,55 @@
 		{literal}
 		var recording_audio, audio_clock, recording_id_playing;
 
-		function recording_play(player_id, data, audio_type) {
+		function recording_load(player_id, data, audio_type) {
+			{/literal}
+			//create and load waveform image
+			{if $settings.theme.audio_player_waveform_enabled == 'true'}
+				{literal}
+				//list playback
+				if (document.getElementById('playback_progress_bar_background_' + player_id)) {
+					// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
+					document.getElementById('playback_progress_bar_background_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
+				}
+				//form playback
+				else if (document.getElementById('recording_progress_bar_' + player_id)) {
+					// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
+					document.getElementById('recording_progress_bar_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
+				}
+				{/literal}
+			{else}
+				{literal}
+				//list playback
+				if (document.getElementById('playback_progress_bar_background_' + player_id)) {
+					document.getElementById('playback_progress_bar_background_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 100%)";
+				}
+				//form playback
+				else if (document.getElementById('recording_progress_bar_' + player_id)) {
+					document.getElementById('recording_progress_bar_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 100%)";
+				}
+				{/literal}
+			{/if}
+			{literal}
+		}
+
+		function recording_play(player_id, data, audio_type, label) {
 			if (document.getElementById('recording_progress_bar_' + player_id)) {
 				document.getElementById('recording_progress_bar_' + player_id).style.display='';
 			}
 			recording_audio = document.getElementById('recording_audio_' + player_id);
 
+			var label_play = "{/literal}{if $php_self == 'xml_cdr_details.php'}{literal}<span class='button-label pad'>{/literal}{$text.label_play}{literal}</span>{/literal}{/if}{literal}";
+			var label_pause = "{/literal}{if $php_self == 'xml_cdr_details.php'}{literal}<span class='button-label pad'>{/literal}{$text.label_pause}{literal}</span>{/literal}{/if}{literal}";
+
 			if (recording_audio.paused) {
-				{/literal}
-				//create and load waveform image
-				{if $settings.theme.audio_player_waveform_enabled == 'true'}
-					{literal}
-					//list playback
-					if (document.getElementById('playback_progress_bar_background_' + player_id)) {
-						// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
-						document.getElementById('playback_progress_bar_background_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
-					}
-					//form playback
-					else if (document.getElementById('recording_progress_bar_' + player_id)) {
-						// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
-						document.getElementById('recording_progress_bar_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
-					}
-					{/literal}
-				{/if}
-				{literal}
+				recording_load(player_id, data, audio_type);
 				recording_audio.volume = 1;
 				recording_audio.play();
 				recording_id_playing = player_id;
-				document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_pause}{literal} fa-fw'></span>";
+				document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_pause}{literal} fa-fw'></span>" + (label_pause ?? '');
 				audio_clock = setInterval(function () { update_progress(player_id); }, 20);
 
-				$('[id*=recording_button]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>");
+				$('[id*=recording_button]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>" + (label_play ?? ''));
 				$('[id*=recording_button_intro]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_comment}{literal} fa-fw'></span>");
 				$('[id*=recording_progress_bar]').not('[id*=recording_progress_bar_' + player_id + ']').css('display', 'none');
 
@@ -763,7 +781,7 @@
 					document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_comment}{literal} fa-fw'></span>";
 				}
 				else {
-					document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>";
+					document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>" + (label_play ?? '');
 				}
 				clearInterval(audio_clock);
 			}
@@ -778,9 +796,15 @@
 			recording_audio = document.getElementById('recording_audio_' + player_id);
 			recording_audio.pause();
 			recording_audio.currentTime = 0;
-			if (document.getElementById('recording_progress_bar_' + player_id)) {
-				document.getElementById('recording_progress_bar_' + player_id).style.display='none';
-			}
+			{/literal}
+			{if $php_self <> 'xml_cdr_details.php'}
+				{literal}
+				if (document.getElementById('recording_progress_bar_' + player_id)) {
+					document.getElementById('recording_progress_bar_' + player_id).style.display='none';
+				}
+				{/literal}
+			{/if}
+			{literal}
 			if (player_id.substring(0,6) == 'intro_') {
 				document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_comment}{literal} fa-fw'></span>";
 			}