페이지에서 선택 항목을 번역하고 소리내어 읽기

업데이트: 하단에 Chrome 확장 프로그램이 있습니다.

이전의 두 게시물에서 오늘날 사용할 수 있는 매우 액세스하기 쉬운 두 가지 API를 발견했습니다.

무료 번역 Google 끝점

브라우저에서 사용할 수 있는 음성 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(" ");
}

이제 페이지에서 선택한 텍스트를 가져와야 합니다. this stackoverflow post에서 다음 항목을 복사했습니다.

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를 변경하십시오(여기에서 코드의 list 참조).

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 Extension: Flippify