텍스트 음성 변환 크롬 확장을 만듭니다

코어 포인트

이 기사에서는 HTML5 음성 합성 API 또는 타사 API를 사용하여 강조 표시된 텍스트 또는 클립 보드 컨텐츠를 음성으로 변환하는 Chrome 브라우저 텍스트 음성 (TTS) 확장자를 만드는 방법을 설명합니다. Chrome Extensions에는 일반적으로 매니페스트 파일 (메타 데이터 파일), 이미지 (확장 아이콘), HTML 파일, JavaScript 파일 및 기타 리소스 (예 : 스타일 시트)가 포함됩니다.

tts Extension은 사용자가 아이콘을 클릭하거나 특정 핫키 (Shift Y)를 누른 다음 강조 표시된 텍스트 또는 클립 보드 내용을 음성으로 변환 할 수 있습니다.

확장 코드에는 배경 스크립트 및 컨텐츠 스크립트, 활성 태그 및 사용자 클립 보드에 액세스하는 권한, 강조 표시된 텍스트 또는 클립 보드 컨텐츠를 확인하고 확장자 초기화, 핫키 추가 및 텍스트를 음성 메소드로 변환하는 것이 포함됩니다.

HTML5 음성 합성 API를 사용할 수없는 경우, 확장자는 음성 RSS와 같은 타사 API를 사용하여 텍스트를 음성으로 변환합니다. 이 확장에는 크롬이 200-300 단어 후에 발음을 중지하는 문제를 해결하기위한 버그 수정이 포함되어 있습니다.

이 기사는 Marc Towler가 동료 검토했습니다. Sitepoint의 내용을 완벽하게 만들기 위해 Sitepoint의 모든 동료 검토 자에게 감사합니다! 연설 (음성 합성 또는 TTS라고도 함)은 인간 연설을 인위적으로 생성하는 방법입니다. Wikipedia에 따르면, 사람들은 적어도 천년 이상 인간의 목소리를 생성 할 수있는 기계를 만들려고 노력했다고한다. tts는 오늘날 우리 삶에서 점점 더 흔해지고 있으며 모두가 그 혜택을 누릴 수 있습니다. 우리는 텍스트를 음성으로 변환하는 크롬 확장을 만들어이를 입증 할 것입니다. HTML5는 우리에게 음성 합성 API를 제공하여 모든 웹 애플리케이션이 임의의 텍스트 문자열을 음성으로 변환하고 무료로 사용자에게 플레이 할 수 있도록합니다.

크롬 확장자는 일반적으로 다음을 포함합니다

재능 파일 (메타 데이터를 포함하는 필수 파일) 이미지 (예 : 확장자 아이콘) html 파일 (예 : 사용자가 확장자 아이콘을 클릭 할 때 나타나는 팝업 창) 하 응용 프로그램에서 사용할 수있는 기타 리소스 (예 : 스타일 시트) 음성 확장 페이지 크롬의 인기와 TTS의 상승으로 인해 텍스트를 음성으로 변환하는 크롬 확장을 만들 것입니다. 확장자는 사용자가 아이콘을 클릭하거나 특수 핫키 (Shift Y)를 누른 다음 현재보고있는 페이지에서 사용자가 강조 표시하는 내용을 찾거나 클립 보드에 복사 된 내용을 찾으려고 기다립니다. 무엇인가가 발견되면 먼저 HTML5 Speech Synthesis API를 사용하여 음성으로 변환하려고 시도하며, 해당 API를 사용할 수없는 경우 타사 API를 호출합니다. 크롬 확장의 기본 각 크롬 확장에는 Manifest.json이라는 파일이 필요합니다. Manifest는 확장자 이름, 설명, 아이콘 및 저자에서 확장자의 요구 사항을 정의하는 데이터에 이르기까지 응용 프로그램에 중요한 데이터를 포함하는 JSON 파일입니다. 사용자가 특정 웹 사이트를 탐색 할 때 사용자가 부여 해야하는 권한)

우리의 목록은 확장자의 이름, 설명, 저자, 버전 및 아이콘으로 시작합니다. 아이콘 객체에서 크기가 다른 많은 아이콘을 제공 할 수 있습니다.

그런 다음 배경 객체에서 background.min.js라는 배경 스크립트를 정의합니다 (최소화 파일을 사용하고 있음). 배경 스크립트는 사용자의 브라우저가 닫히거나 확장이 비활성화 될 때까지 계속 실행되는 장기 실행 스크립트입니다.

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

