使用 Web Speech API 和 ChatGPT API 开发一个智能语音机器人

sxkk20082年前知识分享146

前言

随着 AI 的不断发展,我们前端工程师也可以开发出一个智能语音机器人,下面是我开发的一个简单示例,大家可以访问这个视频地址查看效果。

原理

首先说一下这个 demo 的实现原理和步骤

  1. 我们使用 Web Speech API 获得输入的文本
  2. 将获得的文本作文 ChatGPT API 的 prompt 的输入
  3. 使用语音合成或者 微软的文字转语音服务,将文字作为语音输入

语音识别的功能在百度搜索页面就有,使用的是 Web Speech API

我们可以在 MDN 中查看这个 API 的使用

下面代码是一个简单示例

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Web Speech API Demotitle>
  head>
  <body>
    <h1>Web Speech API Demoh1>
    <p>请说出一些文字:p>
    <textarea id="input" cols="50" rows="5">textarea>
    <br />
    <button id="speakBtn">语言合成button>
    <button id="transcribeBtn">语音识别button>
    <br />
    <p id="transcription">p>

    <script>
      const recognition = new webkitSpeechRecognition() // 实例化语音识别对象
      recognition.continuous = true // 连续识别,直到 stop() 被调用

      const transcribeBtn = document.getElementById('transcribeBtn')
      transcribeBtn.addEventListener('click', function () {
        recognition.start() // 开始语音识别
      })

      recognition.onresult = function (event) {
        let result = ''
        for (let i = event.resultIndex; i < event.results.length; i++) {
          result += event.results[i][0].transcript
        }
        const transcript = document.getElementById('transcription')
        transcript.innerHTML = result // 显示语音识别结果
      }

      const speakBtn = document.getElementById('speakBtn')
      speakBtn.addEventListener('click', function () {
        const text = document.getElementById('input').value // 获取文本框中的文本
        const msg = new SpeechSynthesisUtterance(text) // 实例化语音合成对象
        window.speechSynthesis.speak(msg) // 开始语音合成
      })
    script>
  body>
html>

这个例子很简单,点击语音识别可以将文字识别再文本框中。输入文字,电脑可以合成语音, 但是电脑合成的声音比较机械,不够逼真,因此我们可以使用微软的语音合成,大家可以访问这个地址体验。

https://speech.microsoft.com/audiocontentcreation

如果没有登录的话,只能试听,注册登录后就可以免费使用官方的 api 了

注册的话,大家只需要按照步骤注册就可以了,并且需要准备一张境外使用信用卡,注册后每月可以免费 50w 字的使用权限。

创建资源的时候选择 F0,创建完成后,就会有一个秘钥。

有了秘钥我们就可以将 chatGPT 返回的文字转成真人语音了,在 Github 上有代码示例

完整代码

DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Web Speech API Demotitle>
  head>
  <body>
    <h1>Web Speech API + ChatGPT APIh1>
    <button id="transcribeBtn">按住说话button>
    <br />
    <p id="transcription">p>
    <script src="https://aka.ms/csspeech/jsbrowserpackageraw">script>

    <script>
      async function requestOpenAI(content) {
        const BASE_URL = ``
        const OPENAI_API_KEY = 'sk-xxxxx'
        const messages = [
          {
            role: 'system',
            content: 'You are a helpful assistant',
          },
          { role: 'user', content },
        ]
        const res = await fetch(`${BASE_URL || 'https://api.openai.com'}/v1/chat/completions`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            authorization: `Bearer ${OPENAI_API_KEY}`,
          },
          body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages,
            temperature: 0.7,
            top_p: 1,
            frequency_penalty: 0,
            presence_penalty: 0,
          }),
        })
        const response = await res.json()

        const result = response.choices[0].message.content
        console.log(result)
        return result
      }
      // 下载 mp3 文件
      function download(result) {
        const blob = new Blob([result.audioData])
        const url = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = url
        link.download = 'filename.mp3' // set the filename here
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
      }

      function synthesizeSpeech(text) {
        const sdk = SpeechSDK
        const speechConfig = sdk.SpeechConfig.fromSubscription('TTS_KEY', 'TTS_REGION')
        const audioConfig = sdk.AudioConfig.fromDefaultSpeakerOutput()

        const speechSynthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig, audioConfig)
        // 可以更改 Ssml 来改变声音
        speechSynthesizer.speakSsmlAsync(
          `${text}`,
          (result) => {
            if (result) {
              speechSynthesizer.close()

              return result.audioData
            }
          },
          (error) => {
            console.log(error)
            speechSynthesizer.close()
          }
        )
      }

      const SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition

      const recognition = new SpeechRecognition() // 实例化语音识别对象
      recognition.continuous = true // 连续识别,直到 stop() 被调用
      recognition.lang = 'cmn-Hans-CN' // 普通话 (中国大陆)

      const transcribeBtn = document.getElementById('transcribeBtn')

      let record = false
      transcribeBtn.addEventListener('mousedown', function () {
        record = true
        recognition.start() // 开始语音识别
        console.log('开始语音识别')
        transcribeBtn.textContent = '正在录音...'
      })
      transcribeBtn.addEventListener('mouseup', function () {
        transcribeBtn.textContent = '按住说话'
        record = false

        recognition.stop()
      })
      recognition.onend = () => {
        console.log('停止语音识别')
        transcribeBtn.textContent = '开始'
        record = false
      }

      recognition.onerror = function (event) {
        console.log(event.error)
      }

      recognition.onresult = function (event) {
        console.log(event)
        let result = ''
        for (let i = event.resultIndex; i < event.results.length; i++) {
          result += event.results[i][0].transcript
        }
        console.log(result)
        const transcript = document.getElementById('transcription')
        const p = document.createElement('p')
        p.textContent = result
        transcript.appendChild(p) // 显示语音识别结果
        requestOpenAI(result).then((res) => {
          const p = document.createElement('p')
          p.textContent = res
          transcript.appendChild(p)
          synthesizeSpeech(res)
        })
      }
    script>
  body>
html>

上面代码中

以上就是本文的全部内容,如果对你有帮助,记得给个三连,感谢你的阅读。

本文正在参加「金石计划」

相关文章

轻松修

微星笔记本电脑时间不能自动更新,有什么解决办法?...

使用油猴脚本净化 CSDN

我报名参加金石计划 1 期挑战——瓜分 10 万奖池,这是我的第 1 篇文章,点击查看活动详情代码片段CSDN 的百度搜索权重很高,比如我们搜索一个关键词, 输入react 性能优化,第一个就是 CS...

AI智能分析盒子:助力数据洞察,开启智能化新时代

AI智能分析盒子:助力数据洞察,开启智能化新时代

  随着AI技术的飞速发展,AI智能分析盒子作为一个融合了物联网、云计算和大数据分析的创新设备,得到了广泛的关注和应用。它以其高效的数据处理能力和智能化的分析功能,成为了企业...

人工智能技术:引领未来智能创新的关键驱动力

人工智能技术:引领未来智能创新的关键驱动力

  在当今科技快速发展的时代,人工智能(AI)技术成为了引领未来智能革命的关键驱动力。人工智能的发展已经深入到各个领域,从医疗保健到金融服务,从交通运输到社交媒体,它正在极大...

码上掘金不仅可以写 PPT,还可以录视频

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!前言短视频作为新时代的产物,到现在才发展了几年的时间,创作者们看到了短视频的红利,有不少人已经通过视频录制和知识付费的方式实现了流量的变现,当...

人工智能的发展趋势及其对未来的影响

人工智能的发展趋势及其对未来的影响

  随着人工智能的发展,我们的社会和生活方式正在发生着翻天覆地的变化。人工智能已经成为各个领域的核心技术,给我们带来了无限的想象空间。本文将从人工智能的发展趋势以及其对未来的...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。