Using the Web Speech API for Multilingual Translations

Home > Designing, Others > Using the Web Speech API for Multilingual Translations

Using the Web Speech API for Multilingual Translations

April 12th, 2019 admin Leave a comment Go to comments

Since the early days of science fiction, we have fantasized about machines that talk to us. Today it is commonplace. Even so, the technology for making websites talk is still pretty new.

We can make our pages on the web talk using the SpeechSynthesis part of the Web Speech API. This is still considered an experimental technology but it has great support in the latest versions of Chrome, Safari, and Firefox.

The fun part for me is using this technology with foreign languages. For that, Mac OSX has great support for this on all browsers. On Windows, you have to use Chrome. We’re going to walk through a three-step process to create a page that speaks the same text in multiple languages. Some of the basic code is derived from documentation found here but the final product adds some fun features and can be viewed at my Polyglot CodePen here.

Screen shot of the completed Polyglot app with a menu of languages.

Step 1: Start Simple

Let’s create a basic page with a </code> for the text we want the page to speak and include a button to click to trigger the speech.</p> <pre><code><div id="wrapper"> <h1>Simple Text To Speech</h1> <p id="warning">Sorry, your browser does not support the Web Speech API.</p> <textarea id="txtFld">I love the sound of my computer-generated voice.</textarea> <label for="txtFld">Type text above. Then click the Speak button.</label> <div> <button type="button" id="speakBtn">Speak</button> <br> <p>Note: For best results on a Mac, use the latest version of Chrome, Safari, or FireFox. On Windows, use Chrome.</p> </div> </div></code></pre> <p>The paragraph with ID <code>warning</code> will be shown only if the JavaScript detects no support for the Web Speech API. Also, note the ID values for the <code>textarea</code> and the <code>button</code> as we will use those in our JavaScript.</p> <p>Feel free to style the HTML any way you’d like. You’re also free to work off the demo I created:</p> <p> <span>See the Pen <a target="_blank" href="https://codepen.io/sgestrella/pen/MxJLXm/"><br /> Text-To-Speech Part 1</a> by Steven Estrella (<a target="_blank" href="https://codepen.io/sgestrella">@sgestrella</a>)<br /> on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span> </p> <p>Adding a style rule for the disabled state of the button is a good idea to avoid confusion for the few people who still use incompatible browsers, like the now-quaint Internet Explorer. Also, let’s use a style rule to hide the warning by default so we can control when it’s actually needed.</p> <pre><code>button:disabled { cursor: not-allowed; opacity: 0.3; } #warning { color: red; display: none; font-size: 1.4rem; }</code></pre> <p>Now on to the JavaScript! First, we add two variables to serve as references to the “Speak” button that triggers the speech and to the <code><textarea></code> element. An event listener at the bottom of the code tells the document to wait until the DOM elements load before calling the <code>init()</code> function. I used a handy utility function I call “qs” that is defined at the bottom of the code. It is a shortcut alternative to <code>document.querySelector</code> and it selects whatever selector value I pass to it and returns an object reference. Then we’ll add an event listener to the <code>speakBtn</code> object to make the button call the <code>talk()</code> function.</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/polyglot-02.jpg" alt=""></figure> <p>The <code>talk()</code> function creates a new instance of the <code>SpeechSynthesisUtterance</code> object that is part of the Web Speech API. It adds the text from the <code><textarea></code>(using ID <code>txtFld</code>) to the text property. Then the utterance is passed to the <code>speechSynthesis</code> method of the window object and we hear the spoken text. The specific voice you hear will vary by browser and operating system. On my Mac, for example, my default language is set to American English and the default voice for English is Alex. In Step 2, we will add code to create a menu to help the user choose voices for all available languages.</p> <pre><code>let speakBtn, txtFld; function init() { speakBtn = qs("#speakBtn"); txtFld = qs("#txtFld"); speakBtn.addEventListener("click", talk, false); if (!window.speechSynthesis) { speakBtn.disabled = true; qs("#warning").style.display = "block"; } } function talk() { let u = new SpeechSynthesisUtterance(); u.text = txtFld.value; speechSynthesis.speak(u); } // Reusable utility functions function qs(selectorText) { // Saves lots of typing for those who eschew jQuery return document.querySelector(selectorText); } document.addEventListener('DOMContentLoaded', function (e) { try {init();} catch (error) { console.log("Data didn't load", error); } });</code></pre> <h3>Step 2: A Menu of International Voices</h3> <p>If we want to use anything other than the default language and speaking voice, we will have to add a bit more code. So that’s what we’re going tackle next.</p> <p>We’re going to add a <code>select</code> element to hold the menu of voice options:</p> <pre><code><h1>Multilingual Text To Speech</h1> <div class="uiunit"> <label for="speakerMenu">Voice: </label> <select id="speakerMenu"></select> speaks <span id="language">English.</span>  </div></code></pre> <p>Before we create the code to populate the menu options, we should take care of the code that will help us connect language codes to their corresponding names. Each language is identified by a two-letter code such as “en” for English or “es” for Español (Spanish). We will take a simple list of these codes and their corresponding languages and make an array of objects of the form: <code>{"code": "pt", "name": "Portuguese"}</code>. Then we’ll need a utility function to help us search an array of objects for the value of a given property. We will use it in a few minutes to quickly find the language name that matches the language code of the selected voice. Copy the code below so that the two functions are just above and just below the <code>// Generic Utility Functions</code> comment.</p> <pre><code>function getLanguageTags() { let langs = ["ar-Arabic","cs-Czech","da-Danish","de-German","el-Greek","en-English","eo-Esperanto","es-Spanish","et-Estonian","fi-Finnish","fr-French","he-Hebrew","hi-Hindi","hu-Hungarian","id-Indonesian","it-Italian","ja-Japanese","ko-Korean","la-Latin","lt-Lithuanian","lv-Latvian","nb-Norwegian Bokmal","nl-Dutch","nn-Norwegian Nynorsk","no-Norwegian","pl-Polish","pt-Portuguese","ro-Romanian","ru-Russian","sk-Slovak","sl-Slovenian","sq-Albanian","sr-Serbian","sv-Swedish","th-Thai","tr-Turkish","zh-Chinese"]; let langobjects = []; for (let i=0;i<langs.length;i++) { let langparts = langs[i].split("-"); langobjects.push({"code":langparts[0],"name":langparts[1]}); } return langobjects; } // Generic Utility Functions function searchObjects(array, prop, term, casesensitive = false) { // Searches an array of objects for a given term in a given property // Returns an array of only those objects that test positive let regex = new RegExp(term, casesensitive ? "" : "i"); let newArrayOfObjects = array.filter(obj => regex.test(obj[prop])); return newArrayOfObjects; }</code></pre> <p>Now we can build out the options for the <code>select</code> element using JavaScript. We need to declare variables at the top of our JavaScript to hold references to the <code>#speakerMenu</code> select element, the <code>#language</code> span element, the array of synthesized voices (<code>allVoices</code>), an array of codes to identify the languages (<code>langtags</code>), and a place to keep track of the currently selected voice (<code>voiceIndex</code>). Add those just after the two variable declarations we created in Step 1.</p> <pre><code>let speakBtn, txtFld, speakerMenu, language, allVoices, langtags; let voiceIndex = 0;</code></pre> <p>The updated <code>init()</code> function sets some additional references to the <code>#speakerMenu</code> and the <code>#language</code> span and places all the language codes into an array of objects called <code>langtags</code>. The feature detection part of the code changes here, too. If the Web Speech API is supported, the <code>setUpVoices()</code> function is called. Also, for Chrome, we have to listen for changes to the loaded voices and repeat the setup when needed. Chrome polls the available voices every time you switch between one of its remote voices (the ones listed with the Google prefix while you are in Chrome) and all the other voices which are stored locally in the user’s operating system.</p> <pre><code>function init() { speakBtn = qs("#speakBtn"); txtFld = qs("#txtFld"); speakerMenu = qs("#speakerMenu"); language = qs("#language"); langtags = getLanguageTags(); speakBtn.addEventListener("click", talk, false); speakerMenu.addEventListener("change", selectSpeaker, false); if (window.speechSynthesis) { if (speechSynthesis.onvoiceschanged !== undefined) { // Chrome gets the voices asynchronously so this is needed speechSynthesis.onvoiceschanged = setUpVoices; } setUpVoices(); // For all the other browsers } else{ speakBtn.disabled = true; speakerMenu.disabled = true; qs("#warning").style.display = "block"; } }</code></pre> <p>The <code>setUpVoices()</code> function gets an array of what are called <code>SpeechSynthesisVoice</code> objects by calling the <code>getVoices()</code> method of the <code>speechSynthesis</code> object. This is done in our code using the <code>getAllVoices()</code> function. Unfortunately, I have found that the <code>speechSynthesis.getVoices()</code> method sometimes returns duplicates in the list, so I devoted nine lines of code to eliminate the those. Finally, at the end of <code>getAllVoices()</code>, I added a unique identifier number to each of the <code>SpeechSynthesisVoice</code> objects. That will help us in Step 3 when we need to filter the list of voices to only show voices for a given language. When complete, the <code>allVoices</code> array will contain objects that look like the ones below. Each object has <code>id</code>, <code>voiceURI</code>, <code>name</code>, and <code>lang</code> attributes. The <code>localService</code> attribute indicates whether the code for the voice is stored on the user’s computer or remotely on Google’s servers. Notice the <code>lang</code> attribute. The value consists of a two-letter language code (e.g. “es” for Spanish) followed by a dash and a region code (e.g. “MX” for Mexico). This identifies the language and regional accent of each voice.</p> <pre><code>{id:48, voiceURI:"Paulina", name:"Paulina", lang: "es-MX", localService:true}, {id:52, voiceURI:"Samantha", name:"Samantha", lang: "en-US", localService:true}, {id:72, voiceURI:"Google Deutsch", name:"Google Deutsch", lang: "de-DE", localService:false}</code></pre> <p>The last line of <code>setUpVoices()</code> calls a function to create the list of options that will appear in the <code>#speakerMenu</code> select element. The value of the <code>id</code> attribute for each voice is placed in the <code>value</code> attribute for the option. The <code>name</code> and <code>lang</code> attributes are the visible text items that appear in each option along with “(premium)” for those voices that are marked that way on some operating systems and browsers.</p> <pre><code>function setUpVoices() { allVoices = getAllVoices(); createSpeakerMenu(allVoices); } function getAllVoices() { let voicesall = speechSynthesis.getVoices(); let vuris = []; let voices = []; voicesall.forEach(function(obj,index) { let uri = obj.voiceURI; if (!vuris.includes(uri)) { vuris.push(uri); voices.push(obj); } }); voices.forEach(function(obj,index) {obj.id = index;}); return voices; } function createSpeakerMenu(voices) { let code = ; voices.forEach(function(vobj,i) { code += `<option value=${vobj.id}>`; code += `${vobj.name} (${vobj.lang})`; code += vobj.voiceURI.includes(".premium") ? ' (premium)' : ; code += `</option>`; }); speakerMenu.innerHTML = code; speakerMenu.selectedIndex = voiceIndex; }</code></pre> <p>You might recall that in the <code>init()</code> function, we had set up an event listener to call <code>selectSpeaker()</code> whenever the <code>speakerMenu</code> changes. The <code>selectSpeaker()</code> function stores the <code>selectedIndex</code> of the <code>#speakerMenu</code> select element. Next, it gets the value of the selected item which will be an integer that corresponds to the index of that voice in the <code>allVoices()</code> array. So, now we have retrieved the <code>SpeechSynthesisVoice</code> we want. We then grab the first two letters of the <code>lang</code> attribute (e.g. “en,” “es,” “ru,” “de,” “fr”) and use that code to search the <code>langtags</code> array of language objects to find the appropriate language name. The <code>searchObjects()</code> function returns an array that will likely have only one entry. Regardless, the first entry (<code>langcodeobj[0]</code>) is all we need. Finally, we assign that name to the <code>innerHTML</code> attribute of the <code>language</code> <code>span</code> and it shows on the screen as expected.</p> <pre><code>// Code for when the user selects a speaker function selectSpeaker() { voiceIndex = speakerMenu.selectedIndex; let sval = Number(speakerMenu.value); let voice = allVoices[sval]; let langcode = voice.lang.substring(0,2); let langcodeobj = searchObjects(langtags, "code", langcode); language.innerHTML = langcodeobj[0].name; }</code></pre> <p>The only thing left for Step 2 to be complete is to make sure the <code>talk()</code> function works when we click the “Speak” button. Modify the <code>talk()</code> function to add attributes to the utterance to control which voice and language are used and how fast to speak the text. In my testing, a rate range of 0.5 to 2 works reliably well. I found that a rate below 0.5 has no effect. I think 0.8 works as a nice default for many languages, but as we’ll see in Step 3, there’s an easy way to let the user decide.</p> <pre><code>function talk() { let sval = Number(speakerMenu.value); let u = new SpeechSynthesisUtterance(); u.voice = allVoices[sval]; u.lang = u.voice.lang; u.text = txtFld.value; u.rate = 0.8; speechSynthesis.speak(u); }</code></pre> <p>That’s it for Step 2! Here’s the result of what we’ve done so far:</p> <p> <span>See the Pen <a target="_blank" href="https://codepen.io/sgestrella/pen/KEWyER/"><br /> Text-To-Speech Part 2</a> by Steven Estrella (<a target="_blank" href="https://codepen.io/sgestrella">@sgestrella</a>)<br /> on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span> </p> <p>Play around with it a bit. Sometimes it is fun to type an English phrase and then assign a French or German speaker to say it. Conversely, if you want to hear your worst first-year Spanish student, type a Spanish phrase and assign it to be spoken by an English voice.</p> <h3>Step 3: The Complete Polyglot</h3> <p>We’re in the final stretch! Some of the things we do in this step will be bits of polish to the <abbr title="User Interface">UI</abbr> but there are some functional things we need to do as well to button everything up. specifically, we’re going to:</p> <ul> <li>Create a menu of available language options</li> <li>Allow users to define the speed of the speech</li> <li>Define a default phrase in the textarea that translates on language selection</li> </ul> <p>Here’s what we’re looking at:</p> <figure><img decoding="async" src="https://css-tricks.com/wp-content/uploads/2019/04/polyglot-03.jpg" alt=""><figcaption>We’re adding a dropdown menu, speech rate setting, and a default phrase.</figcaption></figure> <p>In the HTML, we’re going to add a new <code></code> element for the language menu and a number <code>input</code> (which will be used later to set the rate of speech). Notice we have deleted the <code>#language</code> span as it is no longer relevant once the language menu is working.</p> <pre><code><div class="uiunit"> <label for="languageMenu">Language: </label> <select id="languageMenu"> <option selected value="all">Show All</option> </select> </div> <div class="uiunit"> <label for="speakerMenu">Voice: </label><select id="speakerMenu"></select> </div> <div class="uiunit"> <label for="rateFld">Speed: </label> <input type="number" id="rateFld" min="0.5" max="2" step="0.1" value="0.8" /> </div></code></pre> <p>In the JavaScript, we will need to modify the variable declarations. We will keep track of all dialects in the <code>allLanguages</code> array and just the main languages in the <code>primaryLanguages</code> array. The <code>langhash</code> and <code>langcodehash</code> arrays will serve as hash tables so we can quickly get a language name when all we know is the two-letter language code and vice versa. We should only need to setup the languages menu once so a Boolean flag for <code>initialSetup</code> will come in handy.</p> <pre><code>let speakBtn, txtFld, speakerMenu, allVoices, langtags; let voiceIndex = 0; let allLanguages, primaryLanguages, langhash, langcodehash; let rateFld, languageMenu, blurbs; let initialSetup = true; let defaultBlurb = "I enjoy the traditional music of my native country.";</code></pre> <p>In the new <code>init()</code> function, let’s remove the line <code>language = qs("#language");</code> then add the new code as seen here to create the blurbs, reference the <code>rateFld</code> number <code>input</code> and <code>languageMenu</code> <code>select</code>, and create hash tables for looking up language names and tags.</p> <pre><code>function init() { // ...keep existing content but delete language = qs("#language"); createBlurbs(); rateFld = qs("#rateFld"); languageMenu = qs("#languageMenu"); languageMenu.addEventListener("change", selectLanguage, false); langhash = getLookupTable(langtags, "name"); langcodehash = getLookupTable(langtags, "code"); if (window.speechSynthesis) { // ...keep existing content } else{ // ...keep existing content languageMenu.disabled = true; } }</code></pre> <p>The <code>setUpVoices()</code> function needs some work to accommodate the new languages menu and to trigger the <code>filterVoices()</code> function which we will use now to populate the <code>#speakerMenu</code> element. Also, we’re going to add the new functions: <code>getAllLanguages()</code> and <code>getPrimaryLanguages()</code>. The first one assembles an array of the unique values for the <code>lang</code> attribute found in the <code>allVoices</code> array of objects. Notice the return statement uses the spread operator combined with a new <code>Set</code> object to ensure that the returned array has no duplicates. The <code>getPrimaryLanguages()</code> function returns an array of the two-letter country codes. That makes a smaller list of just the main languages without reference to regional dialects.</p> <pre><code>function setUpVoices() { allVoices = getAllVoices(); allLanguages = getAllLanguages(allVoices); primaryLanguages = getPrimaryLanguages(allLanguages); filterVoices(); if (initialSetup && allVoices.length) { initialSetup = false; createLanguageMenu(); } } function getAllLanguages(voices) { let langs = []; voices.forEach(vobj => { langs.push(vobj.lang.trim()); }); return [...new Set(langs)]; } function getPrimaryLanguages(langlist) { let langs = []; langlist.forEach(vobj => { langs.push(vobj.substring(0,2)); }); return [...new Set(langs)]; }</code></pre> <p>The <code>setUpVoices()</code> function calls two additional functions. The <code>filterVoices()</code> function gets the two-letter language code from the current value of the <code>#languageMenu</code> select menu and uses it to filter the <code>allVoices</code> array and return only the available voice options for the chosen language. It then passes that array to the <code>createSpeakerMenu()</code> function (unchanged from Step 2) which populates the <code>#speakerMenu</code> with options. Then <code>filterVoices()</code> gets the blurb associated with the chosen language and places it in the textarea where it can be edited or replaced.</p> <p>And, in case Chrome rebuilds this menu, the stored <code>voiceIndex</code> is used to restore the current selection. Next the <code>createLanguageMenu()</code> function uses our hash tables to create the needed menu options for the <code>languageMenu</code> <code>select</code> element. The <code>selectLanguage()</code> function is triggered whenever the user chooses a language. It then triggers <code>filterVoices()</code> and sets the <code>#speakerMenu</code> to display the first available option.</p> <pre><code>function filterVoices() { let langcode = languageMenu.value; voices = allVoices.filter(function (voice) { return langcode === "all" ? true : voice.lang.indexOf(langcode + "-") >= 0; }); createSpeakerMenu(voices); let t = blurbs[languageMenu.options[languageMenu.selectedIndex].text]; txtFld.value = t ? t : defaultBlurb; speakerMenu.selectedIndex = voiceIndex; } function createLanguageMenu() { let code = `<option selected value="all">Show All</option>`; let langnames = []; primaryLanguages.forEach(function(lobj,i) { langnames.push(langcodehash[lobj.substring(0,2)].name); }); langnames.sort(); langnames.forEach(function(lname,i) { let lcode = langhash[lname].code; code += `<option value=${lcode}>${lname}</option>`; }); languageMenu.innerHTML = code; } function selectLanguage() { filterVoices(); speakerMenu.selectedIndex = 0; }</code></pre> <p>In the utility functions section of the code toward the bottom, add the following code. This generic little utility will help you the next time you need to create a lookup table for an array of objects. In our case, we will use this to allow us to easily match a language code with its corresponding language name and vice versa.</p> <pre><code>function getLookupTable(objectsArray, propname) { return objectsArray.reduce((accumulator, currentValue) => (accumulator[currentValue[propname]] = currentValue, accumulator),{}); }</code></pre> <p>I added an array of text phrases, each of which is a translation of the English phrase, “I enjoy the traditional music of my native country.” The language it’s displayed in will correspond to what’s selected in the language men.</p> <p>Here we see the beauty of UTF-8 on full display. Above the <code>getLanguagesTags()</code> function, let’s add the code that generates all those translated blurbs. I only read Spanish, English, some Portuguese, and very little German, so I have to take on faith that Google Translate is providing accurate translations for the rest. If any of these is your native language, feel free to leave corrections in the comments.</p> <pre><code>function createBlurbs() { blurbs = { "Arabic" : "أنا أستمتع بالموسيقى التقليدية لبلدي الأم.", "Chinese" : "我喜歡我祖國的傳統音樂。", "Czech" : "Mám rád tradiční hudbu mé rodné země.", "Danish" : "Jeg nyder den traditionelle musik i mit hjemland.", "Dutch" : "Ik geniet van de traditionele muziek van mijn geboorteland.", "English" : "I enjoy the traditional music of my native country.", "Finnish" : "Nautin kotimaassani perinteistä musiikkia.", "French" : "J'apprécie la musique traditionnelle de mon pays d'origine.", "German" : "Ich genieße die traditionelle Musik meiner Heimat.", "Greek" : "Απολαμβάνω την παραδοσιακή μουσική της πατρίδας μου.", "Hebrew" : "אני נהנה מהמוסיקה המסורתית של מולדתי.", "Hindi" : "मैं अपने मूल देश के पारंपरिक संगीत का आनंद लेता हूं।", "Hungarian" : "Élvezem az én hazám hagyományos zenéjét.", "Indonesian" : "Saya menikmati musik tradisional negara asal saya.", "Italian" : "Mi piace la musica tradizionale del mio paese natale.", "Japanese" : "私は母国の伝統音楽を楽しんでいます。", "Korean" : "나는 내 조국의 전통 음악을 즐긴다.", "Norwegian Bokmal" : "Jeg liker den tradisjonelle musikken i mitt hjemland.", "Polish" : "Lubię tradycyjną muzykę mojego kraju.", "Portuguese" : "Eu gosto da música tradicional do meu país natal.", "Romanian" : "Îmi place muzica tradițională din țara mea natală.", "Russian" : "Мне нравится традиционная музыка моей родной страны.", "Slovak" : "Mám rád tradičnú hudbu svojej rodnej krajiny.", "Spanish" : "Disfruto de la música tradicional de mi país natal.", "Swedish" : "Jag njuter av traditionell musik i mitt hemland.", "Thai" : "ฉันเพลิดเพลินกับดนตรีดั้งเดิมของประเทศบ้านเกิดของฉัน", "Turkish" : "Ülkemdeki geleneksel müzikten zevk alıyorum." }; }</code></pre> <p>There’s one last thing: the numeric input for controlling the playback speed of the speech. Modify the <code>talk()</code> function to get the speech rate from the number input and we’re good to go!</p> <p>Here’s the final product:</p> <pre><code>function talk() { ...// no changes except for the rateFld.value reference u.rate = Number(rateFld.value); speechSynthesis.speak(u); }</code></pre> <p> <span>See the Pen <a target="_blank" href="https://codepen.io/sgestrella/pen/QodzgY/"><br /> Polyglot: Text-To-Speech in Multiple Languages</a> by Steven Estrella (<a target="_blank" href="https://codepen.io/sgestrella">@sgestrella</a>)<br /> on <a target="_blank" href="https://codepen.io/">CodePen</a>.</span> </p> <h3>A Real World Application</h3> <p>My interest in this technology started many years ago in 1990 when I created a 26-lesson curriculum as part of my dissertation. It was delivered using my first programming language, HyperCard, on a Macintosh Plus which had a primitive text-to-speech feature. I used that feature to provide some feedback to the user while they progressed through the material. More recently, in 2018, I created a free progressive web app called <a target="_blank" href="https://buenosverbos.com/">Buenos Verbos</a> that helps Spanish language students search and filter a database of 766 verbs. The chosen verb is then fully conjugated and the user can click the forms to hear them spoken. So perhaps web pages might like to talk and with some imagination you may find reasons to encourage them. The question is: <em>what will you make your website say next?</em></p> <p>The post <a target="_blank" rel="nofollow" href="https://css-tricks.com/using-the-web-speech-api-for-multilingual-translations/">Using the Web Speech API for Multilingual Translations</a> appeared first on <a target="_blank" rel="nofollow" href="https://css-tricks.com/">CSS-Tricks</a>.</p> <div class="fixed"></div> </div> <div class="under"> <span class="categories">Categories: </span><span><a href="http://www.webmastersgallery.com/category/design/" rel="category tag">Designing</a>, <a href="http://www.webmastersgallery.com/category/uncategorized/" rel="category tag">Others</a></span> <span class="tags">Tags: </span><span></span> </div> </div>   <script type="text/javascript" src="http://www.webmastersgallery.com/wp-content/themes/inove/js/comment.js"></script> <div id="comments"> <div id="cmtswitcher"> <a id="commenttab" class="curtab" href="javascript:void(0);" onclick="MGJS.switchTab('thecomments,commentnavi', 'thetrackbacks', 'commenttab', 'curtab', 'trackbacktab', 'tab');">Comments (0)</a> <a id="trackbacktab" class="tab" href="javascript:void(0);" onclick="MGJS.switchTab('thetrackbacks', 'thecomments,commentnavi', 'trackbacktab', 'curtab', 'commenttab', 'tab');">Trackbacks (0)</a> <span class="addcomment"><a href="#respond">Leave a comment</a></span> <span class="addtrackback"><a href="http://www.webmastersgallery.com/2019/04/12/using-the-web-speech-api-for-multilingual-translations/trackback/">Trackback</a></span> <div class="fixed"></div> </div> <div id="commentlist">  <ol id="thecomments"> <li class="messagebox"> No comments yet. </li> </ol>   <ol id="thetrackbacks"> <li class="messagebox"> No trackbacks yet. </li> </ol> <div class="fixed"></div>  </div> </div> <div id="comment_login" class="messagebox"> You must be <a href="http://www.webmastersgallery.com/wp-login.php">logged in</a> to post a comment. </div> <div id="postnavi"> <span class="prev"><a href="http://www.webmastersgallery.com/2019/04/12/brand-branding-and-brand-identity-what-does-it-all-mean/" rel="next">Brand, branding and brand identity: what does it all mean?</a></span> <span class="next"><a href="http://www.webmastersgallery.com/2019/04/12/inline-svg-cached/" rel="prev">Inline SVG… Cached</a></span> <div class="fixed"></div> </div> </div>   <div id="sidebar">  <div id="northsidebar" class="sidebar">  <div class="widget widget_feeds"> <div class="content"> <div id="subscribe"> <a rel="external nofollow" id="feedrss" title="Subscribe to this blog..." href="http://www.webmastersgallery.com/feed/"><abbr title="Really Simple Syndication">RSS</abbr></a> </div> <div class="fixed"></div> </div> </div>  <div id="text-389627311" class="widget widget_text"> <div class="textwidget"><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="border:0"/></a><a href="http://feeds2.feedburner.com/webmastersgallery" title="Subscribe to my feed" rel="alternate" type="application/rss+xml">Subscribe for latest Updates</a></div> </div><div id="text-389629461" class="widget widget_text"> <div class="textwidget"><form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=webmastersgallery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="webmastersgallery" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank" rel="noopener">FeedBurner</a></p></form></div> </div></div>  <div id="centersidebar">  <div id="eastsidebar" class="sidebar">  <div class="widget widget_categories"> <h3>Categories</h3> <ul> <li class="cat-item cat-item-518"><a href="http://www.webmastersgallery.com/category/affiliate-programs/">Affiliate Programs</a> </li> <li class="cat-item cat-item-147"><a href="http://www.webmastersgallery.com/category/design/">Designing</a> </li> <li class="cat-item cat-item-519"><a href="http://www.webmastersgallery.com/category/domain-names/">Domain Names</a> </li> <li class="cat-item cat-item-37"><a href="http://www.webmastersgallery.com/category/e-commerce/">E-commerce</a> </li> <li class="cat-item cat-item-509"><a href="http://www.webmastersgallery.com/category/internet-directories/">Internet Directories</a> </li> <li class="cat-item cat-item-510"><a href="http://www.webmastersgallery.com/category/message-boards/">Message Boards</a> </li> <li class="cat-item cat-item-1"><a href="http://www.webmastersgallery.com/category/uncategorized/">Others</a> </li> <li class="cat-item cat-item-506"><a href="http://www.webmastersgallery.com/category/programming/">Programming</a> </li> <li class="cat-item cat-item-511"><a href="http://www.webmastersgallery.com/category/promotion-and-marketing/">Promotion and Marketing</a> </li> <li class="cat-item cat-item-534"><a href="http://www.webmastersgallery.com/category/scripts-and-programming/">Scripts and Programming</a> </li> <li class="cat-item cat-item-513"><a href="http://www.webmastersgallery.com/category/search-engines/">Search Engines</a> </li> <li class="cat-item cat-item-135"><a href="http://www.webmastersgallery.com/category/social-media/">Social Media</a> </li> <li class="cat-item cat-item-514"><a href="http://www.webmastersgallery.com/category/softwares/">Softwares</a> </li> <li class="cat-item cat-item-515"><a href="http://www.webmastersgallery.com/category/tips-and-tutorials/">Tips and Tutorials</a> </li> <li class="cat-item cat-item-338"><a href="http://www.webmastersgallery.com/category/web-hosting/">Web Hosting</a> </li> <li class="cat-item cat-item-516"><a href="http://www.webmastersgallery.com/category/webmaster-tools/">Webmaster Tools</a> </li> <li class="cat-item cat-item-501"><a href="http://www.webmastersgallery.com/category/webmaster-resources/">Webmasters Resources</a> </li> <li class="cat-item cat-item-3"><a href="http://www.webmastersgallery.com/category/web-design/">Website Design</a> </li> </ul> </div> </div>   <div id="westsidebar" class="sidebar">  <div class="widget widget_links"> <h3>Blogroll</h3> <ul> <li><a href="http://wordpress.org/development/">Development Blog</a></li> <li><a href="http://codex.wordpress.org/">Documentation</a></li> <li><a href="http://wordpress.org/extend/plugins/">Plugins</a></li> <li><a href="http://wordpress.org/extend/ideas/">Suggest Ideas</a></li> <li><a href="http://wordpress.org/support/">Support Forum</a></li> <li><a href="http://wordpress.org/extend/themes/">Themes</a></li> <li><a href="http://planet.wordpress.org/">WordPress Planet</a></li> </ul> </div> </div>  <div class="fixed"></div> </div>  <div id="southsidebar" class="sidebar">  <div class="widget"> <h3>Archives</h3> <ul> <li><a href='http://www.webmastersgallery.com/2024/04/'>April 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/03/'>March 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/02/'>February 2024</a></li> <li><a href='http://www.webmastersgallery.com/2024/01/'>January 2024</a></li> <li><a href='http://www.webmastersgallery.com/2023/12/'>December 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/11/'>November 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/10/'>October 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/09/'>September 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/08/'>August 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/07/'>July 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/06/'>June 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/05/'>May 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/04/'>April 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/03/'>March 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/02/'>February 2023</a></li> <li><a href='http://www.webmastersgallery.com/2023/01/'>January 2023</a></li> <li><a href='http://www.webmastersgallery.com/2022/12/'>December 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/11/'>November 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/10/'>October 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/09/'>September 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/08/'>August 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/07/'>July 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/06/'>June 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/05/'>May 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/04/'>April 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/03/'>March 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/02/'>February 2022</a></li> <li><a href='http://www.webmastersgallery.com/2022/01/'>January 2022</a></li> <li><a href='http://www.webmastersgallery.com/2021/12/'>December 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/11/'>November 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/10/'>October 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/09/'>September 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/08/'>August 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/07/'>July 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/06/'>June 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/05/'>May 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/04/'>April 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/03/'>March 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/02/'>February 2021</a></li> <li><a href='http://www.webmastersgallery.com/2021/01/'>January 2021</a></li> <li><a href='http://www.webmastersgallery.com/2020/12/'>December 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/11/'>November 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/10/'>October 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/09/'>September 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/08/'>August 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/07/'>July 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/06/'>June 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/05/'>May 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/04/'>April 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/03/'>March 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/02/'>February 2020</a></li> <li><a href='http://www.webmastersgallery.com/2020/01/'>January 2020</a></li> <li><a href='http://www.webmastersgallery.com/2019/12/'>December 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/11/'>November 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/10/'>October 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/09/'>September 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/08/'>August 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/07/'>July 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/06/'>June 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/05/'>May 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/04/'>April 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/03/'>March 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/02/'>February 2019</a></li> <li><a href='http://www.webmastersgallery.com/2019/01/'>January 2019</a></li> <li><a href='http://www.webmastersgallery.com/2018/12/'>December 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/11/'>November 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/10/'>October 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/09/'>September 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/08/'>August 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/07/'>July 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/04/'>April 2018</a></li> <li><a href='http://www.webmastersgallery.com/2018/01/'>January 2018</a></li> <li><a href='http://www.webmastersgallery.com/2017/12/'>December 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/11/'>November 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/09/'>September 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/08/'>August 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/07/'>July 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/06/'>June 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/05/'>May 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/04/'>April 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/03/'>March 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/02/'>February 2017</a></li> <li><a href='http://www.webmastersgallery.com/2017/01/'>January 2017</a></li> <li><a href='http://www.webmastersgallery.com/2016/12/'>December 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/11/'>November 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/10/'>October 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/09/'>September 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/08/'>August 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/07/'>July 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/06/'>June 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/05/'>May 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/04/'>April 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/03/'>March 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/02/'>February 2016</a></li> <li><a href='http://www.webmastersgallery.com/2016/01/'>January 2016</a></li> <li><a href='http://www.webmastersgallery.com/2015/12/'>December 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/11/'>November 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/10/'>October 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/09/'>September 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/08/'>August 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/07/'>July 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/06/'>June 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/05/'>May 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/04/'>April 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/03/'>March 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/02/'>February 2015</a></li> <li><a href='http://www.webmastersgallery.com/2015/01/'>January 2015</a></li> <li><a href='http://www.webmastersgallery.com/2014/12/'>December 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/11/'>November 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/10/'>October 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/09/'>September 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/08/'>August 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/07/'>July 2014</a></li> <li><a href='http://www.webmastersgallery.com/2014/06/'>June 2014</a></li> <li><a href='http://www.webmastersgallery.com/2013/07/'>July 2013</a></li> <li><a href='http://www.webmastersgallery.com/2013/01/'>January 2013</a></li> <li><a href='http://www.webmastersgallery.com/2012/12/'>December 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/08/'>August 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/07/'>July 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/06/'>June 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/05/'>May 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/04/'>April 2012</a></li> <li><a href='http://www.webmastersgallery.com/2012/01/'>January 2012</a></li> <li><a href='http://www.webmastersgallery.com/2011/11/'>November 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/06/'>June 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/03/'>March 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/02/'>February 2011</a></li> <li><a href='http://www.webmastersgallery.com/2011/01/'>January 2011</a></li> <li><a href='http://www.webmastersgallery.com/2010/12/'>December 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/11/'>November 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/09/'>September 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/07/'>July 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/06/'>June 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/05/'>May 2010</a></li> <li><a href='http://www.webmastersgallery.com/2010/02/'>February 2010</a></li> <li><a href='http://www.webmastersgallery.com/2009/12/'>December 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/08/'>August 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/07/'>July 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/06/'>June 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/05/'>May 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/04/'>April 2009</a></li> <li><a href='http://www.webmastersgallery.com/2009/03/'>March 2009</a></li> </ul> </div>  <div class="widget"> <h3>Meta</h3> <ul> <li><a href="http://www.webmastersgallery.com/wp-login.php">Log in</a></li> </ul> </div> </div>  </div>  <div class="fixed"></div> </div>   <div id="footer"> <a id="gotop" href="#" onclick="MGJS.goTop();return false;">Top</a> <a id="powered" href="http://wordpress.org/">WordPress</a> <div id="copyright"> Copyright © 2009-2024 Webmasters Gallery </div> <div id="themeinfo"> Theme by <a href="http://www.neoease.com/">NeoEase</a>. Valid <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS 3</a>. </div> </div>  </div>  </div>  </body> </html>