웹 음성 API로 음성 제어 오디오 플레이어 만들기-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

웹 음성 API로 음성 제어 오디오 플레이어 만들기

William Shakespeare

Feb 18, 2025 am 09:40 AM

Make a Voice-Controlled Audio Player with the Web Speech API

코어 포인트

Web Voice API는 웹 개발자가 음성 인식 및 합성을 웹 페이지에 통합 할 수있는 JavaScript API로, 특히 여러 작업을 동시에 처리 해야하는 장애인 또는 사용자의 경험을 향상시킬 수 있습니다.

음성 인식 API는 현재 마이크에 액세스하기 위해 인터넷 연결 및 사용자 권한이 필요합니다. Annyang과 같은 도서관은 복잡성을 관리하고 전진 호환성을 보장하는 데 도움이 될 수 있습니다.

당신은 음성 합성 API와 Speech 인식 API를 사용하여 음성 제어 오디오 플레이어를 구축 할 수 있습니다. 이를 통해 사용자는 음성 명령을 사용하여 노래를 탐색하고 특정 노래를 요청할 수 있습니다.

오디오 플레이어는 설정 데이터, UI 메소드, 음성 API 메소드 및 오디오 작동 방법이 포함됩니다. 사용자 입력을 식별하고 처리하는 코드는 WebKit 브라우저에만 적용됩니다.

Web Voice API는 음성 명령을 사용하여 이메일을 탐색하거나 웹 사이트를 탐색하거나 웹 검색과 같은 많은 영역에서 사용할 가능성이 있습니다. 구현이 안정적이고 새로운 기능이 추가되면이 API의 사용이 증가 할 것으로 예상됩니다.

추가 블록을 숨기거나 표시하는 데 사용되는 /
.sp_hiddenBlock { 여백 : 2px; 국경 : 1px 고체 RGB (250, 197, 82); Border-Radius : 3px; 패딩 : 5px; 배경색 : RGBA (250, 197, 82, 0.7); } .sp_hiddenblock.sp_hide { 디스플레이 : 없음! 중요; } 이 기사는 Edwin Reynoso와 Mark Brown이 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewer에게 감사합니다! Web Voice API는 웹 개발자가 음성 인식 및 합성 기능을 웹 페이지에 통합 할 수있는 JavaScript API입니다.
이에 대한 많은 이유가 있습니다. 예를 들어, 장애인 (특히 시각 장애가있는 사용자 또는 손 이동성이 제한된 사용자)의 경험을 향상 시키거나 운전과 같은 다른 작업을 수행하면서 사용자가 웹 응용 프로그램과 상호 작용할 수 있도록합니다.
웹 음성 API에 대해 들어 본 적이 없거나 빨리 시작하려면 Aurelio de Rosa의 기사 소개, Web Voice API, Voice Synthesis API 및 Talking Forms Idea를 읽는 것이 좋습니다.
브라우저 지원 브라우저 제조업체는 최근에만 음성 인식 API와 음성 합성 API를 구현하기 시작했습니다. 보시다시피,이 API에 대한 지원은 완벽하지 않으므로이 자습서를 공부하는 경우 올바른 브라우저를 사용하십시오.
또한 음성 인식 API는 현재 네트워크를 통해 음성이 전송되기 때문에 인터넷 연결이 필요하며 결과는 브라우저로 반환됩니다. 연결이 HTTP를 사용하는 경우 사용자는 요청을 만들 때마다 사이트가 마이크를 사용하도록 허용해야합니다. 연결이 HTTPS를 사용하는 경우 한 번만 수행하면됩니다.
음성 인식 라이브러리

라이브러리는 복잡성을 관리 할 수 있도록 도와줍니다. 예를 들어, 다른 브라우저가 음성 인식 API를 지원하기 시작하면 공급 업체 접두사 추가에 대해 걱정할 필요가 없습니다.

Annyang은 사용하기가 매우 쉽습니다. 자세히 알아보십시오 . Annyang을 초기화하려면 웹 사이트에 스크립트를 추가합니다.

API가 다음과 같이 지원되는지 확인할 수 있습니다.

및 명령 이름을 키로 사용하고 콜백을 메소드로 사용하는 객체를 사용하여 명령을 추가하십시오.

<🎜>

