[Speak text] Play/Pause the text speech

[olushuo]

Pull Request Template

⚠️ Before Submitting a PR, read the Contributing Docs in full!

Summary

Play back the message text

Change Type

Please delete any irrelevant options.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update
• [ ] Documentation update

Testing

1. Click on the play button to play back the text(the button turns into a pause button)
2. Click on the pause button to pause (the button turns into a play button)
3. Click on the play button to resume (the button turns into a pause button)
4. Wait until it finishes speaking, the button should turn into a play button again
5. Click on another message's play button while it is speaking, the previous speech should be cancelled and it will start a new speech.
6. Refresh the webpage while it is speaking, the current speech should be cancelled and the play/pause button will turn into a play button
7. I have tested chrome/edge/vivaldi/firefox

   Test Configuration:

Checklist

• [x] My code adheres to this project's style guidelines
• [x] I have performed a self-review of my own code
• [ ] I have commented in any complex areas of my code
• [ ] I have made pertinent documentation changes
• [x] My changes do not introduce new warnings
• [ ] I have written tests demonstrating that my changes are effective or that my feature works
• [ ] Local unit tests pass with my changes
• [ ] Any changes dependent on mine have been merged and published in downstream modules.

[aws-amplify-ap-east-1[bot]]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-164.d35bsvaicfsnob.amplifyapp.com