Fix audio playback control

[tfnribeiro]

• The reason this happens is because autoplay is not allowed in a page the user hasn't interacted with. Instead a promise should be used to check if the audio was played, and based on that we should reset the status of the animation and the flag.

Essentially the timeout we were using could allow users to click on the page and therefor allow the autoplay to take place.

With this change, the user will see the button and have to click it, but the following exercises they should hear the sound without clicking.

More info can be found at: https://developer.chrome.com/blog/autoplay

[netlify[bot]]

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	1a213e0d41ba7659933a3d1c4d351a363efb2992
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/6634ef97e195380008600f5e
😎 Deploy Preview	https://deploy-preview-358--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.