ipa for google-translate

ipa-for-google-translate.js

function getIPA(str) {
    const mapping = {
        "oi": "ɔɪ",
        "ou": "aʊ",
        "ô": "ɔ",
        "ä": "ɑ",
        "a": "æ",
        "æʊ": "aʊ",
        "i": "ɪ",
        "ē": "i",
        "o͝o": "ʊ",
        "o͞o": "u",
        "e": "ɛ",
        "ā": "eɪ",
        "ī": "aɪ",
        "ō": "oʊ",
        "ō": "oʊ",
        "NG": "ŋ",
        "TH": "θ",
        "T͟H": "ð",
        "CH": "tʃ",
        "SH": "ʃ",
        "ZH": "ʒ",
        "j": "dʒ",
        "y": "j"
    }

	  let result = "";
	  let i = 0;
	  const strLength = str.length;
	
	  while (i < strLength) {
	    let foundReplacement = false;
	
	    // Check for multi-character replacements
	    for (const key in mapping) {
	      if (str.startsWith(key, i)) {
	        result += mapping[key];
	        i += key.length;
	        foundReplacement = true;
	        break;
	      }
	    }
	
	    if (!foundReplacement) {
	      result += str[i];
	      i++;
	    }
	  }
	
	  return result;
}


// Target element selectors
const targetSelectors = ['[jsname=toZopb]', '.D4w5q'];

// Function to be executed when a target element is created or its inner text changes
function onElementMutation(element) {
	const text = element.innerHTML;
    if (text.length > 0 && text.charAt(0) != '/') {
	  element.innerText = `/${getIPA(text)}/`
  }
}

// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (
      mutation.type === 'childList' ||
      (mutation.type === 'characterData' && mutation.target.parentNode)
    ) {
      // Check if the mutation matches any of the target selectors
      const matchingElements = Array.from(document.querySelectorAll(targetSelectors.join(',')))
        .filter(element => element.contains(mutation.target) || element === mutation.target);

      if (matchingElements.length > 0) {
        // Call the function for each matching element
        matchingElements.forEach(element => onElementMutation(element));
      }
    }
  }
});

// Start observing the document for mutations
observer.observe(document, { childList: true, subtree: true, characterData: true });

By default, google translate doesn't display the IPA Phonetic transcription but rather another one (i think it's NOAD, see more https://en.wikipedia.org/wiki/Pronunciation_respelling_for_English).
So, I created this script that changes it to IPA. for example it changes breathtaking ˈbreTHˌtākiNG into /ˈbrɛθˌteɪkɪŋ/
I'm not an expert developer, but it works for me. I would appreciate it if someone could improve that. Thanks

Thanks for sharing! I think this script desires a new Chrome Extension for easy install and use for language learners who want to see the IPA from the Google Translate site!

It helps me a lot, thanks!