Text To Audio

Kwel-vrae

How to enable “speechSynthesis“ on FireFox?

Notice: This solution only for FireFox Desktop.
Open FireFox browser, search about:config on a new tab. Now search with this string and enable as true.
a. media.webspeech.synth.enabled

How to enable “SpeechRecognition“ on FireFox?

Notice: This solution only for FireFox Desktop.
Open FireFox browser, search about:config on a new tab. Now search with this string and enable as true.
a. media.webspeech.recognition.enable
b. media.webspeech.recognition.force_enable

Can I add button in Gutenburg block?

Yes, you can add listening button from block editor. Open you block editor and search Customize Button then add it.
Now you can change color, backgroundColor, width. And also add custom_css.

How to change button text?

You can change button text 2 ways one is by shortcode attribute. Another way is adding filter. But filter always overrides the shortcode attributes. Here is short code Example :
[tta_listen_btn listen_text=”Listen” pause_text=”Pause” resume_text=”Resume” replay_text=”Replay” start_text=”Start” stop_text=”Stop”]

Filter Example :

add_filter( 'tta__button_text_arr', 'tta__button_text_arr_callback' );
function tta__button_text_arr_callback ( $button_text_arr ) {

    // Listen button
    $text_arr['listen_text'] = 'Listen'; // paste custem text
    $text_arr['pause_text'] = 'Pause'; // paste custem text
    $text_arr['resume_text'] = 'Resume'; // paste custem text
    $text_arr['replay_text'] = 'Replay'; // paste custem text

    // Record button text
    $text_arr['start_text'] = 'Start'; // paste custem text
    $text_arr['stop_text'] = 'Stop'; // paste custem text

    return $text_arr;
}

How to add custom css class to button?

Add class on shortcode as an attribute. Example : [tta_listen_btn class="custom_class"]

How can I change button background and text color?

Yes, you can change buttons background and text color from plugins dashboard’s customization menu. also from block editor by applying the customization button block.