후에 우리는 Chrome에게 WildCards "

http : //*/*"및 "https : //*/*" "및"로 인해 각 웹 사이트 요청에 두 개의 JavaScript 파일을로드하도록 지시하는 Content_Scriptts 배열이 있습니다. https://*/*"" . 배경 스크립트와 달리 콘텐츠 스크립트는 사용자가 방문하는 실제 웹 사이트의 DOM에 액세스 할 수 있습니다. 컨텐츠 스크립트는 내장 된 웹 페이지의 DOM을 읽고 수정할 수 있습니다. 따라서 polyfill.min.js 및 ext.min.js는 각 웹 페이지의 모든 데이터를 읽고 수정할 수 있습니다.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

기다려! 또한 현재 사용자가 열고있는 웹 페이지 (활동 태그) 만 액세스하도록 요청하는 권한이라는 배열도 있습니다. 또한 ClipboardRead라는 또 다른 권한을 요청하여 사용자의 클립 보드를 읽을 수 있습니다 (따라서 내용을 음성으로 변환 할 수 있음).

크롬 확장자를 음성으로하는 페이지 쓰기 먼저, 우리는 사용자가 확장자의 아이콘을 클릭 할 때 발사 될 이벤트 리스너를 연결하는 유일한 배경 스크립트를 만듭니다. 이 경우 chrome.tabs.sendmessage (tabid, message, 콜백) 메소드를 사용하는 SendMessage 함수를 호출하여 컨텐츠 스크립트에 메시지를 보냅니다 (컨텐츠 스크립트는 DOM을 읽고 사용자가 강조 표시 할 수 있습니다. 클립 보드의 사용자가 배치하는 내용 및/또는 콘텐츠). Chrome.tabs.query 메소드를 사용하여 현재 열린 탭 페이지로 메시지를 보내는 메시지입니다. 이것이 우리가 관심있는 것과 액세스 할 수있는 것이기 때문에 메소드의 매개 변수에는 다음을 사용할 콜백 함수가 포함됩니다. : 매개 변수 호출을 일치하는 탭 페이지에 대한 쿼리. 이제, 더 많은 장점은 우리의 내용 스크립트입니다. 확장과 관련된 일부 데이터를 보유 할 객체를 작성한 다음 초기화 방법을 정의합니다.

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

이 메소드는 사용자가 클립 보드에 텍스트로 강조 표시되어 있지 않은지 여부를 확인 하고이 경우에만 반환됩니다. 그렇지 않으면 HTML5 음성 합성 API를 사용하여 음성을 생성하려고합니다. 이것이 실패하면 결국 타사 API를 사용하려고합니다.

텍스트를 확인하는 방법은 몇 가지 작업을 수행합니다. 내장 GetSelection () 메소드를 사용하여 강조 표시된 텍스트가 포함 된 객체를 가져 와서 toString ()을 사용하여 텍스트 문자열로 변환하려고합니다. 그런 다음 텍스트가 강조 표시되지 않으면 사용자 클립 보드에서 텍스트를 찾으려고합니다. 입력 요소를 페이지에 추가하고 초점을 맞추고 Execcommand ( 'Paste')로 페이스트 이벤트를 트리거 한 다음 속성에 해당 입력에 붙여 넣은 텍스트를 저장하여이를 수행합니다. 그런 다음 입력을 지 웁니다. 두 경우 모두 찾은 것을 반환합니다.

사용자가 Hotkeys (하드 코딩 y로 하드 코딩)를 사용하여 텍스트 음성 변환을 실행할 수 있도록 배열을 초기화하고 OnkeyDown 및 OnKeyUp 이벤트에 대한 이벤트 리스너를 설정합니다. 리스너에서, 우리는 프레스의 키 코드에 해당하는 인덱스를 저장하는데, 이는 e.gype 이벤트 유형 및 키 다운의 비교 결과에서 파생되며 부울 값입니다. 따라서 키를 누르면 해당 키 인덱스의 값이 true로 설정되고 키가 릴리스 될 때마다 인덱스 값이 False로 변경됩니다. 따라서 인덱스 16과 84가 모두 실제 값을 유지하면 사용자가 핫키를 사용하고 있다는 것을 알고 있으므로 텍스트를 음성 변환으로 초기화합니다.

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

