cómo podemos reproducir audio con resaltado de texto palabra por palabra en angularjs

Estoy trabajando en un proyecto Angular JS, soy novato en esta tecnología. He recibido una asignación de mi jefe.

La tarea es:

1. Hay un archivo html con el texto “This is a Burger”.

2. Tengo un archivo de audio (.mp3) con el sonido “This is a Burger”.

este es el ejemplo de javascript. Precarga el archivo mp3 en la cola para evitar demoras en la reproducción del siguiente archivo en cola

Lo que quiero :

Cuando se reproduce el audio, el texto “This is Burger” debe ser muy claro palabra por palabra.

Esto es lo que he hecho para lograr la tarea anterior.

json

{ "config":{ "shuffleQuestions": true, "showPager": false, "allowBack": true, "autoMove": true }, "questions": [{ "Id": 1, "Name": "This is a burger.1", "Image": "assets/quiz/burgur.jpg", "QuestionAudio":"assets/quiz/audio.mp3", "QuestionAudiodelay":"100", "QuestionAudioTimeline":"0.07,1.04,1.8,2.29,3.19", "Options": [{ "Id": 1, "OptionsId": 1, "Name": "This is a burger.1", "IsAnswer": true }], "QuestionType": { "Id": 1, "Name": "Multiple Choice", "IsActive": true } }]} 

html

 

{{quiz.name}}


{{currentPage}}.




js

 'use strict'; var app = angular.module('quizApp', ['ngRoute', 'ngSanitize']) // Routing has been added to keep flexibility in mind. This will be used in future. angular.module('quizApp').config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) { var routes = [ { url: '/home', template: 'templates/quiz.html', controller: 'quizCtrl' } ]; routes.forEach(function (r, index) { $routeProvider.when(r.url, { templateUrl: r.template, controller: r.controller }); }); $routeProvider.otherwise({ redirectTo: '/home' }); //$locationProvider.html5Mode(true); }]); var quizCtrl = function ($scope, $http, helper) { $scope.quizName = 'assets/quiz.json'; $scope.arrQuestion=[]; $scope.arrOptionsId=[]; $scope.addanswer=[]; $scope.allarray =[]; // Others are work in progress. $scope.defaultConfig = { 'allowBack': true, 'allowReview': true, 'autoMove': false, // if true, it will move to next question automatically when answered. 'duration': 0, // indicates the time in which quiz needs to be completed. post that, quiz will be automatically submitted. 0 means unlimited. 'pageSize': 1, 'requiredAll': false, // indicates if you must answer all the questions before submitting. 'richText': false, 'shuffleQuestions': false, 'shuffleOptions': false, 'showClock': false, 'showPager': true, 'theme': 'block' } $scope.IsVisible = true; $scope.IsHidden = true; $scope.IsHidden = $scope.IsHidden ? true : true; $scope.NextQuiz = function (index) { if (index > 0 && index <= $scope.totalItems) { $scope.currentPage = index; $scope.mode = 'quiz'; } if(index==$scope.totalItems){ $scope.IsHidden = false; $scope.IsVisible = $scope.IsVisible ? false : true; } $scope.qIndex++; } $scope.onClick = function (question, option) { if (question.QuestionTypeId == 1) { question.Options.forEach(function (element, index, array) { if (element.Id != option.Id) { element.Selected = false; question.Answered = element.Id; } }); } if ($scope.config.autoMove == true && $scope.currentPage < $scope.totalItems) $scope.currentPage++; } $scope.onSubmit = function () { var answers = []; /* $scope.questions.forEach(function (q, index) { //console.log(answers.push({'QuizId': $scope.quiz.Id, 'QuestionId': q.Id, 'Answered': q.Answered})); answers.push({ 'QuizId': $scope.quiz.Id, 'QuestionId': q.Id, 'Answered': q.Answered }); }); */ // Post your data to the server here. answers contains the questionId and the users' answer. //$http.post('api/Quiz/Submit', answers).success(function (data, status) { // alert(data); //}); $scope.mode = 'result'; } $scope.pageCount = function () { return Math.ceil($scope.questions.length / $scope.itemsPerPage); }; //If you wish, you may create a separate factory or service to call loadQuiz. To keep things simple, i have kept it within controller. $scope.loadQuiz = function (file) { $http.get(file) .then(function (res) { // $scope.quiz = res.data.quiz; console.log($scope.quiz.name); $scope.config = helper.extend({}, $scope.defaultConfig, res.data.config); $scope.questions = $scope.config.shuffleQuestions ? helper.shuffle(res.data.questions) : res.data.questions; $scope.totalItems = $scope.questions.length; $scope.itemsPerPage = $scope.config.pageSize; $scope.currentPage = 1; $scope.currentquestion=1; $scope.mode = 'quiz'; if($scope.config.shuffleOptions) $scope.shuffleOptions(); $scope.$watch('currentPage + itemsPerPage', function () { var begin = (($scope.currentPage - 1) * $scope.itemsPerPage), end = begin + $scope.itemsPerPage; $scope.filteredQuestions = $scope.questions.slice(begin, end); }); $scope.questions.forEach(function (question,key){ $scope.arrAnswer= question.Options[0].Name; $scope.arrOptionsId= question.Options[0].Id; $scope.arraudio= question.QuestionAudio; $scope.arraudiodelay= question.QuestionAudiodelay; $scope.arraudiotimeline= question.QuestionAudioTimeline; $scope.allarray=[$scope.arrAnswer,$scope.arraudio,$scope.arraudiodelay,$scope.arraudiotimeline]; $scope.arrQuestion.push($scope.allarray); }); if($scope.currentPage==1) { // console.log($scope.arrQuestion); $scope.qIndex = 0; $scope.audioplay(); } }); } $scope.audioplay=function(){ var qIndex = $scope.qIndex; $scope.QuestionAnswer=$scope.arrQuestion[qIndex][0]; $scope.QuestionAudio=$scope.arrQuestion[qIndex][1]; $scope.QuestionAudiodelay=$scope.arrQuestion[qIndex][2]; $scope.Questionaudiotimeline=$scope.arrQuestion[qIndex][3]; //console.log($scope.QuestionAnswer); console.log($scope.QuestionAudio); //console.log($scope.QuestionAudiodelay); console.log($scope.arrOptionsId); $scope.QuestionAnswerArray = $scope.QuestionAnswer.split(' '); //alert($scope.QuestionAnswerArray.length); $scope.allAnswerWithSpan = {}; for (var i = 0; i <$scope.QuestionAnswerArray.length; i++) { $scope.addanswer[i] = '' +$scope.QuestionAnswerArray[i]+ ''; // console.log($scope.addanswer); } $scope.allAnswerWithSpan = $scope.addanswer.join(" "); var audio =new Audio($scope.QuestionAudio); audio.play(); audio[0].onended = function() { audioIndex += 1; playAudio(audioIndex); }; } $scope.playAudio=function(index){ /* $("p > span").removeClass("playing"); $("#myAudio")[0].src = $scope.QuestionAudio[index]; $("#myAudio")[0].play(); $("p > span:nth-child(" + (index + 1) + ")").addClass("playing"); */ } $scope.shuffleOptions = function(){ $scope.questions.forEach(function (question) { question.Options = helper.shuffle(question.Options); }); } $scope.loadQuiz($scope.quizName); } quizCtrl.$inject = ['$scope', '$http', 'helperService']; app.controller('quizCtrl', quizCtrl);