Vue が音声ブロードキャストを実装する方法の詳細なステップバイステップの説明 (コード付き)

vue はボタンをクリックした後の音声ブロードキャストをどのように実装しますか?このプラグインを使うだけです！ Vue で speech-tts プラグインを使用して、ボタンをクリックした後に音声ブロードキャストを実装する方法を詳しく説明します。この記事には、詳細なサンプル コードが添付されています。必要な友人に役立つことを願っています。 . 学習へようこそ！

#ボタンをクリックした後、Vue の speech-tts プラグインを使用して音声ブロードキャスト (TTS/テキスト読み上げ) を実装します

シナリオ

speak-tts プラグイン

https://www.npmjs.com/package/speak-tts (学習ビデオ共有:

vue ビデオ チュートリアル )

ボタンをクリックして音声ブロードキャストをトリガーし、指定されたテキスト コンテンツをブロードキャストします。 。

自動音声ブロードキャストが実装できないのはなぜですか?

2018 年 4 月以降、Chrome ブラウザはデスクトップ ブラウザでの音声とビデオの自動再生機能を完全に禁止しました。

厳密に言えば、Chrome ではユーザーが Web ページをトリガーする前に音声を再生することはできません。

それだけでなく、ページが読み込まれるとき、ユーザーはクリック、dbclick、タッチなどのアクティブな対話動作を行うことができません。

js を使用して .play を直接呼び出す場合() メソッド、クロムは次のエラーをスローします 次のエラーが発生しました: Uncaught (in Promise) DOMException;

実装

1. 依存関係をインストールするには公式の手順を参照してください

npm install speak-tts

2.

import Speech from 'speak-tts'

3 をページに導入し、音声オブジェクト

## を宣言します#

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

4. 初期化メソッドを呼び出した後、ページをロードします

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

5. ページにボタンを追加します

<el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>

6.ボタンクリックイベントの再生メソッド

    speakTtsSpeech() {      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },

7. 完全なサンプルコード

<script>
import Speech from "speak-tts"; // es6
export default {
  name: "SpeechDemo",
  data() {
    return {
      speech: null,
    };
  },
  mounted() {
    this.speechInit();
  },
  methods: {
    speakTtsSpeech() {
      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },
  },
};
</script>