텍스트 음성 변환 크롬 확장을 만듭니다
- Jennifer Aniston원래의
- 2025-02-18 11:30:16785검색
이 기사에서는 HTML5 음성 합성 API 또는 타사 API를 사용하여 강조 표시된 텍스트 또는 클립 보드 컨텐츠를 음성으로 변환하는 Chrome 브라우저 텍스트 음성 (TTS) 확장자를 만드는 방법을 설명합니다. Chrome Extensions에는 일반적으로 매니페스트 파일 (메타 데이터 파일), 이미지 (확장 아이콘), HTML 파일, JavaScript 파일 및 기타 리소스 (예 : 스타일 시트)가 포함됩니다.
이 기사는 Marc Towler가 동료 검토했습니다. Sitepoint의 내용을 완벽하게 만들기 위해 Sitepoint의 모든 동료 검토 자에게 감사합니다! 연설 (음성 합성 또는 TTS라고도 함)은 인간 연설을 인위적으로 생성하는 방법입니다. Wikipedia에 따르면, 사람들은 적어도 천년 이상 인간의 목소리를 생성 할 수있는 기계를 만들려고 노력했다고한다.
우리의 목록은 확장자의 이름, 설명, 저자, 버전 및 아이콘으로 시작합니다. 아이콘 객체에서 크기가 다른 많은 아이콘을 제공 할 수 있습니다.
<code class="language-json">{
"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"
},
</code>
후에 우리는 Chrome에게 WildCards "http : //*/*"및 "https : //*/*" "및"로 인해 각 웹 사이트 요청에 두 개의 JavaScript 파일을로드하도록 지시하는 Content_Scriptts 배열이 있습니다. https://*/*"" . 배경 스크립트와 달리 콘텐츠 스크립트는 사용자가 방문하는 실제 웹 사이트의 DOM에 액세스 할 수 있습니다. 컨텐츠 스크립트는 내장 된 웹 페이지의 DOM을 읽고 수정할 수 있습니다. 따라서 polyfill.min.js 및 ext.min.js는 각 웹 페이지의 모든 데이터를 읽고 수정할 수 있습니다.
<code class="language-json"> "background": {
"scripts": ["background.min.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [ "polyfill.min.js", "ext.min.js"],
"run_at": "document_end"
}],
</code>
기다려! 또한 현재 사용자가 열고있는 웹 페이지 (활동 태그) 만 액세스하도록 요청하는 권한이라는 배열도 있습니다. 또한 ClipboardRead라는 또 다른 권한을 요청하여 사용자의 클립 보드를 읽을 수 있습니다 (따라서 내용을 음성으로 변환 할 수 있음).
<code class="language-json"> "browser_action": {
"default_icon": "speech.png"
},
"permissions": [
"activeTab",
"clipboardRead"
]
}
</code>
이 메소드는 사용자가 클립 보드에 텍스트로 강조 표시되어 있지 않은지 여부를 확인 하고이 경우에만 반환됩니다. 그렇지 않으면 HTML5 음성 합성 API를 사용하여 음성을 생성하려고합니다. 이것이 실패하면 결국 타사 API를 사용하려고합니다.
speakHighlight ) 핫키를 누르면 텍스트를 음성 변환 객체로 초기화합니다.
https://www.php.cn/link/e417baa9cdf34202f71B55A271 🎜>
<code class="language-json">{
"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"
},
</code>
<code class="language-json"> "background": {
"scripts": ["background.min.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [ "polyfill.min.js", "ext.min.js"],
"run_at": "document_end"
}],
</code>
<code class="language-json">{
"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"
},
</code>
<code class="language-json"> "background": {
"scripts": ["background.min.js"]
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": [ "polyfill.min.js", "ext.min.js"],
"run_at": "document_end"
}],
</code>
참고 문헌 : https://www.php.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad
대부분의 텍스트 음성 변환 크롬 확장은 개인 정보를 존중해야하며 동의없이 데이터를 수집하거나 공유하지 않습니다. 그러나 설치하기 전에 Extension의 개인 정보 보호 정책을 확인하는 것이 가장 좋습니다. 이 정책에 만족하지 않으면 다른 확장을 찾는 것을 고려하십시오.
위 내용은 텍스트 음성 변환 크롬 확장을 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!