I have successfully created an angular pipe that converts text into spoken words.
Currently, I am working on implementing a feature where the user can view the sentence being spoken while the audio is playing, instead of after it has finished (which is how it currently works).
If I have an Observable containing strings, how can I immediately subscribe to each one, play the audio until completion, and then move on to the next string?
transform(input: Observable<string>, ...args) {
if (input) {
return input.concatMap(text => {
if (!text)
return Observable.empty()
let promise = Promise.resolve()
.then(() =>
this.service.textToSpeech(text)
)
.then((audio) =>
new Promise<string>((resolve) => {
player.play(audio)
player.addEventListener("ended", () => {
resolve(text) // The user sees the text when the audio stops..
})
})
)
return Observable.fromPromise(promise)
})
}
}