Переведите и прочитайте вслух выделение на вашей странице

Обновление: внизу вы найдете расширение для Chrome

В двух предыдущих постах я обнаружил два очень доступных api, которые вы можете использовать в настоящее время:

  1. конечная точка google free translate здесь
  2. речевой api, доступный в браузере здесь

Давайте объединим их и создадим скрипт, который зачитает ваш выбор на другом языке. Отлично подходит для изучения языка!

Откройте консоль разработчика и скопируйте-вставьте две функции из предыдущих постов:

function speak(text, language) {
  const synth = window.speechSynthesis;
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.voice = synth
    .getVoices()
    .find(
      (voice) =>
        voice.lang.split("-")[0].toLowerCase() ===
        language.split("-")[0].toLowerCase()
    );
  synth.speak(utterance);
}

async function translate(text, source, target) {
  const response = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&hl=en-US&dt=qca&dt=t&dt=bd&dj=1&source=icon&sl=${source}&tl=${target}&q=${text}`);
  const json = await response.json();
  return json.sentences.map(x => x.trans).join(" ");
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы должны получить выделенный текст на странице. Я скопировал следующее из этого сообщения на stackoverflow

function getSelectionText() {
  var text = "";
  var activeEl = document.activeElement;
  var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
  if (
    activeElTagName == "textarea" ||
    (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type) &&
      typeof activeEl.selectionStart == "number")
  ) {
    text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
  } else if (window.getSelection) {
    text = window.getSelection().toString();
  }
  return text;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь мы можем объединить их в эту функцию. Мы хотим запускать функцию каждый раз при выделении текста на странице. Мы используем событие mouseup и проверяем, есть ли выделение. Измените targetLanguage ниже по своему усмотрению (см. список кодов здесь).

config = {
  targetLanguage: "es",
};

async function translateAndReadSelection(language) {
  const text = getSelectionText().replace(/n+/g, " ");
  if (!text) return;
  const translated = await translate(text, "auto", language);
  console.log("reading the page contents in language " + language, translated);
  speak(translated, language);
}

document.onmouseup = () =>
translateAndReadSelection(config.targetLanguage);
Вход в полноэкранный режим Выход из полноэкранного режима

Наслаждайтесь!

Вы можете найти расширение для Chrome и опробовать его здесь:
Расширение Chrome: Flippify

Оцените статью
Procodings.ru
Добавить комментарий