Vue가 음성 방송을 구현하는 방법에 대한 자세한 단계별 설명(코드 포함)

Vue는 버튼 클릭 후 음성 방송을 어떻게 구현하나요? 이 플러그인을 사용해보세요! 버튼을 클릭한 후 Speak-tts 플러그인을 사용하여 음성 방송을 구현하는 방법을 자세히 살펴보겠습니다. 자세한 예제 코드가 첨부되어 있어 필요한 친구들에게 도움이 되길 바랍니다. 배우다!

버튼을 클릭한 후 Vue에서 speech-tts 플러그인을 사용하여 음성 방송(TTS/텍스트 음성 변환)을 구현합니다.

Scenario

speak-tts 플러그인

https ://www.npmjs .com/package/speak-tts (학습 영상 공유: vue 영상 튜토리얼)

버튼을 클릭하면 음성 방송이 실행되고 지정된 텍스트 콘텐츠가 방송됩니다.

자동 음성방송이 구현되지 않는 이유는 무엇인가요?

2018년 4월부터 Chrome 브라우저는 데스크톱 브라우저의 오디오 및 비디오 자동 재생 기능을 완전히 금지했습니다.

엄밀히 말하면 Chrome은 사용자가 웹페이지를 실행하기 전에 오디오가 재생되는 것을 허용하지 않습니다.

그뿐만 아니라 페이지가 로드될 때 사용자는 클릭, dbclick, 터치 등과 같은 활성 상호 작용 동작을 수행하지 않습니다.

js를 사용하여 .play() 메서드를 직접 호출하면 Chrome에서 다음을 발생시킵니다. 오류: 포착되지 않음(약속 있음) DOMException;

1. 종속성을 설치하려면 공식 지침을 참조하세요.

npm install speak-tts

3.

import Speech from 'speak-tts'

4. 초기화 메소드를 완전히 호출합니다

  data() {    return {
      speech: null,
    };

5. 페이지에 버튼을 추가합니다

mounted() {
    this.speechInit();
  },
  methods: {
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },

6. 버튼 클릭 이벤트에서 재생 메소드를 호출합니다

2efe46d1ef3390d3b867634b2d73a854speak-tts语音播报7485571ee57e8f18a622e724e109ecc3

7. 으아악

위 내용은 Vue가 음성 방송을 구현하는 방법에 대한 자세한 단계별 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!