spoken word 다운로드 - spoken word 소스 코드 다운로드

spoken word

AI 소스 코드

1.0.1

다운로드

말하는 말

재생 컨트롤, 읽기 강조 표시, 다국어 지원 및 속도, 피치 및 음성 설정을 통해 컨텐츠에 텍스트 음성 (TT)을 추가하십시오.

기고자 : Westonruter
태그 : TTS, 음성 합성, 텍스트 음성 연설, 오디오, 음성, 읽기
최소한 필요 : 4.7
테스트 : 4.9
안정적인 태그 : 1.0.1
라이센스 : MIT
PHP가 필요합니다 : 5.4

설명

재생 컨트롤, 읽기 강조 표시, 다국어 지원 및 속도, 피치 및 음성 설정을 통해 컨텐츠에 텍스트 음성 (TT)을 추가하십시오.

사용자 브라우저에서 로컬 텍스트 음성 연설 엔진을 사용합니다. speechSynthesis Browser API와 직접 인터페이스합니다. 제로 외부 요청 또는 종속성.
단어는 당신이 함께 읽을 수 있도록 말할 때 선택/강조됩니다.
각주 슈퍼 스크립트 ( sup 요소)를 포함하여 읽지 말아야 할 말하기 요소를 건너 뜁니다.
추가 된 길이의 일시 정지는 제목과 단락 사이에 있습니다.
재생 중에는 컨트롤이 유지되며 각각의 현재 텍스트는 지속적으로 스크롤됩니다. ( position:sticky .)
뒤/전진 컨트롤을 사용하면 다음 단락으로 건너 뛸 수 있습니다. 말하지 않을 때 읽을 다음 단락은 전적으로 선택됩니다.
그 시점에서 읽을 텍스트를 선택하십시오. 음성 중 텍스트를 클릭하여 즉시 위치를 변경하십시오.
[lang] 속성이 포함 된 임베디드 텍스트가 적절한 음성으로 말할 수있는 다국어 지원 (사용자가 설치되었다고 가정 함).
기본 음성 (각 언어에 대한)을 변경하기위한 설정과 음성 속도 및 피치에 대한 설정과 함께. (모든 엔진에서 지원하지 않습니다.) 말하기 중에 변경할 수 있습니다.
재생 중에 잠시 멈추기 위해 탈출을 누르십시오.
음성 환경 설정은 localStorage 에 지속적으로 저장되며 주어진 사이트의 Windows에서 변경이 동기화됩니다.
독립형 방식으로 JS를 사용하는 기능 (예 : 책갈피).
Chrome, Firefox 및 Safari의 최신 데스크탑 버전에서 작동하는 것으로 알려져 있습니다. (OSX에서 테스트 됨) Android 또는 iOS의 모바일/터치 브라우저에서는 안정적으로 작동하지 않으며, 해당 시스템에서 충분히 구현되지 않은 (여전히 실험적인) speechSynthesis API로 인해 해당 시스템에서 충분히 구현되지 않았거나 프로그램 범위 선택은 데스크탑과 동일한 방식으로 작동하지 않습니다. 이러한 이유로 기능은 기본적으로 모바일 운영 체제에서 비활성화됩니다.

일부 테스트 콘텐츠와 함께 독립형 예제에서 사용해보십시오.

테마 구성

음성 단어 설정은 HTML5 dialog 요소에 표시됩니다. 이 기능을 아직 지원하지 않는 브라우저의 경우 플러그인은 대화 상자 폴리얼을 번들로 제공합니다. 폴리 필은 검출 된 경우에만 포함됩니다. 브라우저는 기본적으로 dialog 지원하지 않습니다. 테마 나 플러그인에 다음을 추가하여 폴리 필을 포함시킬 수 있습니다.

 add_filter ( ' spoken_word_include_dialog_polyfill ' , ' __return_false ' );

스티커 헤더가있는 테마 (예 : 21 세의 Nav 메뉴와 같은)의 경우 끈적 끈적한 위치 컨트롤이 끈적 끈적한 헤더 뒤에 숨겨져 있지 않도록 추가 CSS를 추가해야 할 수도 있습니다. 예를 들어 스물 17 명이에, 당신은 커스터마이저의 사용자 정의 CS에 다음을 추가 할 수 있습니다.

 @media screen and ( min-width : 782 px ) {
	body : not (. admin-bar ) . spoken-word--active {
		top : calc ( 0.5 em + 70 px );
	}
	body . admin-bar . spoken-word--active {
		top : calc ( 0.5 em + 32 px + 70 px );
	}
}

내부

북마크는 플러그인이 설치되지 않은 비 단어 압력 사이트조차도 모든 사이트에 음성 단어 기능을로드하는 데 사용될 수 있습니다. 열쇠는 적절한 contentSelector 사용하는 것입니다.

 ( ( ) => {
	const link = document . createElement ( 'link' ) ;
	link . rel = 'stylesheet' ;
	link . href = 'https://unpkg.com/spoken-word/css/style.css' ;
	document . head . appendChild ( link ) ;

	const script = document . createElement ( 'script' ) ;
	script . src = 'https://unpkg.com/spoken-word/dist/spoken-word.js' ;
	script . addEventListener ( 'load' , ( ) => {
		spokenWord . initialize ( {
			contentSelector : [ /* ? Amend as desired. */
				'.hentry' ,
				'.entry-content' ,
				'.h-entry' ,
				'.e-content' ,
				'[itemprop="articleBody"]' ,
			] . join ( ', ' )
		} ) ;
	} ) ;
	document . head . appendChild ( script ) ;
} ) ( ) ;

spokenWord.initialize() 함수는 객체를 다음 속성을 가질 수있는 인수로 간주합니다.

 * @param {string} contentselector -CSS 선택기 말하기 요소를 찾습니다.
 * @param {element} rootElement- 내용을 찾는 루트 요소.
 * @param {object} chunkifyoptions- 옵션이 Chunkify로 전달되었습니다.
 * @param {boolean} usedashicons- 대시를 사용해야하는지 여부.
 * @param {object} defaultUternanceOptions- LocalStorage에서 제공되지 않은 경우 기본 발화 옵션.

대화 상자와 컨트롤은 preact를 사용하여 렌더링됩니다. 이 플러그인에서 사용하는 모든 모듈 목록은 package.json을 참조하십시오.

이 플러그인은 소스를 볼 수있는 Github에서 개발되었습니다. 거기에서 문제를보고하십시오. 요청을 당기는 것을 환영합니다. spoken-word 패키지는 NPM에도 게시됩니다.