index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>PaddleSpeech Serving-语音实时转写</title>
  <link rel="shortcut icon" href="./static/paddle.ico">
  <script src="../static/js/jquery-3.2.1.min.js"></script>
  <script src="../static/js/recorder/recorder-core.js"></script>
  <script src="../static/js/recorder/extensions/lib.fft.js"></script>
  <script src="../static/js/recorder/extensions/frequency.histogram.view.js"></script>
  <script src="../static/js/recorder/engine/pcm.js"></script>
  <script src="../static/js/SoundRecognizer.js"></script>
  <link rel="stylesheet" href="../static/css/style.css">
  <link rel="stylesheet" href="../static/css/font-awesome.min.css">
</head>

<body>
  <div class="asr-content">
    <div class="audio-banner">
      <div class="weaper">
        <div class="text-content">
          <p><span class="title">PaddleSpeech Serving简介</span></p>
          <p class="con-container">
            <span class="con">PaddleSpeech 是基于飞桨 PaddlePaddle 的语音方向的开源模型库，用于语音和音频中的各种关键任务的开发。PaddleSpeech Serving是基于python + fastapi 的语音算法模型的C/S类型后端服务，旨在统一paddle speech下的各语音算子来对外提供后端服务。</span>
          </p>
        </div>
        <div class="img-con">
          <img src="../static/image/PaddleSpeech_logo.png" alt="" />
        </div>
      </div>
    </div>
    <div class="audio-experience">
      <div class="asr-box">
        <h2>产品体验</h2>
        <div id="client-word-recorder" style="position: relative;">
          <div class="pd">
            <div style="text-align:center;height:20px;width:100%;
                        border:0px solid #bcbcbc;color:#000;box-sizing: border-box;display:inline-block"
              class="recwave">
            </div>
          </div>
        </div>
        <div class="voice-container">
          <div class="voice-input">
            <span>WebSocket URL：</span>
            <input type="text" id="socketUrl" class="websocket-url" value="ws://127.0.0.1:8091/ws/asr"
              placeholder="请输入服务器地址，如：ws://127.0.0.1:8091/ws/asr">
            <div class="start-voice">
              <button type="primary" id="beginBtn" class="voice-btn">
                <span class="fa fa-microphone"> 开始识别</span>
              </button>
              <button type="primary" id="endBtn" class="voice-btn end">
                <span class="fa fa-microphone-slash"> 结束识别</span>
              </button>
              <div id="timeBox" class="time-box flex-display-1">
                <span class="total-time">识别中，<i id="timeCount"></i> 秒后自动停止识别</span>
              </div>
            </div>
          </div>
          <div class="voice">
            <div class="result-text" id="resultPanel">此处显示识别结果</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var ws = null
    var timeLoop = null
    var result = ""
    $(document).ready(function () {
      $('#beginBtn').on('click', startRecording)
      $('#endBtn').on('click', stopRecording)
    })

    function openWebSocket(url) {
      if ("WebSocket" in window) {
        ws = new WebSocket(url)
        ws.onopen = function () {
          console.log("Websocket 连接成功，开始识别")
          ws.send(JSON.stringify({
            "signal": "start"
          }))
        }
        ws.onmessage = function (_msg) { parseResult(_msg.data) }
        ws.onclose = function () {
          console.log("WebSocket 连接断开")
        }
        ws.onerror = function () { console.log("WebSocket 连接失败") }
      }
    }

    function parseResult(data) {
      var data = JSON.parse(data)
      console.log('result json:', data)
      var result = data.result
      console.log(result)
      $("#resultPanel").html(result)
    }

    function TransferUpload(number, blobOrNull, duration, blobRec, isClose) {
      if (blobOrNull) {
        var blob = blobOrNull
        var encTime = blob.encTime
        var reader = new FileReader()
        reader.onloadend = function () { ws.send(reader.result) }
        reader.readAsArrayBuffer(blob)
      }
    }

    function startRecording() {
      // Check socket url
      var socketUrl = $('#socketUrl').val()
      if (!socketUrl.trim()) {
        alert('请输入 WebSocket 服务器地址，如：ws://127.0.0.1:8091/ws/asr')
        $('#socketUrl').focus()
        return
      }
      // init recorder
      SoundRecognizer.init({
        soundType: 'pcm',
        sampleRate: 16000,
        recwaveElm: '.recwave',
        translerCallBack: TransferUpload
      })
      openWebSocket(socketUrl)

      // Change button state
      $('#beginBtn').hide()
      $('#endBtn, #timeBox').addClass('show')
      // Start countdown
      var seconds = 180
      $('#timeCount').text(seconds)
      timeLoop = setInterval(function () {
        seconds--
        $('#timeCount').text(seconds)
        if (seconds === 0) {
          stopRecording()
        }
      }, 1000)
    }

    function stopRecording() {
      ws.send(JSON.stringify({ "signal": "end" }))
      SoundRecognizer.recordClose()

      $('#endBtn').add($('#timeBox')).removeClass('show')
      $('#beginBtn').show()
      $('#timeCount').text('')
      clearInterval(timeLoop)
    }
  </script>
</body>

</html>