语音转文字

<!DOCTYPE html>
<head lang="zh-CN">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>语音朗读</title>
</head>
<body>
  <button type="button" οnclick="recognition.start()">点击识别语音</button>
  <button type="button" οnclick="recognition.stop()">结束语音识别</button>
  <p id="status"></p>
  <p id="output"></p>
  <script type="text/javascript">
    // 目前只有Chrome和Edge支持该特性,在使用时需要加私有化前缀
    const SpeechRecognition = window.webkitSpeechRecognition
    const recognition = new SpeechRecognition()
    const output = document.getElementById("output")
    const status = document.getElementById("status")

    // 语音识别开始的钩子
    recognition.onstart = function() {
      output.innerText = ''
      status.innerText = '语音识别开始'
    }
    // 如果没有声音则结束的钩子
    recognition.onspeechend = function() {
      status.innerText = "语音识别结束"
      recognition.stop()
    }
    // 识别错误的钩子
    recognition.onerror = function({ error }) {
      const errorMessage = {
        'not-speech': '未检测到声源',
        'not-allowed': '未检测到麦克风设备或未允许浏览器使用麦克风'
      }
      status.innerText = errorMessage[ error ] || '语音识别错误'
    }
    // 识别结果的钩子,
    // 可通过interimResults控制是否实时识别,maxAlternatives设置识别结果的返回数量
    recognition.onresult = function({ results }) {
      const { transcript, confidence } = results[0][0]
      output.innerText = `识别的内容:${ transcript },识别率:${ (confidence * 100).toFixed(2) }%`
    }
  </script>
</body>
</html>

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值