이 프레젠테이션: https://stupefied-curran-2254b8.netlify.com/
당신은 TLDR(너무 게으르고 읽지 않음)에 의해 온라인 글이나 유사한 웹 페이지를 읽은 적이 있습니까?
당신의 브라우저가 당신을 도와 읽을 수 있기를 바랍니다.
좋아, 너는 정말 운이 좋다!나는 웹 리더 하나를 세웠다.😆
입력에 URL이나 텍스트를 복사해서 붙여넣으면 읽을 수 있습니다!
최소 읽기 가능 섹션😅

💬 웹 음성 API

나는 본 브라우저에서 온 웹 음성 API의 음성 합성을 사용했다.
이것은 실험적인 기술이지만, 지금 당신의 브라우저에 그것이 있을 가능성이 매우 높다.
사실 Chrome 33, Firefox 49, Edge 14 이후 우리는 모두 이 기능을 가지고 있다.타마고치를 사용하지 않도록 여기를 확인하십시오🐰: caniuse Web Speech API .

음성 입력

사용자 입력에는 다음 HTML 요소가 포함됩니다.

textarea, URL/text 읽기

select 음성 입력

range 피치 및 속도 입력

textarea 내용이 일반 텍스트인지 URL인지 확인합니다.
속도(말하는 속도)는 0.5에서 2 사이이다.
음높이(소리의 높낮이) 범위는 0에서 2까지입니다.
음성 선택은 시스템에서 사용할 수 있는 음성을 제공한다.

🎤 강연 종합 음성

각 장치의 사용 가능한 음성은 다음과 같습니다.speechSynthesisInstance.getVoices() .
이것은 모든 SpeechSynthesisVoice개의 대상을 되돌려줍니다. 우리는 그것을 선택 옵션에 채웁니다.

사용자가 둘 중 하나를 선택하거나 기본값을 유지합니다.
현재 브라우저를 진정으로 말하는 사람은 SpeechSynthesisUtterance 대상이다.

🗣 강연 종합

SpeechSynthesisUtterance 대상(utterance)은 하나의 단독 음성 요청과 같다. 우리는 문자열로 그것을 초기화하고 음성, 속도, 음조 등 모든 음성 요소를 추가한다.
마지막으로 speechSynthesis.speak()을 통해 음성을 터치합니다.
또한 finishUtteranceCallback을 제공하여 텍스트가 완성될 때 재생 단추와 기타 컨트롤을 사용합니다.
이 논리는 speak(string, voice, pitch, rate, finishUtteranceCallback)에 봉인되어 있다

  speak(string, voice, pitch, rate, finishUtteranceCallback) {
    if (this.synth.speaking) {
      console.error('🗣 already speaking');
      return;
    }

    if (string) {
      const utterance = new SpeechSynthesisUtterance(string);
      utterance.onend = () => {
        console.log('utterance end');

        finishUtteranceCallback();
      };
      utterance.voice = voice;
      utterance.pitch = pitch;
      utterance.rate = rate;

      this.synth.speak(utterance);
    }
  }

이 모든 기능은 모듈화를 유지하기 위해 WebSpeechApi에 봉인되어 있다.📦
음성에 대한 자세한 내용은 MDN Speech Utterance을 참조하십시오.
이 MDN page은 아주 좋은 예가 하나 있는데, 나는 그것으로 나의 응용 프로그램을 구축했다.검사도 해주세요!

🌐 URL 확인

사용자는 textarea에 URL이나 텍스트를 입력하여 읽을 수 있습니다.
그러나 URL인지 확인하는 방법은 무엇입니까?
간단한 try-catch 하나로 이 점을 할 수 있다.

// simple check if valid URL
try {
    new URL(urlOrText);
    isUrl = true;
} catch (error) {
    // not a URL, treat as string
    isUrl = false;
}

일반 텍스트의 경우 speak()으로 직접 전달됩니다.
URL이 확실하면 페이지를 불러오고 읽을 수 있는 요소를 스크랩하기 위한 요청을 가져옵니다.

🕷️ cheerio와axios를 사용하여 웹 캡처

