浏览器语音播报

最新推荐文章于 2025-03-05 15:16:57 发布

渣渣灰飞

最新推荐文章于 2025-03-05 15:16:57 发布

阅读量348

点赞数

文章标签： javascript 开发语言 html

本文链接：https://blog.csdn.net/flhhly/article/details/133701337

版权

第一种方式，使用‘speechSynthesis’，可设置播放语音内容

参考文档：SpeechSynthesis - Web API 接口参考 | MDN

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text-to-Speech Example</title>
</head>

<body>
  <h1>Text-to-Speech Example</h1>

  <textarea id="textToSpeak" placeholder="输入要转换的文本"></textarea>
  <button id="speakButton">朗读</button>

  <script>
    var synthesis = window.speechSynthesis;

    // 获取所有可用的语音
    var voices = synthesis.getVoices();
    console.log(voices);
    // 获取HTML元素
    var textToSpeakInput = document.getElementById('textToSpeak');
    var speakButton = document.getElementById('speakButton');

    // 添加点击事件监听器
    speakButton.addEventListener('click', function () {
      var textToSpeak = textToSpeakInput.value;

      // 创建一个新的语音合成实例
      var synthesis = window.speechSynthesis;

      // 获取所有可用的语音
      var voices = synthesis.getVoices();
      console.log(voices);
      // 选择男性声音
      var maleVoice = voices.find(function (voice) {
        return voice.name === 'Google 普通话（中国大陆）';
      });

      // 设置语音合成的语音
      var utterance = new SpeechSynthesisUtterance(textToSpeak);
      utterance.voice = maleVoice;

      // 开始语音合成
      synthesis.speak(utterance);
    });
  </script>
</body>

</html>

第二中方式，使用‘audio’，需要准备播放音频

参考文档<audio> - HTML（超文本标记语言） | MDN

		<el-button @click="opens">333333</el-button>
			<audio ref="audioRed">
				<source src="./end.wav" type="audio/wav" />
				您的浏览器不支持 audio 元素。
			</audio>

// 音乐   这里是vue3写法
const audioRed = ref()
const opens = () => {
	audioRed.value.play()
}

二者差异：

<audio> 和 speechSynthesis 是两个不同的 HTML5 API，用于处理音频和语音合成，它们在功能和用途上有很大的区别。

<audio> 元素：

<audio> 是一个HTML元素，用于在网页上播放音频文件。它可以用来嵌入音乐、音效、语音记录等音频内容。
<audio> 元素通常需要一个音频文件的URL，然后可以通过JavaScript或者HTML属性来控制播放、暂停、调整音量、跳转到特定的时间点等操作。
这个API主要用于播放现有的音频文件，不进行语音合成或语音识别。

speechSynthesis API：

speechSynthesis 是Web浏览器提供的JavaScript API，用于进行文本到语音的合成，即将文本转换为可听的语音。
使用speechSynthesis，您可以在网页上动态生成语音内容，使您的应用程序能够朗读文本，例如屏幕阅读器、语音助手等。
您可以通过JavaScript来创建一个SpeechSynthesisUtterance对象，设置要合成的文本、语音速度、语音音调等参数，然后将其传递给speechSynthesis来进行语音合成。
这个API主要用于生成和播放文本到语音的合成语音，而不是播放预先录制的音频文件。

总之，<audio> 用于播放现有的音频文件，而 speechSynthesis 用于将文本合成为语音。它们在处理音频和语音方面具有不同的用途和功能。