js根据音频流判断是否有声音

深藏阁楼爱情的钟 2022-11-17 13:48 287阅读 0赞

功能需求：首先判断有没有获取麦克风权限？然后根据音频流判断是否有声音？如果音量大于0就表示有声音。然后有一个动画。会提示话筒是有声音的状态还是没声音的状态？

关键代码：

let audioContext = new AudioContext
            // 将麦克风的声音输入这个对象
            let mediaStreamSource = audioContext.createMediaStreamSource(stream)
            // 创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
            let scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1)
            // 将该分析对象与麦克风音频进行连接
            mediaStreamSource.connect(scriptProcessor)
            // 此举无甚效果，仅仅是因为解决 Chrome 自身的 bug
            scriptProcessor.connect(audioContext.destination)
            // 开始处理音频
            scriptProcessor.onaudioprocess = function(e) {
              // 获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
              let buffer = e.inputBuffer.getChannelData(0)
              // 获取缓冲区中最大的音量值
              let maxVal = Math.max.apply(Math, buffer)
              // 显示音量值
              // console.log('显示音量：')
              //
              // console.log(Math.round(maxVal * 100))
              // 如果有声音的话，值为true,通过语音流去判断话筒是否有声音
              if (Math.round(maxVal * 100) > 0) {
    
                _that.haveVoice = true
                _that.$set(_that, 'haveVoice', true)
              } else {
                _that.haveVoice = false
                _that.$set(_that, 'haveVoice', false)
              }
            }

完整代码：