마지막으로, 우리는 그것들을 추가하고 다음 명령으로 음성 인식을 시작합니다.

음성 제어 오디오 플레이어 이 기사에서는 음성 제어 오디오 플레이어를 구축합니다. Speech Synthesis API (사용자에게 어떤 노래가 재생되는지 또는 명령이 인식되지 않음)와 음성 인식 API (음성 명령을 다른 애플리케이션 로직 트리거로 변환)를 모두 사용합니다.

if (annyang) { /*逻辑*/ }

Web Voice API와 함께 오디오 플레이어를 사용하는 장점은 사용자가 브라우저에서 다른 페이지를 탐색하거나 브라우저를 최소화하고 다른 작업을 수행하면서 노래간에 전환 할 수 있다는 것입니다. 재생 목록에 노래가 많이 있다면 수동 검색없이 특정 노래를 요청할 수도 있습니다 (물론 이름이나 가수를 알고 있다면).

우리는 프로젝트에 추가 종속성을 추가하지 않고 API를 사용하는 방법을 보여주기 때문에 음성 인식을 위해 타사 라이브러리에 의존하지 않을 것입니다. 음성 제어 오디오 플레이어는

속성을 지원하는 브라우저 만 지원합니다. Chrome의 최신 버전은 안전한 선택이어야합니다.

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

언제나 그렇듯이 Github에서 전체 코드를 찾을 수 있으며 Codepen의 데모를 찾을 수 있습니다.

초보자 - 재생 목록 정적 재생 목록부터 시작하겠습니다. 배열에 다른 노래를 포함하는 객체로 구성됩니다. 각 노래는 파일의 경로, 가수 이름 및 노래의 이름을 포함하는 새로운 객체입니다.

우리는

annyang.addCommands(commands);
annyang.start();

배열에 새 객체를 추가하고 오디오 플레이어에 자동으로 새 노래를 포함시킬 수 있어야합니다.

오디오 플레이어

이제 플레이어 자체를 보자. 이것은 다음과 같은 개체가 될 것입니다 :

일부 설정 데이터 UI와 관련된 방법 (예 : 노래 목록을 채우는 등) 음성 API와 관련된 방법 (예 : 인식 및 처리 명령)

> 오디오 작동과 관련된 방법 (예 : 재생, 일시 정지, 중지, 이전, 다음)

설정 데이터 이것은 비교적 간단합니다. interimResults

속성은 사용자가 현재있는 노래의 색인을 나타냅니다. 예를 들어, 이전/다음 곡을 연주하거나 STOP/일시 정지 노래를 연주해야 할 때 유용합니다.

배열에는 사용자가 듣는 모든 노래가 포함되어 있습니다. 즉, 다음에 사용자가 동일한 노래를 듣게되면 다운로드하지 않고 배열에서로드 할 수 있습니다.

여기에서 전체 코드를 볼 수 있습니다.

UI 메소드 UI에는 사용 가능한 명령 목록, 사용 가능한 트랙 목록 및 컨텍스트 상자가 포함되어 현재 작업 및 이전 명령을 사용자에게 알릴 컨텍스트 상자가 포함됩니다. UI 방법에 대해 자세히 설명하지는 않지만 간단한 개요를 제공합니다. 이 방법에 대한 코드를 여기에서 찾을 수 있습니다.

로드 이것은 우리가 이전에 선포 한 재생 목록을 반복하고 아티스트 이름과 함께 사용 가능한 트랙 목록에 노래의 이름을 추가합니다.

changecurrentsongeffect 이것은 현재 어떤 노래를 연주하고 있는지 (녹색으로 표시하고 그 옆에 헤드폰을 추가함으로써), 어떤 노래가 재생되었는지를 나타냅니다.

Playsong

이것은 사용자의 노래가

메소드 (상자 에이 정보 추가)를 통해 재생되거나 종료되었음을 나타냅니다.

ChangestatusTuscode

위에서 언급 한 바와 같이, 이것은 컨텍스트 상자의 상태 메시지를 업데이트하고 (예 : 새 노래가 재생되고 있음을 나타냅니다)

메소드를 사용 하여이 변경 사항을 사용자에게 알립니다.

changelastcommand 마지막 명령 상자를 업데이트하는 작은 도우미 기능.

