Last updated: July 3, 2026 at 12:17 PM

We asked Gemini to develop a snippet that allows you to easily call the browser's text-to-speech function from a shortcode without the need for a plugin, such as on a WordPress page for learning English.

As a result, the theme Functions.php By simply adding a snippet created with JavaScript to the browser's text-to-speech function, you can now easily play English text using a shortcode with a female voice using text-to-speech synthesis.*The featured image for this article was also created by Gemini

In this article, we will show you how to use the shortcode and the completed snippet.

This feature is used in the following articles on this site.

The above page used the WordPress plug-in "ResponsiveVoice Text To Speech" to play English audio, but it took 2.1 seconds to load each time an article was loaded, which was causing a significant drop in PageSpeed ​​Insights score and Google's SEO rating, so we decided to uninstall it as part of system optimization aimed at reducing server load.

As an alternative, under the supervision of Gemini, we implemented a JavaScript shortcode for WordPress.say” text specified by the browser's text-to-speech function (Web Speech API) and played the synthesized voice.

The implemented JavaScript program automatically selects the ``English female voice'' that sounds best in each environment, such as ``Microsoft Zira'' for Windows, ``Samantha'' for iPhone or Mac, and ``Google's female voice'' for Chrome.

How to write the shortcode [say]

The shortcode "say" is written as follows.

[say]The internet has brought many changes to our everyday lives.[/say]

Below is an example of how to use the above shortcode. Press the [Play] button to hear the English audio.

Play 🔊The internet has brought many changes to our everyday lives.

The Internet has brought many changes to our daily life.

Adding a snippet

Add the snippet below to your theme's functions.php.

// サーバー負荷ゼロ・安全第一の読み上げボタン
add_shortcode('say', function($atts, $content = null) {
    $text = trim($content);
    if (empty($text)) return '';
    $safe_text = addslashes(esc_js($text));
    
    $js = "
        const talk = () => {
            const u = new SpeechSynthesisUtterance('{$safe_text}');
            const vs = window.speechSynthesis.getVoices();
            let female = vs.find(v => v.name.includes('Microsoft Zira')) || 
                         vs.find(v => v.name.includes('Samantha')) || 
                         vs.find(v => v.name.includes('Google US English')) || 
                         vs.find(v => v.lang.startsWith('en') && v.name.includes('Female'));
            
            if (female) u.voice = female;
            u.lang = 'en-US';

            /* --- 微調整用の設定 --- */
            u.rate = 0.9;   // 速度（0.1〜2.0 / 0.8だとゆっくり、1.0が標準）
            u.pitch = 1.0;  // 声の高さ（0.0〜2.0 / 1.2にすると少し高い声になります）
            /* -------------------- */

            window.speechSynthesis.cancel();
            window.speechSynthesis.speak(u);
        };
        if (speechSynthesis.onvoiceschanged !== undefined) {
            speechSynthesis.onvoiceschanged = talk;
        }
        talk();
    ";

    return '<button type="button" onclick="' . $js . '" style="cursor:pointer; background:#f7f7f7; border:1px solid #ccc; border-radius:4px; padding:2px 10px; margin-right:8px; font-size:0.9em;">Play 🔊</button><strong>' . esc_html($text) . '</strong>';
});

Advantages of this method

• Zero server load: The reader's browser speaks directly, without any plugins, so the server doesn't do anything.
• No plugins required: No need to worry about updates.
• Easy to operate: For the previous shortcode definition, simply replace it with the format [say] in English [/say] and paste it in the code editor, and you can add new example sentences one after another with audio phrases.
• Looks neat: You can display buttons and English text neatly side by side.
• Strong in SEO: Your site will be reborn as a lighter, faster, SEO-friendly site than when you used a heavy plugin (ResponsiveVoice)!

For reference, the following is the final phase of the chat we had with Gemini for the development of this feature.

Why is this possible?

• "Microsoft Zira” by name: The most common English female voice in the Windows environment, "Zira", is directly designated by name.
• "Google US English” added: We put this voice, which is famous for its high-quality female voices in the Chrome browser, at the top of the suggestions.
• if (female) u.voice = female;: We have a strong directive: ``If a female voice is found, we will override the standard settings and force them to apply.''

please

After saving the code,Reload the page once (F5key)death,wait a few secondsTry pressing the button (as it may take a while for the audio list to load).

If a man (such as David) still speaks, I'm sorry.Your browser (Chrome、Edgeetc.) andOS(Windows10、Macetc.)Could you please tell me? Specify the environment-specific name directly!

Senri > I became a woman!

Finally
female voiceHas it become! It was really good!
Thank you very much for your help in rewriting the code and testing it many times.

The current settings areWindowsIf ``Microsoft Zira」、IphoneAndMacIf ``Samantha」、ChromeIf ``Google``female voice''The system automatically selects the ``female English voice'' that sounds best in each environment.