텍스트를 음성으로 변환하려면 TrySpeechSynthesizer () 메소드에 의존합니다. HTML5 음성 합성이 사용자의 브라우저 (Window.speechSynthesis)에 존재하는 경우 사용자가 사용할 수 있음을 알고 있으므로 음성이 현재 실행 중인지 확인합니다 (Pagetospeech.data.speechinProgress Boolean을 통해 실행 중인지 알고 있습니다). . 음성이 진행 중이면 현재 음성을 중지 할 것입니다 (TrySpeechSynthesizer가 새로운 음성을 시작하기 때문에 동시에 두 개의 사운드를 만들고 싶지 않습니다). 그런 다음 SpeechInProgress를 True로 설정하고 연설이 완료 될 때마다 재산을 다시 잘못된 가치로 설정했습니다.

지금, 나는 우리가 SpeechTutterAnceChunker를 사용하는 이유에 대해 자세히 설명하고 싶지 않지만, 200-300 단어를 방출 한 후 Chrome이 스피치 합성을 중지하는 것과 관련된 버그 수정입니다. 기본적으로 텍스트 문자열을 많은 작은 청크 (우리의 경우 120 단어)로 나누고 한 블록을 사용하여 음성 합성 API를 호출합니다.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

마지막으로 HTML5 음성 합성 API를 사용할 수 없으면 API를 시도합니다. 우리는 이미 실행중인 오디오를 중지 해야하는지 알기 위해 동일한 속성을 가지고 있습니다. 그런 다음 새 오디오 객체를 직접 생성하고 원하는 API 엔드 포인트의 URL을 전달합니다. API 키와 텍스트를 전환해야합니다. 또한 오디오에 오류가 발생하는지 확인합니다. 이 경우, 우리는이 시점에서 도움이되지 않는다는 경고를 사용자에게 보여 주어야합니다 (이 특정 API, 음성 RSS의 코드를 테스트하여 무료 계층에 대한 300 개의 요청이 허용됨).

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

마지막으로, 로컬 범위를 벗어나 AddHotkeys 메소드를 호출합니다.이 메소드는 사용자가 올바른 핫키를 누를 때까지 기다리기 시작하며 배경 스크립트에서 메시지가 수신 될 때까지 기다리는 리스너를 설정합니다. 올바른 메시지를 받거나 (

speakHighlight ) 핫키를 누르면 텍스트를 음성 변환 객체로 초기화합니다.

결론 음성, 우리는 텍스트를 음성으로 변환하는 멋진 크롬 확장 기능이 있습니다. 여기서 개념은 다른 목적으로 크롬 확장을 만드는 데 사용될 수 있습니다. 흥미로운 크롬 확장을 만들었습니까, 아니면 건물을 만들고 싶습니까? 의견에 알려주세요!

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

이 아이디어가 마음에 들고 더 개발하려면 GitHub 저장소에서 전체 코드를 찾을 수 있습니다. 테스트하려면 Chrome 웹 스토어에서 확장 제작 버전을 찾을 수 있습니다.

참고 문헌 : https://www.php.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad

https://www.php.cn/link/e417baa9cdf34202f71B55A271 🎜> 텍스트로 텍스트 크롬 연장 Faq

텍스트를 음성 크롬 확장에 설치하는 방법은 무엇입니까?

텍스트 음성 연석 크롬 확장 설치는 쉬운 프로세스입니다. 먼저 Google Chrome 브라우저를 열고 Chrome 웹 스토어로 이동하십시오. 검색 표시 줄에 설치하려는 확장자 이름을 입력하십시오 (예 : "Aloud 읽기"또는 "TTS (Text-To-Speech (TTS)"). 검색 결과에서 내선을 클릭하고 "Chrome에 추가"버튼을 클릭하십시오. 팝업 창이 확인을 요청하고 "확장 추가"를 클릭합니다. 확장자가 설치되고 브라우저 도구 모음에 아이콘이 나타납니다.

내 텍스트에서 음성 크롬 확장자에 대한 음성을 사용자 정의 할 수 있습니까?

