api.SpeechRecognition - <SUMMARIZE THE PROBLEM>

[userBy9527]

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

chrome Android is unsupported,the text-to-speech function is not available on mobile devices

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

Supports cross platform and is best tested for use

Did you test this? If so, how?

I've created a demo using the Vue2 framework and, after running the command npm run, attempted to access the link on a mobile device connected to the same local network. Unfortunately, the built-in browser and Chrome browser do not support it.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

<textarea v-model="textToSpeak" placeholder="输入要朗读的文本"></textarea>

<div>
  <label for="voice">选择一个语音:</label>
  <el-select v-model="selectedVoice" @change="changeVoice">
    <el-option v-for="voice in translatedVoices" :key="voice.name" :label="voice.label" :value="voice.name">
    </el-option>
  </el-select>
</div>
<button @click="speakText">播放</button>
<div>
  <label>语速:</label>
  <input type="range" min="1" max="10" step="1" v-model="rate" @change="updateUtterance">
  <span>{{ rate }}</span>
</div>

<div>
  <label>音高:</label>
  <input type="range" min="1" max="10" step="1" v-model="pitch" @change="updateUtterance">
  <span>{{ pitch }}</span>
</div>

<div>
  <button @click="pauseText">暂停</button>
  <button @click="resumeText">继续</button>
  <button @click="stopText">停止</button>
</div>

textToSpeak: '',
voices: [],
selectedVoice: null,
translatedVoices: [],
rate: 1, // 语速
volume: 1, // 音量
pitch: 1, // 音高
utterance: null,
voiceTranslations: {
"Microsoft Huihui - Chinese (Simplified, PRC)": "慧慧-中文",
"Microsoft Kangkang - Chinese (Simplified, PRC)": "康康-中文",
"Microsoft Yaoyao - Chinese (Simplified, PRC)": "瑶瑶-中文",
"Google Deutsch": "德语",
"Google US English": "美国英语",
"Google UK English Female": "英国英语（女）",
"Google UK English Male": "英国英语（男）",
"Google español": "西班牙语（西班牙）",
"Google español de Estados Unidos": "西班牙语（美国）",
"Google français": "法语",
"Google हिन्दी": "印地语",
"Google Bahasa Indonesia": "印度尼西亚语",
"Google italiano": "意大利语",
"Google 日本語": "日语",
"Google 한국의": "韩语",
"Google Nederlands": "荷兰语",
"Google polski": "波兰语",
"Google português do Brasil": "葡萄牙语（巴西）",
"Google русский": "俄语",
"Google 普通话（中国大陆）": "普通话（中国大陆）",
"Google 粤語（香港）": "粤语（香港）",
"Google 國語（臺灣）": "国语（台湾）",
},

changeVoice() {
this.$forceUpdate()
},
updateVoices() {
setTimeout(() => {
const availableVoices = window.speechSynthesis.getVoices();
console.log(availableVoices, 'availableVoicesavailableVoices');
this.voices = availableVoices;

    // 翻译语音列表
    this.translatedVoices = availableVoices.map(voice => ({
      name: voice.name,
      label: this.getVoiceLabel(voice)
    }));

    if (this.voices.length > 0) {
      this.selectedVoice = this.voices[0].name;
    }
  }, 5000);

},
getVoiceLabel(voice) {
  // 使用 voiceTranslations 对象进行翻译
  return this.voiceTranslations[voice.name] || voice.name;
},
speakText() {
  if (!this.textToSpeak) {
    alert('请输入要播放的文本');
    return;
  }

  this.utterance = new SpeechSynthesisUtterance(this.textToSpeak);
  this.utterance.rate = this.rate;
  this.utterance.volume = this.volume;
  this.utterance.pitch = this.pitch;
  // 找到与 selectedVoice 匹配的语音对象
  const selectedVoice = this.voices.find(v => v.name === this.selectedVoice);

  if (selectedVoice) {
    this.utterance.voice = selectedVoice;
    window.speechSynthesis.speak(this.utterance);
  } else {
    alert('选择的语音无效');
  }
},
pauseText() {
  if (window.speechSynthesis.speaking) {
    window.speechSynthesis.pause();
  }
},
resumeText() {
  if (window.speechSynthesis.paused) {
    window.speechSynthesis.resume();
  }
},
stopText() {
  window.speechSynthesis.cancel();
},
updateUtterance() {
  console.log(this.utterance, window.speechSynthesis.speaking);
  if (this.utterance && window.speechSynthesis.speaking) {
    console.log('123123');
    // 更新当前 utterance 的属性
    this.utterance.rate = this.rate;
    this.utterance.volume = this.volume;
    this.utterance.pitch = this.pitch;

    // 停止当前播放并立即重新开始，模拟实时更新效果
    window.speechSynthesis.cancel();
    window.speechSynthesis.speak(this.utterance);
  }
},

MDN URL

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API

MDN metadata

MDN page report details

• Query: api.SpeechRecognition
• Report started: 2024-06-14T07:37:42.330Z

[github-actions]

This issue was automatically closed because the title was left as the default, and a summary was not added.

If this is not a spam issue, please replace the <SUMMARIZE THE PROBLEM> part of the title with a short summary of the reported issue, and then post a follow-up comment. A maintainer will review your issue and reopen it if needed.