如何在html WebAudio Api中播放由ROS audio_capture生成的流式mp3消息(uint8字节)

时间:2018-01-19 05:16:59

标签: websocket mp3 ros web-audio-api audio-capture

我正在尝试使用WebAudio api在html中播放由ROS audio_capture生成的流式mp3消息(uint8字节)。

消息由ROS audio_capture生成,它将mp3发布为uint8字节。我抓住每条消息并尝试使用网络音频api在Web浏览器中播放。

以下是示例mp3消息:

data: [255, 243, 152, 68, 193, 22, 185, 255, 114, 223, 97, 38, 124, 172, 27, 246, 218, 254, 194, 80, 189, 84, 180, 209, 56, 254, 114, 135, 214, 30, 151, 78, 75, 159, 104, 148, 93, 149, 152, 155, 66, 68, 77, 137, 197, 34, 132, 145, 8, 138, 163, 10, 159, 17, 160, 23, 78, 4, 43, 174, 73, 201, 40, 63, 17, 28, 209, 153, 70, 81, 180, 42, 180, 226, 199, 155, 79, 189, 189, 51, 135, 145, 183, 139, 206, 179, 81, 185, 55, 158, 158, 89, 168, 133, 27, 112, 101, 139, 143, 24, 73, 193, 5, 201, 195, 32, 81, 205, 100, 189, 224, 214, 122, 225, 61, 221, 74, 155, 134, 73, 229, 200, 24, 71, 83, 118, 86, 245, 166, 149, 53, 187, 113, 23, 17, 124, 43, 40, 232, 206, 60, 171, 168, 41, 158, 44, 112, 218, 54, 123, 29, 123, 163, 99, 79, 94, 174, 49, 242, 214, 50, 238, 153, 95, 57, 221, 223, 129, 247, 35, 157, 50, 77, 52, 69, 119, 110, 70, 44, 83, 84, 85, 141, 220, 190, 12, 85, 81, 24, 2, 122, 169, 36, 150, 238, 0, 232, 21, 230, 42, 96, 104, 226, 58, 78, 169, 244, 172, 228, 145, 76, 173, 170, 129, 62, 173, 50, 73, 91, 246, 17, 201, 6, 36, 101, 70, 69, 42, 146, 182, 124, 54, 11, 164, 78, 43, 44, 166, 188, 233, 96, 170, 171, 123, 66, 202, 107, 172, 152, 150, 143, 54, 68, 85, 70, 15, 3, 147, 69, 205, 25, 64, 210, 175, 185, 48, 165, 166, 94, 101, 85, 3, 36, 66, 99, 232, 153, 102, 196, 75, 152, 133, 79, 206, 202, 226, 158, 140, 158, 69, 221, 1, 70, 217, 193, 204, 138, 48, 138, 76, 127, 88, 211, 52, 173, 249, 85, 63, 201, 204, 210, 86, 42, 28, 135, 255, 187, 122, 220, 51, 27, 45, 238, 104, 73, 101, 165, 63, 190, 110, 102, 247, 66, 218, 251, 79, 131, 181, 44, 92, 167, 133, 160, 155, 228, 102, 119, 151, 159, 105, 85, 235, 145, 60, 252, 125, 120, 73, 211, 98]

在下面提到的base64解码之前从音频源接收的原始数据,让我知道它是不是有效的mp3格式。

//OYRM0VceN1L2EjfqzL/sJWwwydElS3xJYcJKpYaLXtfXvddaz6w5T+8w8/p6du6oWOCT6zoDp+zx9GnhKa8j0MGzMgZEs3bs5Z+x0InDcmNueXnI5J+eVwfp9emvuEZ2Oy2mNa7P3YYm+eK90yG6ktKsaInN/SpHvPlpxWo92+lBsUa9GHQagbEyziEbey/u8pi28oYYYW6B5mt0jZk1Ob7IFLsMIKSlOT3W2WXmcPS1Mhc0KIUiDkQ4IelkEbh6+OfQ/2llZ0karuqgLm5UZmFiYKwpE4wJMp0skT+cEmnaGUBIwvvpdXGyMCIEEEJAuQRTlJZtZoV0xGzMpG5tM+6ae6QKo5vTV2cmIBtiktmtOaqyQgxndQE/iCQQLCgpB8HVYUHBB0ldKDBBtGQKKkMKijjKVRoZIC/TYqVBS48IOBsoQsTiGpCygM3vbJNoZglxABBQerkwRDi7ipiISrDbitccaj

我最初在javascript数组中持有它,然后将其转换为ArrayBuffer,然后将ArrayBuffer传递给decodeAudioData(),在那里我得到以下错误

Error in promise : Unable to decode Audio Data

以下是代码:

function playByteArray(byteArray) {

    var arrayBuffer = new ArrayBuffer(byteArray.length);
    var bufferView = new Uint8Array(arrayBuffer);
    for (i = 0; i < byteArray.length; i++) {
      bufferView[i] = byteArray[i];
    }

    context.decodeAudioData(arrayBuffer, function(buffer) {
        buf = buffer;
        play();
    });
}

// Play the loaded file
function play() {
    // Create a source node from the buffer
    var source = context.createBufferSource();
    source.buffer = buf;
    // Connect to the final output node (the speakers)
    source.connect(context.destination);
    // Play immediately
    source.start(0);
}

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您的大量音频数据可能尚未完成。无论如何,您应该考虑使用MediaSource Extensions完成此任务。这样,您可以从源流式传输,让浏览器处理剩下的工作。