토글 스피너 스피너 아이콘을 숨기거나 표시하는 작은 도우미 기능 (사용자의 음성 명령이 현재 처리 중임을 나타냅니다).

플레이어 메소드 플레이어는 당신이 기대할 수있는 것, 즉 시작, 멈추고, 재생을 일시 중지하고, 트랙 사이를왔다 갔다 할 것입니다. 다시 말하지만, 나는이 방법들을 자세히 설명하지 않을 것이지만 오히려 당신을 Github 코드 기반으로 안내하고 싶습니다.

재생 이것은 사용자가 노래를 들었는지 여부를 확인합니다. 그렇지 않은 경우 노래를 시작합니다. 그렇지 않으면 현재 캐시 된 노래에서 앞에서 논의한

메소드 만 호출합니다. 이것은 changeStatusCode에 있으며 인덱스에 해당합니다.

PAUSESONG

이것은 두 번째 매개 변수로 전달되는 내용에 따라 노래를 완전히 멈추거나 완전히 멈 춥니 다 (노래의 시작으로 재생 시간을 반환). 또한 상태 코드를 업데이트하여 곡이 중지되었거나 일시 중지되었음을 사용자에게 알립니다.

중지 이것은 첫 번째 및 유일한 매개 변수를 기준으로 노래를 일시 중지하거나 중지합니다. speak prev 이것은 이전 노래가 캐시되었는지 확인하고, 그렇다면 현재 노래를 일시 중지하고 를 감소시키고 현재 노래를 다시 재생합니다. 새 노래가 배열에 있지 않으면 똑같은 일을하지만 먼저 감소

인덱스에 해당하는 파일 이름/경로에 따라 노래를로드합니다.

다음 사용자가 이전에 노래를 들었을 때이 방법은 곡을 일시 중지하려고합니다. 다음 노래가 데이터 객체 (즉, 재생 목록)에 존재하면로드하고 재생됩니다. 다음 노래가 없으면 상태 코드를 변경하고 사용자에게 마지막 노래에 도달했음을 알립니다.

SearchSpecificSong 이것은 키워드를 매개 변수로 사용하고 노래 이름과 아티스트 사이의 선형 검색을 수행 한 다음 첫 번째 일치를 재생합니다. 음성 API 메소드

Voice API는 놀랍게도 구현하기 쉽습니다. 실제로 두 줄의 코드만으로는 웹 응용 프로그램이 사용자와 대화 할 수 있습니다.

우리가 여기서하는 일은 우리가 말하고 싶은 텍스트가있는

객체를 만드는 것입니다. 객체에서 사용 가능)는이 브라우저에서 계속 시도하십시오. 그렇게 간단합니다!

<🎜>

말하기 우리는 메소드에서 실제 응용 프로그램을 볼 수 있습니다. utterance 두 번째 매개 변수 ()가 존재하면 메시지가 재생 된 후 speechSynthesis 메소드 (오디오 객체가 될 것임)를 호출합니다. window 프로세스 커뮤니케이션 이 방법은 그다지 흥미롭지 않습니다. 그것은 명령을 인수로 받아들이고 그에 응답하기 위해 적절한 방법을 호출합니다. 정규 표현식을 사용하여 사용자가 특정 노래를 재생하려는 지 확인합니다. 그렇지 않으면 다른 명령을 테스트하기 위해 스위치 문으로 들어갑니다. 수신 명령에 해당하지 않으면 명령이 이해되지 않는다는 것을 사용자에게 알려줍니다. utterance 여기에서 코드를 찾을 수 있습니다.

모든 것을 함께 텔레

지금까지, 우리는 재생 목록을 나타내는 데이터 객체와 플레이어 자체를 나타내는

객체가 있습니다. 이제 사용자 입력을 식별하고 처리하기 위해 일부 코드를 작성해야합니다. 이는 WebKit 브라우저에만 적용됩니다.

사용자가 이전과 같이 간단하게 앱과 대화하게하는 코드 :

이렇게하면 사용자가 페이지가 마이크에 액세스하도록 초대합니다. 액세스를 허용하는 경우 대화를 시작할 수 있으며 중지되면 speak> 이벤트가 트리거되어 음성 캡처 결과를 JavaScript 객체로 사용할 수 있습니다.

