音频可视化

发表于 | 分类于 | 评论数： | 阅读次数：

浏览器录音的实时识别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
let constraints = {
  audio: true,
  video: false
};
let getMedia = navigator.mediaDevices || navigator.webkitGetUserMedia;
if (getMedia) {
  getMedia.getUserMedia(constraints).then(mediaStream => {
    //音频可视化与实时语音识别
    //使用 audioContext 来分析音频流
    this.audioContext = new (window.AudioContext ||
      window.webkitAudioContext)();
    //初始化分析器
    this.initAnalyser();
    //获取输入的音频流
    let audioInput = this.audioContext.createMediaStreamSource(mediaStream);
    let compressScript = this.audioContext.createScriptProcessor();
    //缓冲区满的时候触发compressProgress方法,执行绘图和其他操作
    compressScript.onaudioprocess = this.compressProgress;
    //这里要把各个模块连接起来
    //音频输入连接分析器
    audioInput.connect(this.analyser);
    //分析器连接处理脚本
    this.analyser.connect(compressScript);
    //脚本连接输出
    compressScript.connect(this.audioContext.destination);
  });



}
//初始化分析器

initAnalyser() {
      this.analyser = this.audioContext.createAnalyser();
      this.analyser.fftSize = 128;
      this.bufferLength = this.analyser.frequencyBinCount;
      this.dataArray = new Uint8Array(this.bufferLength);
    },

//处理音频片段
compressProgress(e) {
    //绘图
      this.draw();
      //获取音频 buffer
      const buffer = e.inputBuffer.getChannelData(0);
      //音频 buffer 的处理脚本,这里用到了科大讯飞的实时语音识别 ws 接口
      const audioCompiler = new AudioCompiler();
      const compressedBuffer = audioCompiler.convertBuffer(buffer);
      const int8Array = new Int8Array(compressedBuffer.buffer);
      this.webSocket.send(int8Array);
    }



 draw() {
     //使用 canvas 绘图
      const canvas = document.getElementById("canvas");
      this.canvasCtx = canvas.getContext("2d");
      let cWidth = this.canvas.width,
        cHeight = this.canvas.height,
        barWidth = parseInt((1.8 * cWidth) / this.bufferLength),
        barHeight,
        x = 0;
      this.canvasCtx.clearRect(0, 0, cWidth, cHeight);
      //分析器获取音频数据“切片”
      this.analyser.getByteFrequencyData(this.dataArray);

      //把每个音频“切片”画在画布上
      for (var i = 0; i < this.bufferLength; i++) {
        barHeight = parseInt(1.4 * this.dataArray[i]);
        // this.canvasCtx.fillStyle = "rgb(27, 49, 114)";
        let color = `rgb(${i + 87}, ${6 * i + 174},${6 * i + 248})`;
        // console.log(color);
        this.canvasCtx.fillStyle = color;
        this.canvasCtx.fillRect(x, cHeight - barHeight, barWidth, barHeight);
        x += barWidth + 5;
      }
    },

video/audio 标签识别(包括文件以及直播流识别)

与上面唯一的区别是获取输入源的方式

1
2
3
4
5
//使用createMediaElementSource获取 video/audio 标签的音源analysis

this.audioInput = this.audioContext.createMediaElementSource(
  this.$refs.videoPlayer
);

样例:
WX20191223-154447@2x

thank u !