feat: add random intervals to make a more natural speech (#8).

[skippyr]

Hello, @burntcarrot. I did some changes to the script.js file to create random intervals in the speech and make it sounds more natural (#8). I also made changes to JSDocs to make it matches to current state of the code and changes to make it more easier to edit. Here is a brief of the changes I did:

• add //@ts-check at the top of the code, so code editors like Visual Studio Code or neovim can interpret errors, just as if you were using Typescript.

• remove the writeDialogueText and rename speak functions. Now the writing to the $dialogueText is together with the speak functionality in the function speakAndWriteDialogueText at the end of the file. This was made so the changes made by the random intervals could be easily set for both operations.

• add randomIntervalsInMilliseconds variable to hold the sums of all random intervals added to the timeouts of the speakAndWriteToDialogueText function. This is needed to calculate the timeouts properly.

• add trimAndRemoveExtraWhiteSpaces function to remove the white spaces that are at the start and end of a text, as well extra white spaces that have been inserted between the words. This function is, now, used by the getInputText to treat the input text and avoid long random intervals if the user inserts too much white spaces.

• add addRandomIntervalInMilliseconds function to add random intervals, in milliseconds, to the randomIntervalsInMilliseconds variable. This function is used by the speakAndWriteDialogueText whenever there is a white space.

  The random interval used is inversely proportional to the interval chosen by the user, which means:

  • if the interval chosen is low, the random interval is high.
  • if the interval chosen is high, the random interval is low.

  This makes the voices sound more natural.

• add cancelRandomIntervals function to reset the variable randomIntervalsInMilliseconds to zero. This functions just exists to keep the code consistent in the style adopted in the speakAndWriteDialogueText function.

• fix typo in JSDocs and code: change miliseconds to milliseconds.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
quackspeak	✅ Ready (Inspect)	Visit Preview	Jan 8, 2023 at 1:23PM (UTC)

[burntcarrot]

Thank you for the PR!

After checking the preview deployment, it seems like the randomness is causing a lot of overlapping sounds. Instead of randomized intervals, we can just have an interval for whitespaces.

[skippyr]

Thank you for the review. I will take a look on that.

[skippyr]

I did some tests in Firefox and Chromium. The code did work fine in Firefox, but the audio seems to have some troubles when loading in Chromium, sometimes the audio overlaps or even gets muted. This situation occurs using Chromium for desktop and Google Chrome for mobile.

If you can, I would recommend you to test the code using Firefox to see if this issue persists. Meanwhile, I will try to find a solution to this issue.

[skippyr]

This issue can probably be the same as #2.

[burntcarrot]

I've checked Firefox; works fine. I think this is an issue with Chromium/Chrome/Brave. This needs some more investigation. 🤔🕵️

[skippyr]

Probably. I think this can be a missing await or an error when loading the audios.

[skippyr]

Hello, @burntcarrot. I reviewed the code again and I noted that the issue for the audio getting muted in Chromium got solved when I used only one AudioContext for the whole code.

Previously, each of the functions createDecodedAudioDataFromVoiceFile and playDecodedAudioData were creating one new audioContext whenever they were called.

The last commit I did, e6a9e43, now creates the global variable audioContext, that starts undefined but receives an AudioContext type whenever the function loadLocalVoices is called. That variable is now used instead of creating new audio contexts.

I have not seen an issue of audio overlapping again, so I want to know if this commit fixes the issue you reported. Maybe this also fixes #2?

Just note that if you use the deployment from Vercel, try to hard refresh the page. Some times the browser uses a version of the code it has cached previously.

[burntcarrot]

The last commit I did, e6a9e43, now creates the global variable audioContext, that starts undefined but receives an AudioContext type whenever the function loadLocalVoices is called. That variable is now used instead of creating new audio contexts.

Yeah, this seems better. Thanks for the fix!

Maybe this also fixes #2?

I don't have iOS/Safari with me, but I can ask someone to test it out.

[burntcarrot]

Looks good to me! Just some tiny nitpicks.

[skippyr]

Sure, I will make those changes.

[burntcarrot]

@f1redr4g0n Merged to main, and works with main deployment. Thanks for the fix!