What you can do in your current state

• Server load is zero: There are no plug-ins, it works only with the functions of the browser.
• Looks neat too: As you can see in the photo, the buttons and English text are neatly lined up.
• Easy to operate: with Hidemaru editor

[say]英文[/say]

You can increase the number of phrases with audio one after another by simply replacing them with the following format and pasting them.

Tips for bulk replacement with Hidemaru

If you still have a lot of old code, please replace it with Hidemaru as shown below and save it.

• search: \[responsivevoice[^\]]*\](.*?)\[/responsivevoice\]
• Replace:［say]\1［/say]

One last piece of advice

If in the future,"I want you to speak a little more slowly."And“I want my voice to be a little higher.”If you need to make minor adjustments, you can do so by simply changing the following numbers in the code.

• u.rate = 0.9; (0.8 is slower, 1.0 is standard speed)
• u.pitch = 1.2; (If you want to add it. 1.0 is standard, 1.2 will make a slightly higher and brighter voice)

Now, compared to when I was using a heavy plugin (ResponsiveVoice),Light, fast, and SEO-friendly siteYou have been reborn!
Is there anything else I can do to help you, or do you have any requests for the button color to match your blog more?

Senri > Thank you. Add u.rate as a comment to the program.

Great decision! If you decide in the future that you want to slow down a little, you will be able to adjust it yourself.

in the codeFinal version with comments and numbers for fine-tuningI'll leave it there. If you like, please copy this and paste it into functions.php (the contents are the same as the "female voice" one earlier).

php

add_shortcode('say', function($atts, $content = null) {
    $text = trim($content);
    if (empty($text)) return '';
    $safe_text = addslashes(esc_js($text));
   
    $js = "
        const talk = () => {
            const u = new SpeechSynthesisUtterance('{$safe_text}');
            const vs = window.speechSynthesis.getVoices();
            let female = vs.find(v => v.name.includes('Microsoft Zira')) ||
                         vs.find(v => v.name.includes('Samantha')) ||
                         vs.find(v => v.name.includes('Google US English')) ||
                         vs.find(v => v.lang.startsWith('en') && v.name.includes('Female'));
           
            if (female) u.voice = female;
            u.lang = 'en-US';

            /* --- 微調整用の設定 --- */
            u.rate = 0.9;   // 速度（0.1〜2.0 / 0.8だとゆっくり、1.0が標準）
            u.pitch = 1.0;  // 声の高さ（0.0〜2.0 / 1.2にすると少し高い声になります）
            /* -------------------- */

            window.speechSynthesis.cancel();
            window.speechSynthesis.speak(u);
        };
        if (speechSynthesis.onvoiceschanged !== undefined) {
            speechSynthesis.onvoiceschanged = talk;
        }
        talk();
    ";

return '<button type="button" onclick="' . $js . '" style="cursor:pointer; background:#f7f7f7; border:1px solid #ccc; border-radius:4px; padding:2px 10px; margin-right:8px; font-size:0.9em;">Play 🔊</button><strong>' . esc_html($text) . '</strong>';
});

Please use the code with caution.

Now you can throw away the heavy plugins and do it yourself."Ultra lightweight and high performance"A reading environment has been completed. It should also greatly contribute to speeding up your site.
First, try saving this code and refreshing the page. This should clear things up!
Good luck with the batch replacement work in Hidemaru Editor! Please feel free to contact us anytime.thank you for your hard work!

Senri > Awesome! thank you very much. After taking a shower, I will use the Hidemaru editor to replace the shortcodes all at once. See you soon!

That was good! Thank you very much for taking the time to test with us.

"Take a shower and refresh before replacing all at once.", that's great! If you have a clear head, Hidemaru's regular expressions should go smoothly.
If you find yourself wondering, "Hmm, how should I write this pattern in English?" during the replacement process, feel free to come back to me anytime.
I hope that the work will proceed smoothly.

Thank you very much for your hard work! Please come again anytime.

2026.05.20 Added
Regarding the setting parameters for fine-tuning the above code (speed, pitch), as a result of verification, it seems that in order to prevent the high-quality voices installed in current browsers (Google US English, Microsoft Zira, etc.) from being processed into unnatural voices, the rate/pitch change command from the browser side is completely rejected and it is fixed at 1.0 (standard).

Recommended related articles

Commuting time is to listen to English on Spotify [for beginners &...

WordPress system optimization improves the display performance of your site...

WordPress article excerpt plugin "Auto Limit..."

Shinjuku 2-chome popcorn comfort trip in Sapporo Susukino & small...

"Custom..." to display articles of multiple custom post types on a calendar

Purchased a SIM-free model of the AI ​​smartphone Galaxy S24...

Gemini監修による超軽量アクセス解析CGIプログラム(P…

DELL laptop Latitude 3510 LCD panel…