cheerio은 jQuery의 서브집합으로 HTML을 해석하는 데 있어서 매우 빠르고 간단하며 유연하다.
(솔직히 cheerio.load(<p>some html</p>)처럼 간단하다)axios은 API에서 내용을 가져오는 데 사용되는 약속 기반 클라이언트로 이 예에서 웹 페이지에서 완전한 HTTP get 응답을 가져옵니다.
한 마디로 하면, 이것이 바로 내가 페이지의 모든 읽을 수 있는 요소를 얻는 방식이다.

const getWebsiteTexts = siteUrl => new Promise((resolve, reject) => {
  axios
    .get(siteUrl)
    .then((result) => {
      const $ = cheerio.load(result.data);
      const contents = $('p, h1, h2, h3').contents(); // get all "readable" element contents

      const texts = contents
        .toArray()
        .map(p => p.data && p.data.trim())
        .filter(p => p);

      resolve(texts);
    })
    .catch((err) => {
      // handle err
      const errorObj = err.toJSON();
      alert(`${errorObj.message} on ${errorObj.config.url}\nPlease try a different website`);
      urlOrTextInput.value = '';
      finishUtterance();
    });
});

일부 URL에 오류가 발생했기 때문에 alert() 사용자를 포착하여 텍스트 영역을 지우고 폼 입력을 재설정합니다.
왜 일부 URL이 작동하지 않습니까?

⛔ CORS 정책

스크레이퍼는 모든 사이트를 분석할 수 없습니다.
사실 많은 사이트(매체 기사 시도)에CORS 정책이 있다.
그래서 일부 사이트에서 이런 오류가 발생할 수 있다.
CORS policy: No 'Access-Control-Allow-Origin'은 같은 출처에서만 웹 앱 스크립트에서 요청을 받을 수 있음을 나타냅니다.

은 cURL과Postman은 여전히 이 사이트에서 일할 수 있으나, 이렇게 Javascript를 사용할 수 없습니다.

이것은 우리가 읽으려고 하는 사이트의 서버에서 사용되기 때문에 우리는 다른 페이지로 돌아가는 것 외에는 아무것도 할 수 없다.😢
다음은 좋은 CORS 개요입니다.

CORS 이해

마틴 스플리트・ 2019년 11월 12일・ 7분 읽기

#cors #javascript #security #webdev

dev.to pages work though! Try it out 🎉.
Thank you dev.to for allowing us to scrape 🙏

▶️ 재생, 일시정지, 재시작

마지막으로 나는 기본적인 재생 제어를 추가했다.

다음은 paused의 현재 speechSyntesis 상태에 따라 시작하거나 복구된 재생 기능입니다.일시 중지 및 중지를 제외한 다른 컨트롤은 disabled에 불과합니다.

playButton.addEventListener('click', () => {
  if (speechApi.synth.paused) {
    speechApi.synth.resume();
  } else {
    // start from beginning
    read();
  }

  playButton.disabled = true;
  pauseButton.disabled = false;
  stopButton.disabled = false;

  rateSlider.disabled = true;
  pitchSlider.disabled = true;
  voiceSelect.disabled = true;

  urlOrTextInput.disabled = true;
});

일시 정지는 많든 적든 비슷하지만 다른 컨트롤을 사용하지 않습니다.

📦 🚤 구축 및 배포

parcel을 사용하여 설정 없는 묶음을 진행합니다. 이것은 이러한 vanilla JS 프로젝트에 있어서 매우 간단합니다.
마지막으로 Netlify는 정적 배포에 편리합니다.Netlify에서 Github repo를 설정하면 Parcel에서 구축한 dist/ 폴더만 추출됩니다.
완성!

📃 개량하다

이것은 빠른 프로젝트이기 때문에 틀림없이 약간의 개선과 수정이 필요할 것이다.
👨‍💻 코드입니다.좋은 문자를 음성 프로젝트로 시작하는 데 도움이 될 수 있는 아이디어를 불러일으키길 바랍니다.😁

론몰드 / web_리더

웹 음성 API를 사용하는 웹 리더

현장 프레젠테이션 https://stupefied-curran-2254b8.netlify.com/

개발

npm run dev

건축하다

npm run buildView on GitHub
무슨 건의, 의견과 문제가 있습니까?
(예: 문자열이 URL인지 확인하는 더 좋은 방법이 있습니다😅 )
댓글로 알려주세요!
고마워요, 즐겁게 듣고 읽어요!👂📖