예, 대부분의 텍스트 to Speech Chrome 확장을 사용하면 음성을 사용자 정의 할 수 있습니다. 일반적으로 다른 악센트와 언어로 남성과 여성 목소리를 포함한 다양한 목소리 중에서 선택할 수 있습니다. 음성을 사용자 정의하려면 브라우저 도구 모음에서 확장 아이콘을 클릭하고 설정 또는 옵션 메뉴로 이동하십시오. 여기에서 음성, 속도, 톤 및 볼륨을 변경할 수있는 옵션을 찾아야합니다. 텍스트 to Voice Chrome Extension이 무료로 사용할 수 있습니까? 많은 텍스트 음성 변환 크롬 확장은 자유롭게 사용할 수 있지만 일부는 고급 기능을 제공하기 위해 적은 요금을 청구 할 수 있습니다. 이러한 고급 기능에는 다른 음성, 광고없는 사용 또는 오디오 파일 저장이 포함될 수 있습니다. 설치하기 전에 Chrome 웹 스토어의 확장 세부 사항을 확인하십시오. 텍스트를 사용하여 크롬 확장자를 오프라인으로 사용할 수 있습니까? 일부 텍스트 to Voice Chrome 확장자를 오프라인으로 사용할 수는 있지만 모든 확장이 수행 할 수있는 것은 아닙니다. 확장이 어떻게 설계되는지에 따라 다릅니다. 오프라인 사용이 중요하다면 Chrome 웹 스토어의 확장 설명 또는 설치 후 확장 설정에 대한 설명을 확인하십시오.

텍스트를 스피치 크롬 확장자에게 사용하는 방법은 무엇입니까?

텍스트 to Speech Chrome Extension을 사용하려면 먼저 큰 소리로 읽으려는 웹 페이지로 이동하십시오. 그런 다음 브라우저 도구 모음에서 확장 아이콘을 클릭하십시오. 일부 확장자는 즉시 페이지를 큰 소리로 읽기 시작하는 반면, 다른 확장 장치는 읽을 텍스트를 선택해야 할 수도 있습니다. 일반적으로 확장 팝업 창에서 컨트롤을 사용하여 일시 중지, 이력서 또는 읽기 중지 할 수 있습니다.

텍스트를 사용하여 어떤 웹 사이트에서도 Chrome Extension을 보이스로 제공 할 수 있습니까?

대부분의 텍스트 to Voice Chrome 확장은 모든 웹 사이트에서 작동하며 예외가 있습니다. 일부 웹 사이트에는 특정 확장과 관련된 호환성 문제가 있거나 확장자가 이미지 나 비디오와 같은 특정 유형의 컨텐츠를 읽지 못할 수 있습니다. 문제가있는 경우 다른 확장자를 사용하거나 확장자 개발자에게 지원을 위해 연락하십시오.

내 데이터는 텍스트에서 Speech Chrome Extension에서 안전합니까?

대부분의 텍스트 음성 변환 크롬 확장은 개인 정보를 존중해야하며 동의없이 데이터를 수집하거나 공유하지 않습니다. 그러나 설치하기 전에 Extension의 개인 정보 보호 정책을 확인하는 것이 가장 좋습니다. 이 정책에 만족하지 않으면 다른 확장을 찾는 것을 고려하십시오.

텍스트의 연설 속도를 크롬 확장의 연설로 변경할 수 있습니까?

예, 대부분의 텍스트 to Speech Chrome Extensions를 사용하면 음성 속도를 조정할 수 있습니다. 일반적으로 확장자의 설정 또는 옵션 메뉴에서 수행 할 수 있습니다. 일반적으로 매우 느리게 빠른 속도의 속도를 선택할 수 있습니다.

다른 브라우저에서 텍스트를 사용하여 Chrome Extension을 사용할 수 있습니까?

텍스트 to Speech Chrome Extension은 Chrome에서 실행되도록 설계되었으며 다른 브라우저에서 실행되지 않을 수 있습니다. 그러나 많은 확장 개발자는 Firefox 또는 Edge와 같은 다른 브라우저에 대한 확장 버전을 생성 할 것입니다. 이 브라우저의 개발자 웹 사이트 또는 관련 확장 스토어를 확인하여 사용 가능한 버전이 있는지 확인하십시오.

텍스트를 사용하여 모바일 장치에서 Chrome Extension을 음성 크롬 확장 할 수 있습니까?

일부 텍스트 to Voice Chrome 확장은 Android 또는 iOS에서 Chrome에서 작동 할 수 있지만 모든 확장 기능을 사용할 수있는 것은 아닙니다. 확장이 어떻게 설계되는지에 따라 다릅니다. 모바일 사용법이 중요하다면 Chrome 웹 스토어의 확장자 설명 또는 설치 후 확장 설정 설정을 확인하십시오.

위 내용은 텍스트 음성 변환 크롬 확장을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!