참조 : HTML5 음성 인식 API 우리는 응용 프로그램에서 다음과 같이 구현할 수 있습니다 :

보시다시피, scope 객체에서 scope의 존재를 테스트했습니다. 그것이 존재하는 경우, 우리는 시작할 수 있습니다. 그렇지 않으면 브라우저가 지원하지 않는다고 사용자에게 알립니다. 모든 것이 잘되면 몇 가지 옵션을 설정합니다. 그 중 는 원산지에 따라 인식 결과를 향상시키는 흥미로운 옵션입니다. play 그런 다음 메소드를 시작하기 전에

및

이벤트에 대한 핸들러를 선언합니다.

프로세싱 결과

음성 인식기가 최소한 현재 음성 인식 구현과 요구의 맥락에서 결과를 얻을 때 몇 가지 일을하고 싶습니다. 결과가있을 때마다 배열에 저장하고 브라우저가 추가 결과를 수집 할 수 있도록 3 초 동안 대기하도록 시간 초과를 설정하려고합니다. 3 초 후 수집 된 결과를 사용하고 리버스 순서로 결과를 사용하고 (최신 결과는 정확할 가능성이 높음) 식별 된 전 사체에 사용할 수있는 명령 중 하나가 포함되어 있는지 확인합니다. 그렇다면 명령을 실행하고 음성 인식을 다시 시작합니다. 최종 결과를 기다리는 데 최대 1 분이 걸릴 수 있으므로 오디오 플레이어는 버튼을 클릭하면 더 빠르기 때문에 오디오 플레이어가 반응이 좋지 않고 무의미하게 보이게합니다.

우리는 라이브러리를 사용하지 않기 때문에 음성 인식기를 설정하고 각 결과를 루프하고 전사가 주어진 키워드와 일치하는지 확인하기 위해 더 많은 코드를 작성해야합니다.

마지막으로, 우리는 음성 인식이 끝날 때 즉시 다시 시작합니다.

<🎜>

이 섹션의 전체 코드를 여기에서 볼 수 있습니다.

<.> 그게 다야. 이제 완벽하게 기능하고 음성 제어 오디오 플레이어가 있습니다. Github에서 코드를 다운로드하여 시도해 보거나 Codepen 데모를 확인하는 것이 좋습니다. 또한 HTTPS를 통해 제공되는 버전도 제공합니다.

결론 이 실용적인 튜토리얼이 웹 음성 API의 가능성에 대한 좋은 소개를 제공하기를 바랍니다. 구현이 안정화되고 새로운 기능이 추가됨에 따라이 API의 사용이 증가 할 것입니다. 예를 들어, Future YouTube는 완전히 음성 제어가 될 것이라고 생각합니다. 여기서 다른 사용자의 비디오를보고, 특정 노래를 재생하며, 음성 명령으로 노래 사이를 이동할 수 있습니다.

웹 음성 API는 다른 많은 영역을 개선하거나 새로운 가능성을 열 수 있습니다. 예를 들어, 음성을 사용하여 이메일을 탐색하거나 웹 사이트를 탐색하거나 네트워크를 검색하십시오.

if (annyang) { /*逻辑*/ }

프로젝트 에서이 API를 사용하십니까? 아래의 의견에서 듣고 싶습니다.

Web Voice API (FAQ)를 사용하는 음성 제어 오디오 플레이어에 대한 자주 묻는 질문 웹 음성 API는 음성 제어 오디오 플레이어에서 어떻게 작동합니까?

Web Voice API는 개발자가 음성 인식 및 합성을 웹 응용 프로그램에 통합 할 수있는 강력한 도구입니다. 음성 제어 오디오 플레이어에서 API는 음성 명령을 텍스트로 변환하여 응용 프로그램이 해석하고 실행할 수 있습니다. 예를 들어, 사용자가 "재생"이라고 말하면 API는 텍스트로 변환되며 응용 프로그램은 이것이 오디오 재생을 시작하는 명령임을 이해합니다. 이 프로세스에는 인간의 음성을 정확하게 식별하고 해석하기위한 정교한 알고리즘과 기계 학습 기술이 포함됩니다.

음성 제어 오디오 플레이어를 사용하면 어떤 장점이 있습니까?