初识web Worker（二）

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

以前经常听说过web worker，但是见过没有过真正的使用场景。然后目前要做一个项目在讨论中发现可以用到web worker，刚好研究一下web worker是如何使用的。

书接上文初识web Worker（一）

3.基本用法

• worker线程

// worker线程内部监听message事件，self代表worker线程自身，即子线程的全局对象
// 也可以使用`self.onmessage`指定。监听函数的参数是一个事件对象，它的data属性包含主线程发来的数据。
// self.postMessage()方法用来向主线程发送消息。
self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);
self.onmessage = function(e){
  self.postMessage('You said: ' + e.data);
}

// 使用完毕，为了节省系统资源，必须关闭worker
self.close()

4.数据通信

主线程与worker线程之间的通信内容可以是：文本、对象、二进制数据。

// 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {
  uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);

// Worker 线程
self.onmessage = function (e) {
  var uInt8Array = e.data;
  postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());
  postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
};

5.实例

// worker线程
self.onmessage = function(e){
    transAudioData.transcode(e.data)
}
let transAudioData = {
    transcode(audioData) {
      let output = transAudioData.to16kHz(audioData)
      output = transAudioData.to16BitPCM(output)
      output = Array.from(new Uint8Array(output.buffer))
      self.postMessage(output)
      // return output
    },
    to16kHz(audioData) {
      var data = new Float32Array(audioData)
      var fitCount = Math.round(data.length * (16000 / 44100))
      var newData = new Float32Array(fitCount)
      var springFactor = (data.length - 1) / (fitCount - 1)
      newData[0] = data[0]
      for (let i = 1; i < fitCount - 1; i++) {
        var tmp = i * springFactor
        var before = Math.floor(tmp).toFixed()
        var after = Math.ceil(tmp).toFixed()
        var atPoint = tmp - before
        newData[i] = data[before] + (data[after] - data[before]) * atPoint
      }
      newData[fitCount - 1] = data[data.length - 1]
      return newData
    },
    to16BitPCM(input) {
      var dataLength = input.length * (16 / 8)
      var dataBuffer = new ArrayBuffer(dataLength)
      var dataView = new DataView(dataBuffer)
      var offset = 0
      for (var i = 0; i < input.length; i++, offset += 2) {
        var s = Math.max(-1, Math.min(1, input[i]))
        dataView.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true)
      }
      return dataView
    },
}