<template>
      <div class="speechSynthesis-box">
        
        <el-button type="primary" v-show="showAddButton" @click="showAddPrimary=true;showBottomBox=false">新建会议实时转写
        </el-button>
        <div class="top-box" v-show="showAddPrimary">
          <h3>填写新增实时转写信息</h3>
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            
            <el-form-item label="会议主题" prop="title">
              <el-input v-model="form.title" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item label="主讲人" prop="accout">
              <el-input v-model="form.accout" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="beginMeeting" id="taste_button">开始</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="bottom-box" v-show="showBottomBox">
          
          <h3>实时会议语音转写</h3>
          
          <div class="voice-box">
            
            <div class="time-box">
              
              <div v-if="!haveVoice">
                
                <img :src="noVoiceImg">
                <span>未检测到话筒声音！~~~</span>
              </div>
              
              <div v-else>
                <span class="start-taste-line">
    	              <hr class="hr hr1">
    	              <hr class="hr hr2">
    	              <hr class="hr hr3">
    	              <hr class="hr hr4">
    	              <hr class="hr hr5">
    	              <hr class="hr hr6">
    	              <hr class="hr hr7">
    	              <hr class="hr hr8">
    	              <hr class="hr hr9">
    	              <hr class="hr hr10">
                </span>
              </div>
            </div>
          </div>
          <div class="voice-content" ref="voiceContentHtml">
            <el-input
              v-if=" isEditable"
              type="textarea"
              :rows="10"
              maxlength="20000"
              show-word-limit
              placeholder="请输入内容" class="voice-content-input"
              v-model="voiceContent"
            >
            </el-input>
            <p v-else>{
       { voiceContent }}</p>
          </div>
          <div class="button-box">
            
            
            <div class="btn2">
              <el-button type="danger" class="end-btn" @click="finish">结束</el-button>
              
            </div>
          </div>
        </div>
    
    
      </div>
    </template>
    
    <script>
    import myWaveSurfer from '@/components/MyWaveSurfer/index'
    import { addMeeting, finishMeeting } from '@/api/web/onlineAst'
    import '@/api/onlineAst/index.css'
    import '@/api/onlineAst/audio-data.js'
    import { HZRecorder } from '@/utils/HZRecorder.js'
    import { Loading } from 'element-ui'
    import { getToken } from "@/utils/auth";
    let loading;
    
    const startLoading = () => {
      loading = Loading.service({
        lock: true,
        text: '正在保存中...',
        background: 'rgba(0,0,0,0.7)'
      })
    }
    
    // import Recorder from 'js-audio-recorder'
    // const lamejs = require('lamejs')
    // const recorder = new Recorder({
    //     sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
    //     sampleRate: 48000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
    //     numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
    //     // compiling: false, // (0.x版本中生效,1.x增加中)  是否边录边转换，默认是false
    // })
    
    // var vm = null;
    
    // // 绑定事件-打印的是当前录音数据
    // recorder.onprogress = function(params) {
    //     // console.log('--------------START---------------')
    //     // console.log('录音时长(秒)', params.duration);
    //     // console.log('录音大小(字节)', params.fileSize);
    //     // console.log('录音音量百分比(%)', params.vol);
    //     console.log('params');
    //     console.log(params);
    
    //     // console.log('--------------END---------------')
    //     vm.sendData(params.data)
    // }
    
    export default {
      name: 'onlineConference',
      components: {
        myWaveSurfer
      },
      data() {
        return {
          noVoiceImg: require('./../../../../src/assets/image/novoice.png'),
          haveVoice: false,//默认无声
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: '',
            title: '',
            accout: '',
            userName: ''
          },
          notSupportTip: '请试用chrome浏览器且域名为localhost或127.0.0.1测试',
          isRecordEnd: false,
          bizId: '',
          userName: '',
          state: 'ing',
          ws: undefined,
          password: '888888',
          path: 'ws://127.0.0.1:8080/websocket/onlineVoice/realTimeTrans/{userName}/{password}/{bizId}',
          voiceSrc: '',
          // voiceSrc: 'http://192.168.3.174:8081/profile/uploadPath/tempSynthesisVoice/test.mp3',
          voiceContent: '',
          isEditable: false,
          showAddButton: true,
          showAddPrimary: false,
          showBottomBox: false,
          // 表单校验
          rules: {
            title: [
              { required: true, message: '主题不能为空', trigger: 'blur' }
            ],
            accout: [
              { required: true, message: '主讲人不能为空', trigger: 'blur' }
            ]
          }
        }
      },
      // created: function() {
      //   vm = this
      // },
      methods: {
        init: function() {
          try {
            //
            // debugger
            window.AudioContext = window.AudioContext || window.webkitAudioContext
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
            window.URL = window.URL || window.webkitURL
    
            // audio_context = new AudioContext;
            console.log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'))
          } catch (e) {
            alert('No web audio support in this browser!')
          }
          // debugger
          let _that = this
          navigator.getUserMedia({ audio: true }, function(stream) {
            _that.recorder = new HZRecorder(stream)
            // debugger
            console.log('初始化完成:')
            _that.recorder.start()
            _that.connectWebsocket()
            console.log('开始录音')
            console.log('stream:')
            console.log(stream)
    
            let audioContext = new AudioContext
            // 将麦克风的声音输入这个对象
            let mediaStreamSource = audioContext.createMediaStreamSource(stream)
            // 创建一个音频分析对象，采样的缓冲区大小为4096，输入和输出都是单声道
            let scriptProcessor = audioContext.createScriptProcessor(4096, 1, 1)
            // 将该分析对象与麦克风音频进行连接
            mediaStreamSource.connect(scriptProcessor)
            // 此举无甚效果，仅仅是因为解决 Chrome 自身的 bug
            scriptProcessor.connect(audioContext.destination)
            // 开始处理音频
            scriptProcessor.onaudioprocess = function(e) {
              // 获得缓冲区的输入音频，转换为包含了PCM通道数据的32位浮点数组
              let buffer = e.inputBuffer.getChannelData(0)
              // 获取缓冲区中最大的音量值
              let maxVal = Math.max.apply(Math, buffer)
              // 显示音量值
              // console.log('显示音量：')
              //
              // console.log(Math.round(maxVal * 100))
              // 如果有声音的话，值为true,通过语音流去判断话筒是否有声音
              if (Math.round(maxVal * 100) > 0) {
    
                _that.haveVoice = true
                _that.$set(_that, 'haveVoice', true)
              } else {
                _that.haveVoice = false
                _that.$set(_that, 'haveVoice', false)
              }
            }
    
          }, function(e) {
            console.log('No live audio input: ' + e)
          })
        },
        connectWebsocket() {
          var url = 'ws://10.10.0.54:8980/websocket/onlineVoice/realTimeTrans/' + this.userName + '/' + this.bizId
          // var url = 'ws://127.0.0.1:8081/websocket/onlineVoice/realTimeTrans/' + this.userName + '/' + this.bizId;
    
          //  debugger
          if ('WebSocket' in window) {
            this.ws = new WebSocket(url)
            console.log('this.ws')
            console.log(this.ws)
          } else if ('MozWebSocket' in window) {
            this.ws = new MozWebSocket(url)
          } else {
            alert(notSupportTip + '2')
            return null
          }
          let _that = this
          this.ws.onopen = (e) => {
    
            console.log('this.ws.onopen')
            if (_that.ws.readyState !== 1) {
              return
            }
    
            var buffer = _that.recorder.getBuffer()
            var audioData = buffer.splice(0, 1280)
    
            // _that.ws.send(new Int8Array(audioData))
    
            _that.handlerInterval = setInterval(() => {
              // websocket未连接
              if (_that.ws.readyState !== 1) {
                console.log('websocket未连接')
                clearInterval(_that.handlerInterval)
                return
              }
              if (buffer.length == 0 && _that.state == 'end') {
                // _that.ws.send('{\"end\": true}')
                _that.ws.send('end')
                console.log('发送结束标识')
    
                var blob = this.recorder.upload()
                var fd = new FormData()
                fd.append('file', blob)
                fd.append('bizId', this.bizId)
                fd.append('content', this.voiceContent)
                var xhr = new XMLHttpRequest()
    
                loading.close()
                this.$notify({
                  title: '保存成功',
                  message: '',
                  type: 'success'
                })
                this.showBottomBox = false
                this.showAddButton = true
    
                // xhr.open('POST', '/dev-api/web/onlineAst/finishMeeting')
                xhr.open('POST', '/prod-api/web/onlineAst/finishMeeting')
                xhr.setRequestHeader('Authorization', 'Bearer ' + getToken());
                xhr.send(fd)
    
                clearInterval(_that.handlerInterval)
                location.reload()
                return
              }
              var audioData = buffer.splice(0, 1280)
              if (audioData.length > 0) {
                _that.ws.send(new Int8Array(audioData))
              }
            }, 40)
          }
          this.ws.onmessage = (e) => {
            // this.config.onMessage && this.config.onMessage(e)
            this.wsOnMessage(e)
          }
          this.ws.onerror = (e) => {
            // this.stop()
            console.log('关闭连接ws.onerror')
          }
          this.ws.onclose = (e) => {
            // this.stop()
            console.log('关闭连接ws.onclose')
          }
    
        },
        wsOnMessage(e) {
          let jsonData = JSON.parse(e.data)
          console.log('jsonData')
          console.log(jsonData)
          if (jsonData.data == undefined || jsonData.data == null) {
            return
          }
          let msgData = this.byteToString(jsonData.data)
    
          let tempObj = JSON.parse(msgData)
          if (tempObj.msgtype != 'sentence') {
            return
          }
    
          let str = ''
          if (tempObj.ws == undefined || tempObj.ws == null) {
            return
          }
    
          tempObj.ws.forEach(k => {
            k.cw.forEach(l => {
              str += l.w
            })
          })
          console.log('str')
          console.log(str)
    
          this.voiceContent += str
        },
        //byte数组转字符串
        byteToString(utf8Bytes) {
          if (typeof utf8Bytes === 'string') {
            return utf8Bytes
          }
          console.log('utf8Bytes')
          console.log(utf8Bytes)
          var unicodeStr = ''
          for (var pos = 0; pos < utf8Bytes.length;) {
            var flag = utf8Bytes[pos]
            var unicode = 0
            if ((flag >>> 7) === 0) {
              unicodeStr += String.fromCharCode(utf8Bytes[pos])
              pos += 1
    
            } else if ((flag & 0xFC) === 0xFC) {
              unicode = (utf8Bytes[pos] & 0x3) << 30
              unicode |= (utf8Bytes[pos + 1] & 0x3F) << 24
              unicode |= (utf8Bytes[pos + 2] & 0x3F) << 18
              unicode |= (utf8Bytes[pos + 3] & 0x3F) << 12
              unicode |= (utf8Bytes[pos + 4] & 0x3F) << 6
              unicode |= (utf8Bytes[pos + 5] & 0x3F)
              unicodeStr += String.fromCodePoint(unicode)
              pos += 6
    
            } else if ((flag & 0xF8) === 0xF8) {
              unicode = (utf8Bytes[pos] & 0x7) << 24
              unicode |= (utf8Bytes[pos + 1] & 0x3F) << 18
              unicode |= (utf8Bytes[pos + 2] & 0x3F) << 12
              unicode |= (utf8Bytes[pos + 3] & 0x3F) << 6
              unicode |= (utf8Bytes[pos + 4] & 0x3F)
              unicodeStr += String.fromCodePoint(unicode)
              pos += 5
    
            } else if ((flag & 0xF0) === 0xF0) {
              unicode = (utf8Bytes[pos] & 0xF) << 18
              unicode |= (utf8Bytes[pos + 1] & 0x3F) << 12
              unicode |= (utf8Bytes[pos + 2] & 0x3F) << 6
              unicode |= (utf8Bytes[pos + 3] & 0x3F)
              unicodeStr += String.fromCodePoint(unicode)
              pos += 4
    
            } else if ((flag & 0xE0) === 0xE0) {
              unicode = (utf8Bytes[pos] & 0x1F) << 12
    
              unicode |= (utf8Bytes[pos + 1] & 0x3F) << 6
              unicode |= (utf8Bytes[pos + 2] & 0x3F)
              unicodeStr += String.fromCharCode(unicode)
              pos += 3
    
            } else if ((flag & 0xC0) === 0xC0) { //110
              unicode = (utf8Bytes[pos] & 0x3F) << 6
              unicode |= (utf8Bytes[pos + 1] & 0x3F)
              unicodeStr += String.fromCharCode(unicode)
              pos += 2
    
            } else {
              unicodeStr += String.fromCharCode(utf8Bytes[pos])
              pos += 1
            }
          }
          return unicodeStr
        },
        beginMeeting() {
          this.$refs['form'].validate(valid => {
            if (valid) {
              console.log('开始会议')
              this.showAddButton = false
              this.showAddPrimary = false
              this.showBottomBox = true
              this.userName = this.$store.state.user.name
              // this.password = '888888';
              addMeeting(this.form).then(Response => {
                this.bizId = Response.data.bizId
                this.userName = Response.data.operator
                this.init()
              })
            }
          })
        },
        finish() {
          this.state = 'end'
          this.recorder.stop()
          startLoading();
    
          // // var blob = this.recorder.upload()
          // var fd = new FormData()
          // // fd.append('file', blob)
          // fd.append('bizId', 1000022)
          // fd.append('content', '5266666666')
          // var xhr = new XMLHttpRequest()
          // xhr.open('POST', '/dev-api/web/onlineAst/finishMeeting')
          // // xhr.setRequestHeader('httpType', 'ajax');
          // xhr.setRequestHeader('Authorization', 'Bearer ' + getToken());
    
          
          // // xhr.open('POST', '/prod-api/web/onlineAst/finishMeeting')
          // xhr.send(fd)
        }
    
      }
    }
    
    </script>
    <style>
    .top-box{
    
    }
    </style>
    <style lang="scss" scoped>
    .speechSynthesis-box {
      //background-color: lightskyblue;
      margin: 30px 20px;
      min-width: 990px;
    
      .top-box {
        padding: 20px;
        border: 1px solid rgb(220, 223, 230);
        margin: 30px 0;
      }
    
      .bottom-box {
        padding: 20px;
        border: 1px solid rgb(220, 223, 230);
        margin: 30px 0;
        //播放器
        .voice-box {
          width: 100%;
    
          .time-box {
            margin-top: 40px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
    
            img {
              width: 30px;
            }
    
            .total-time {
              margin-left: 20px;
            }
    
            .start-taste-line {
              display: inline-block;
              margin-right: 20px;
            }
    
            .start-taste-line hr {
              background-color: #187cff;
              width: 3px;
              height: 10px;
              margin: 0 5px;
              display: inline-block;
              border: none;
            }
          }
        }
    
        //识别出来的内容框
        .voice-content {
          margin: 20px auto;
          border: 1px solid rgb(220, 223, 230);
          border-radius: 10px;
    
          p {
            padding: 10px;
            margin: 0;
            height: 300px;
            overflow-x: hidden;
            overflow-y: auto;
            line-height: 30px;
          }
        }
    
        //按钮
        .button-box {
          margin-top: 30px;
          width: 40%;
          float: right;
          line-height: 76px;
          //padding-left: 12%;
          //padding-right: 10%;
          .btn1, .btn2 {
            display: inline-block;
            //padding-left: 10%;
            text-align: center;
          }
    
          .btn1 {
            width: 50%;
          }
    
          .btn2 {
            width: 50%;
    
            .end-btn {
              margin-right: 10%;
            }
          }
        }
      }
    
    
    }
    </style>

这个问题也浪费了很久。以为很难。其实不难。