ArrayBuffer 解码

ArrayBuffer 解码

//1.h5解码
arrayBufferToString(buffer, encoding = 'utf-8') {
  const decoder = new TextDecoder(encoding);
  return decoder.decode(buffer);
}

//2.app解码
arrayBufferToStringApp(array) { //app解码
	var out, i, len, c;
	var char2, char3;
	if (array instanceof ArrayBuffer) {
		array = new Uint8Array(array);
	}

	out = "";
	len = array.length;
	i = 0;
	while (i < len) {
	      c = array[i++];
	      switch (c >> 4) {
				case 0:
				case 1:
				case 2:
				case 3:
				case 4:
				case 5:
				case 6:
				case 7:
				// 0xxxxxxx
				out += String.fromCharCode(c);
					break;
				case 12:
				case 13:
				// 110x xxxx   10xx xxxx
				char2 = array[i++];
				out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
				break;
				case 14:
				// 1110 xxxx  10xx xxxx  10xx xxxx
				char2 = array[i++];
				char3 = array[i++];
				out += String.fromCharCode(((c & 0x0F) << 12) |
						((char2 & 0x3F) << 6) |
					    ((char3 & 0x3F) << 0));
				break;
			}
		}

	return out;
},

// #ifdef H5
	const text = this.arrayBufferToString(res.data)
	console.log(JSON.parse(text), '接收h5')
// #endif
// #ifdef APP-PLUS
	const text = this.arrayBufferToStringApp(res.data)
	console.log(JSON.parse(text), '接收app')
// #endif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
将音频Blob对象转换为ArrayBuffer与上面的示例相同,可以使用上面提到的`blobToArrayBuffer`函数。接下来,需要使用Web Audio API来读取ArrayBuffer并显示波形。 具体实现步骤如下: 1. 创建一个AudioContext对象。 ```javascript var audioContext = new AudioContext(); ``` 2. 创建一个AudioBufferSourceNode节点,并将其连接到AudioContext的destination。 ```javascript var sourceNode = audioContext.createBufferSource(); sourceNode.connect(audioContext.destination); ``` 3. 将ArrayBuffer转换为AudioBuffer对象。 ```javascript audioContext.decodeAudioData(arrayBuffer, function(decodedData) { sourceNode.buffer = decodedData; }); ``` 4. 使用AnalyserNode节点来获取音频数据。 ```javascript var analyserNode = audioContext.createAnalyser(); analyserNode.fftSize = 2048; // 设置FFT大小 sourceNode.connect(analyserNode); ``` 5. 使用Canvas绘制波形。 ```javascript var canvas = document.getElementById("canvas"); var canvasContext = canvas.getContext("2d"); function draw() { requestAnimationFrame(draw); var bufferLength = analyserNode.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); analyserNode.getByteTimeDomainData(dataArray); canvasContext.fillStyle = "rgb(200, 200, 200)"; canvasContext.fillRect(0, 0, canvas.width, canvas.height); canvasContext.lineWidth = 2; canvasContext.strokeStyle = "rgb(0, 0, 0)"; canvasContext.beginPath(); var sliceWidth = canvas.width * 1.0 / bufferLength; var x = 0; for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = v * canvas.height/2; if(i === 0) { canvasContext.moveTo(x, y); } else { canvasContext.lineTo(x, y); } x += sliceWidth; } canvasContext.lineTo(canvas.width, canvas.height/2); canvasContext.stroke(); } draw(); ``` 这里创建了一个canvas元素,并使用Canvas绘制音频波形。需要注意的是,绘制波形的代码需要在音频数据解码完成后调用,并且需要使用requestAnimationFrame函数来不断绘制波形。完整的代码如下: ```javascript var audioContext = new AudioContext(); function blobToArrayBuffer(blob, callback) { var reader = new FileReader(); reader.onload = function() { callback(reader.result); } reader.readAsArrayBuffer(blob); } function drawWaveform(arrayBuffer) { var sourceNode = audioContext.createBufferSource(); sourceNode.connect(audioContext.destination); audioContext.decodeAudioData(arrayBuffer, function(decodedData) { sourceNode.buffer = decodedData; var analyserNode = audioContext.createAnalyser(); analyserNode.fftSize = 2048; sourceNode.connect(analyserNode); var canvas = document.getElementById("canvas"); var canvasContext = canvas.getContext("2d"); function draw() { requestAnimationFrame(draw); var bufferLength = analyserNode.frequencyBinCount; var dataArray = new Uint8Array(bufferLength); analyserNode.getByteTimeDomainData(dataArray); canvasContext.fillStyle = "rgb(200, 200, 200)"; canvasContext.fillRect(0, 0, canvas.width, canvas.height); canvasContext.lineWidth = 2; canvasContext.strokeStyle = "rgb(0, 0, 0)"; canvasContext.beginPath(); var sliceWidth = canvas.width * 1.0 / bufferLength; var x = 0; for(var i = 0; i < bufferLength; i++) { var v = dataArray[i] / 128.0; var y = v * canvas.height/2; if(i === 0) { canvasContext.moveTo(x, y); } else { canvasContext.lineTo(x, y); } x += sliceWidth; } canvasContext.lineTo(canvas.width, canvas.height/2); canvasContext.stroke(); } draw(); }); } var audioBlob = new Blob([/*音频数据*/], {type: "audio/wav"}); blobToArrayBuffer(audioBlob, function(arrayBuffer) { drawWaveform(arrayBuffer); }); ``` 这里的`audioBlob`变量是一个包含音频数据的Blob对象,需要将其替换为实际的音频Blob对象。同时,需要在HTML代码中添加一个canvas元素: ```html <canvas id="canvas"></canvas> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值