audio playback for UI

GBB.ConversationalKM.WebUI/CognitiveSearch.UI/Search/DocumentSearchClient.cs

@@ -44,6 +44,7 @@ namespace CognitiveSearch.UI
         // this should match the default value used in appsettings.json.  
         private static string defaultContainerUriValue = "https://{storage-account-name}.blob.core.windows.net/{container-name}";
 
+        public string AudioContainer { get; set; }
 
         public DocumentSearchClient(IConfiguration configuration)
         {
@@ -56,6 +57,7 @@ namespace CognitiveSearch.UI
                 IndexerName = configuration.GetSection("SearchIndexerName")?.Value;
                 idField = configuration.GetSection("KeyField")?.Value;
                 telemetryClient.InstrumentationKey = configuration.GetSection("InstrumentationKey")?.Value;
+                AudioContainer = configuration.GetSection("AudioContainer")?.Value;
 
                 // Create an HTTP reference to the catalog index
                 _searchClient = new SearchServiceClient(searchServiceName, new SearchCredentials(apiKey));
@@ -430,6 +432,14 @@ namespace CognitiveSearch.UI
             int storageIndex;
             string tokenToUse = GetToken(decodedPath, out storageIndex);
 
+            if (AudioContainer != null) {
+                Uri blobUri = new Uri(decodedPath);
+                string audioPath = AudioContainer + "/" + String.Join("", blobUri.Segments[2..]);
+                audioPath = blobUri.Scheme + "://" + blobUri.Host + "/" + audioPath.Replace(".json", "");
+                string audioToken = GetToken(audioPath, out int x);
+                response.Add("audioPath", audioPath + audioToken);
+            }
+
             var result = new DocumentResult
             {
                 Result = response,

GBB.ConversationalKM.WebUI/CognitiveSearch.UI/wwwroot/js/timeline.js

@@ -19,6 +19,10 @@ function getTimelineHtml(data) {
                 var messageText = messages[i].Value;
                 var customProperties = JSON.parse(messages[i].CustomProperties);
 
+                var starTime = customProperties.offsetInTicks / 10000000;
+                var endTime = starTime + (customProperties.durationInTicks / 10000000);
+                var audioPath = data.result.audioPath;
+                
                 var referenceId = messages[i].ReferenceId;
                 var userMessageObject = messages.filter(x => x.Id === referenceId);
                 var userMessage = null;
@@ -33,7 +37,13 @@ function getTimelineHtml(data) {
                             <span class="flag">${sender}</span>
                             <span class="time-wrapper"><span class="time">${messageTime}</span></span>
                         </div>
-                        <div id="${messages[i].Id}" class="desc">${messageText}</div>`;
+                        
+                        <div id="${messages[i].Id}" class="desc">
+                            ${messageText}
+                            <audio controls preload="none">
+                                <source type="audio/wav" src="${audioPath}#t=${starTime},${endTime}">
+                            </audio>
+                        </div>`;
                    
                 result += item;