Text to Speech

[FinTheHuman]

Hi, 

On my app my users needs to have a "text-to-speech" kind-of function. The purpose of this is when they need to quick review the value added. 

Is this possible? Any suggestions will be helpful. Thanks

[Aether]

Hello @FinTheHuman,

Yes, that is possible with the use of (SpeechSynthesisUtterance()) script. You may follow this steps to accomplish your workflow:

- Add a button with onclick function on your HTML Block:

<button type="button" class="speech" onclick="textToAudio()">Read Description</button>

- Next add this script on your Footer:

<script>
function textToAudio() {
let msg = document.getElementById("InsertRecordFIELDNAME").value;
               
let speech = new SpeechSynthesisUtterance();
    speech.lang = "en-US";
    speech.text = msg;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 2;
                
window.speechSynthesis.speak(speech);
}
  </script>

Note:

- On the code, change the "FIELDNAME" on your actual field where you want the text value to be converted on speech. 

Sample URL:  https://c1abv183.caspio.com/dp/48276000ffc1bb043d4844edac54

I hope this helps you :D 

[FinTheHuman]

Hi @WatashiwaJin, 

Thank you for the code you provided. Sorry I forgot to add in the question, I need this as well in the report tabular page. 

I tested the code on the tabular datapage but it's not working  

Can you help me with this? 

[Aether]

You're welcome @FinTheHuman, on the tabular report, try this workflow:

- Add 2 HTML Blocks on your report, for the 1st Block, you will place a <p> tag where you add the field which you want to be converted to speech:

<p id="text[@field:ID]"> [@field:YOURFIELDHERE] </p>

- On the 2nd Block, you will paste the this code:

<button type="button" class="speech" onclick="textToAudio[@field:ID]()">Read Description</button>

<script>
function textToAudio[@field:ID]() {
let msg = document.getElementById("text[@field:ID]").innerText;
                
let speech = new SpeechSynthesisUtterance();
    speech.lang = "en-US";
    speech.text = msg;
    speech.volume = 1;
    speech.rate = 1;
    speech.pitch = 2;
                
window.speechSynthesis.speak(speech);
}
</script>

Important Notes:

-  The code should be placed on HTML Block and not on the Footer to work.
- Notice on the code where it has "textToAudio[@field:ID]()" and "text[@field:ID]", both has a "[@field:ID]" on the end. The reason behind this is to have a unique identifier in every row of the report. So the code will not be confused on which text to be converted to speech.

Similar on this workflow: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/

Sample URL: https://c1abv183.caspio.com/dp/4827600054b42c5595aa44bc9122

I hope this helps you :)

[Kurumi]

You can also use this for your DataPages: https://responsivevoice.org/

[Kurumi]

Hi All! In addition to this, you can also use Speech to Text in Caspio by using Web Speech API or Speech recognition. For more information, you can check it here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API