Replace _isPlaying in AutogeneratedAudioPlayerService with speaking p…

…roperty of speech synthesis; Fix bug with duplicate utterances being generated by autogenerated audio; Fix bug where submitting a feedback before a previous feedback response has finished speaking results in the highlighting of the card content. (oppia#4436)

core/templates/dev/head/pages/exploration_player/AudioBarDirective.js

@@ -27,13 +27,13 @@ oppia.directive('audioBar', [
         '/pages/exploration_player/' +
         'audio_bar_directive.html'),
       controller: [
-        '$scope', '$interval', 'AudioTranslationLanguageService',
+        '$scope', '$interval', '$timeout', 'AudioTranslationLanguageService',
         'AudioPlayerService', 'LanguageUtilService', 'AssetsBackendApiService',
         'AutogeneratedAudioPlayerService', 'PlayerPositionService',
         'WindowDimensionsService', 'AudioTranslationManagerService',
         'EVENT_AUTOPLAY_AUDIO', 'BrowserCheckerService',
         function(
-            $scope, $interval, AudioTranslationLanguageService,
+            $scope, $interval, $timeout, AudioTranslationLanguageService,
             AudioPlayerService, LanguageUtilService, AssetsBackendApiService,
             AutogeneratedAudioPlayerService, PlayerPositionService,
             WindowDimensionsService, AudioTranslationManagerService,
@@ -47,11 +47,23 @@ oppia.directive('audioBar', [
             value: AudioTranslationLanguageService.getCurrentAudioLanguageCode()
           };
 
-          $scope.$on(EVENT_AUTOPLAY_AUDIO, function() {
+          $scope.$on(EVENT_AUTOPLAY_AUDIO, function(e, params) {
             if ($scope.audioBarIsExpanded) {
               AudioPlayerService.stop();
-              AutogeneratedAudioPlayerService.cancel();
-              $scope.onPlayButtonClicked();
+              AutogeneratedAudioPlayerService.cancel()
+
+              // We use a timeout to allow for any previous audio to have
+              // their 'onend' callback called. This is primarily used to
+              // address delays with autogenerated audio callbacks.
+              $timeout(function() {
+                if (params) {
+                  AudioTranslationManagerService.setSecondaryAudioTranslations(
+                    params.audioTranslations,
+                    params.html,
+                    params.componentName);
+                }
+                $scope.onPlayButtonClicked();
+              }, 100);
             }
           });
 

core/templates/dev/head/pages/exploration_player/ConversationSkinDirective.js

@@ -262,7 +262,7 @@ oppia.directive('conversationSkin', [
         'EXPLORATION_SUMMARY_DATA_URL_TEMPLATE', 'INTERACTION_SPECS',
         'EVENT_NEW_CARD_OPENED', 'HintsAndSolutionManagerService',
         'AudioTranslationManagerService', 'EVENT_AUTOPLAY_AUDIO',
-        'COMPONENT_NAME_FEEDBACK',
+        'COMPONENT_NAME_FEEDBACK', 'AutogeneratedAudioPlayerService',
         function(
             $scope, $timeout, $rootScope, $window, $translate, $http,
             MessengerService, ExplorationPlayerService, UrlService,
@@ -280,7 +280,7 @@ oppia.directive('conversationSkin', [
             EXPLORATION_SUMMARY_DATA_URL_TEMPLATE, INTERACTION_SPECS,
             EVENT_NEW_CARD_OPENED, HintsAndSolutionManagerService,
             AudioTranslationManagerService, EVENT_AUTOPLAY_AUDIO,
-            COMPONENT_NAME_FEEDBACK) {
+            COMPONENT_NAME_FEEDBACK, AutogeneratedAudioPlayerService) {
           $scope.CONTINUE_BUTTON_FOCUS_LABEL = CONTINUE_BUTTON_FOCUS_LABEL;
           // The minimum width, in pixels, needed to be able to show two cards
           // side-by-side.
@@ -398,6 +398,10 @@ oppia.directive('conversationSkin', [
           var _navigateToActiveCard = function() {
             $rootScope.$broadcast(EVENT_ACTIVE_CARD_CHANGED);
             $scope.$broadcast(EVENT_AUTOPLAY_AUDIO);
+            // We must cancel the autogenerated audio player here, or else a
+            // bug where the autogenerated audio player generates duplicate
+            // utterances occurs.
+            AutogeneratedAudioPlayerService.cancel();
             var index = PlayerPositionService.getActiveCardIndex();
             $scope.activeCard = PlayerTranscriptService.getCard(index);
             tutorCardIsDisplayedIfNarrow = true;
@@ -588,10 +592,11 @@ oppia.directive('conversationSkin', [
                   var pairs = (
                     PlayerTranscriptService.getLastCard().inputResponsePairs);
                   var lastAnswerFeedbackPair = pairs[pairs.length - 1];
-                  AudioTranslationManagerService.setSecondaryAudioTranslations(
-                    feedbackAudioTranslations, feedbackHtml,
-                    COMPONENT_NAME_FEEDBACK);
-                  $scope.$broadcast(EVENT_AUTOPLAY_AUDIO);
+                  $scope.$broadcast(EVENT_AUTOPLAY_AUDIO, {
+                    audioTranslations: feedbackAudioTranslations,
+                    html: feedbackHtml,
+                    componentName: COMPONENT_NAME_FEEDBACK
+                  });
 
                   if (_oldStateName === newStateName) {
                     // Stay on the same card.

core/templates/dev/head/pages/exploration_player/HintAndSolutionModalService.js

@@ -21,13 +21,13 @@ oppia.factory('HintAndSolutionModalService', [
   'ExplorationPlayerService', 'PlayerPositionService',
   'AudioTranslationManagerService', 'AudioPlayerService',
   'EVENT_AUTOPLAY_AUDIO', 'COMPONENT_NAME_HINT',
-  'COMPONENT_NAME_SOLUTION',
+  'COMPONENT_NAME_SOLUTION', 'AutogeneratedAudioPlayerService',
   function(
       $uibModal, UrlInterpolationService, HintsAndSolutionManagerService,
       ExplorationPlayerService, PlayerPositionService,
       AudioTranslationManagerService, AudioPlayerService,
       EVENT_AUTOPLAY_AUDIO, COMPONENT_NAME_HINT,
-      COMPONENT_NAME_SOLUTION) {
+      COMPONENT_NAME_SOLUTION, AutogeneratedAudioPlayerService) {
     return {
       displayHintModal: function(index) {
         return $uibModal.open({
@@ -46,6 +46,7 @@ oppia.factory('HintAndSolutionModalService', [
               $rootScope.$broadcast(EVENT_AUTOPLAY_AUDIO);
               $scope.closeModal = function() {
                 AudioPlayerService.stop();
+                AutogeneratedAudioPlayerService.cancel();
                 AudioTranslationManagerService
                   .clearSecondaryAudioTranslations();
                 $uibModalInstance.dismiss('cancel');
@@ -77,6 +78,7 @@ oppia.factory('HintAndSolutionModalService', [
                 solution.getOppiaSolutionExplanationResponseHtml();
               $scope.closeModal = function() {
                 AudioPlayerService.stop();
+                AutogeneratedAudioPlayerService.cancel();
                 AudioTranslationManagerService
                   .clearSecondaryAudioTranslations();
                 $uibModalInstance.dismiss('cancel');

core/templates/dev/head/services/AutogeneratedAudioPlayerService.js

@@ -27,20 +27,16 @@ oppia.factory('AutogeneratedAudioPlayerService', [
     // fallback to prevent a "SpeechSynthesisUtterance is not defined" error.
     var utterance = (
       SpeechSynthesisUtterance ? new SpeechSynthesisUtterance() : null);
-    // The paused property of speech synthesis seems to return false
-    // no matter what, so we manually define our own property to track.
-    var _isPlaying = false;
 
     var _play = function(html, language, audioFinishedCallback) {
+      SpeechSynthesisChunkerService.cancel();
       message = SpeechSynthesisChunkerService.convertToSpeakableText(html);
       utterance.text = message;
       utterance.lang = language;
       utterance.rate = DEFAULT_PLAYBACK_RATE;
-      _isPlaying = true;
       SpeechSynthesisChunkerService.speak(
         utterance,
         function() {
-          _isPlaying = false;
           audioFinishedCallback();
         }
       );
@@ -50,23 +46,11 @@ oppia.factory('AutogeneratedAudioPlayerService', [
       play: function(html, language, audioFinishedCallback) {
         return _play(html, language, audioFinishedCallback);
       },
-      pause: function() {
-        // Pause and resume don't seem to work well. When an utterance is
-        // paused and an attempt to resume is made more than approximately 15
-        // seconds later, nothing happens. Avoid using for now.
-        _speechSynthesis.pause();
-        _isPlaying = false;
-      },
-      resume: function() {
-        _speechSynthesis.resume();
-        _isPlaying = true;
-      },
       cancel: function() {
         SpeechSynthesisChunkerService.cancel();
-        _isPlaying = false;
       },
       isPlaying: function() {
-        return _isPlaying;
+        return _speechSynthesis.speaking;
       }
     }
   }

core/templates/dev/head/services/SpeechSynthesisChunkerService.js

@@ -66,6 +66,7 @@ oppia.factory('SpeechSynthesisChunkerService', [
         PUNCTUATION_MARKS_TO_END_CHUNKS + ']{1}|^[\\s\\S]{1,' +
         CHUNK_LENGTH + '}$|^[\\s\\S]{1,' + CHUNK_LENGTH + '} ');
       var chunkArray = text.match(delimitChunkRegex);
+
       if (chunkArray == null ||
           chunkArray[0] === undefined ||
           chunkArray[0].length <= 2) {
@@ -197,8 +198,8 @@ oppia.factory('SpeechSynthesisChunkerService', [
         _speechUtteranceChunker(utterance, 0, callback);
       },
       cancel: function() {
-        _speechSynthesis.cancel();
         _speechUtteranceChunker.cancel = true;
+        _speechSynthesis.cancel();
       },
       convertToSpeakableText: function(html) {
         return _convertToSpeakableText(html);