JavaScript (Node.js) IEEE 754 Single precision Floating-Point (32-bit) binary conversion from and to both Hex and Bin

float32encoding.js

/* ##### float32encoding.js #####
MIT License

- Forked 'toFloat' from https://gist.github.com/laerciobernardo/498f7ba1c269208799498ea8805d8c30
- Forked 'toHex' from stackoverflow answer https://stackoverflow.com/a/47187116/10522253
- Modifyed by: Jozo132 (https://github.com/Jozo132)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

const Float32ToHex = (float32) => {
    const getHex = i => ('00' + i.toString(16)).slice(-2);
    var view = new DataView(new ArrayBuffer(4))
    view.setFloat32(0, float32);
    return Array.apply(null, { length: 4 }).map((_, i) => getHex(view.getUint8(i))).join('');
}

const Float32ToBin = (float32) => {
    const HexToBin = hex => (parseInt(hex, 16).toString(2)).padStart(32, '0');
    const getHex = i => ('00' + i.toString(16)).slice(-2);
    var view = new DataView(new ArrayBuffer(4))
    view.setFloat32(0, float32);
    return HexToBin(Array.apply(null, { length: 4 }).map((_, i) => getHex(view.getUint8(i))).join(''));
}

const HexToFloat32 = (str) => {
    var int = parseInt(str, 16);
    if (int > 0 || int < 0) {
        var sign = (int >>> 31) ? -1 : 1;
        var exp = (int >>> 23 & 0xff) - 127;
        var mantissa = ((int & 0x7fffff) + 0x800000).toString(2);
        var float32 = 0
        for (i = 0; i < mantissa.length; i += 1) { float32 += parseInt(mantissa[i]) ? Math.pow(2, exp) : 0; exp-- }
        return float32 * sign;
    } else return 0
}

const BinToFloat32 = (str) => {
    var int = parseInt(str, 2);
    if (int > 0 || int < 0) {
        var sign = (int >>> 31) ? -1 : 1;
        var exp = (int >>> 23 & 0xff) - 127;
        var mantissa = ((int & 0x7fffff) + 0x800000).toString(2);
        var float32 = 0
        for (i = 0; i < mantissa.length; i += 1) { float32 += parseInt(mantissa[i]) ? Math.pow(2, exp) : 0; exp-- }
        return float32 * sign;
    } else return 0
}

// Full example
var test_value = -0.3;
console.log(`Input value (${test_value}) => hex (${Float32ToHex(test_value)}) [${Math.ceil(Float32ToHex(test_value).length / 2)} bytes] => float32 (${HexToFloat32(Float32ToHex(test_value))})`);
console.log(`Input value (${test_value}) => binary (${Float32ToBin(test_value)}) [${Float32ToBin(test_value).length} bits] => float32 (${BinToFloat32(Float32ToBin(test_value))})`);

/* DEBUG OUTPUT:
  Input value (-0.3) => hex (be99999a) [4 bytes] => float32 (-0.30000001192092896)
  Input value (-0.3) => binary (10111110100110011001100110011010) [32 bits] => float32 (-0.30000001192092896)
*/

float32encoding.min.js

/* ##### float32encoding.min.js #####
MIT License

- Forked 'toFloat' from https://gist.github.com/laerciobernardo/498f7ba1c269208799498ea8805d8c30
- Forked 'toHex' from stackoverflow answer https://stackoverflow.com/a/47187116/10522253
- Modifyed by: Jozo132 (https://github.com/Jozo132)

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

const Float32ToHex = float32 => { const getHex = i => ('00' + i.toString(16)).slice(-2); var view = new DataView(new ArrayBuffer(4)); view.setFloat32(0, float32); return Array.apply(null, { length: 4 }).map((_, i) => getHex(view.getUint8(i))).join(''); }
const Float32ToBin = float32 => parseInt(Float32ToHex(float32), 16).toString(2).padStart(32, '0');

const ToFloat32 = num => { if (num > 0 || num < 0) { var sign = (num >>> 31) ? -1 : 1; var exp = (num >>> 23 & 0xff) - 127; var mantissa = ((num & 0x7fffff) + 0x800000).toString(2); var float32 = 0; for (i = 0; i < mantissa.length; i += 1) { float32 += parseInt(mantissa[i]) ? Math.pow(2, exp) : 0; exp-- } return float32 * sign; } else return 0 }
const HexToFloat32 = str => ToFloat32(parseInt(str, 16));
const BinToFloat32 = str => ToFloat32(parseInt(str, 2));


// ------ FULL EXAMPLE ------
var value = -0.3; // JS number variable

// FLOAT32 <===> HEX
var f32_hex = Float32ToHex(value); // JS number   =>   HEX string of a Float32 standard number 
var f32_hex_inverse = HexToFloat32(f32_hex); // HEX string of a Float32 standard number   =>   JS number

// FLOAT32 <===> BIN
var f32_bin = Float32ToBin(value); // JS number   =>   HEX string of a Float32 standard number 
var f32_bin_inverse = BinToFloat32(f32_bin); // HEX string of a Float32 standard number   =>   JS number

console.log(`Input value (${value}) => hex (${f32_hex}) [${Math.ceil(f32_hex.length / 2)} bytes] => float32 (${f32_bin_inverse})`);
console.log(`Input value (${value}) => binary (${f32_bin}) [${f32_bin.length} bits] => float32 (${f32_bin_inverse})`);

/* DEBUG OUTPUT:
  Input value (-0.3) => hex (be99999a) [4 bytes] => float32 (-0.30000001192092896)
  Input value (-0.3) => binary (10111110100110011001100110011010) [32 bits] => float32 (-0.30000001192092896)
*/

That results in a flattened array having length 11264 where the length of the Float32Array from decodeAudioData() is 22528 (11264*2). The original hexadecimal string length is 90112 (11264*8) https://plnkr.co/edit/VenuQyeKErEy66PHtpp6?p=preview.

The original code which encodes to hexadecimal https://github.com/vi/mkvparse/blob/master/mkv2xml.

Can improve performance once have a working example of the conversion algorithm.

How to import Buffer module without using nodejs?

The concept is roughly to write/read (Matroska^TM <=> XML) segments (128 element Float32Arrays for use with AudioWorkletProcessor) PCM encoded audio files. Eventually with the ability to substitute the N times larger PCM for various other codecs, e.g., Opus, Vorbis, et al. to overcome using decodeAudioData() due to memory consumption (and the main thread).

How to import Buffer module without using nodejs?

You will need to convert this Buffer library with browserify and attach the script to the web page

Did you try running my code? I'm not sure how the output should look like and what the requirements are.
Some benchmarks need to be done to see if this solution works reliably.

Ok.

The conversion should be possible without using nodejs or a library.

Using HexToFloat32 alone does not output the expected result.

Using HexToFloat32 alone does not output the expected result.

What is the expected result? There are 4 encoding types for Float, each giving a very different output

Did you try running my code?

Yes. See the linked plnkr at https://gist.github.com/Jozo132/2c0fae763f5dc6635a6714bb741d152f#gistcomment-3171409. (Note, Firefox does not currently support decoding PCM in Matroska container, Chrome or Chromium needs to be used to verify results.)

All of the necessary input code is included.

The expected result is a Float32Array that has the same values or outputs the same or similar audio as the Float32Array from getChannelData(0) of the AudioBuffer created by Web Audio API decodeAudioData(). That is, for the resulting Float32Array to be indistinguishable from the Float32Array from decodeAudioData() as to audio output from a buffer source or AudioWorkletProcessor (WebAudio/web-audio-api-v2#61 (comment)).

We know that parsing and playback of the input is possible due to code provided by the author of mkvparse

$ cat mediarecorder_pcm.xml | xml2 | grep '/mkv2xml/Segment/Cluster/SimpleBlock/data=' | cut -f2-2 -d= | xxd -r -p | ffplay -f f32le -ar 22050 -ac 1 -

That should also be possible using native code shipped with the FOSS browser. Or, conclusively determine that the conversion is not possible using code shipped with the browser.

Getting Bus error (core dumped) at the terminal following running several un-related tests. Will probably have to re-install OS before trying to import Buffer module. Though am trying to not use a library or import non-native modules to achieve the requirement, else could use Native Messaging.

In the browser, without using nodejs?
This site https://www.scadacore.com/tools/programming-calculators/online-hex-converter/ outputs the correct value for "9201c93b" input. Yet none of the conversion formulas using JavaScript result in audio output reflecting the original file.

Could you please copy-paste the actual desired output? I'm blind here.
If "9201c93b" is one float32 number, there can only be 11264 elements in the given array, just as I have given the answer.

Your code does in fact output the expected result.

const audioBuffer = new AudioBuffer({length: 11264, numberOfChannels: 1, sampleRate: 22050});
audioBuffer.getChannelData(0).set(new Float32Array(result));
const source = new AudioBufferSourceNode(ac, {buffer: audioBuffer});
source.connect(ac.destination);
source.start();

When new AudioContext() is executed without specifying sampleRate the sampleRate is set to 44100 by default which affects the result of decodeAudioData(). When adjusting the code to const ac = new AudioContext({sampleRate:22050, numberOfChannels:1}); both results have length of 11264. The AudioBufferSourceNode created when sampleRate is 44100 will play the AudioBuffer which length of 22528.

Thanks for sharing the code and helping here.

Can you explain the purpose of the RegExp in this part

.match(/.{1,8}/g).map(x => x.match(/.{1,2}/g).reverse().join('')

of the code?

What is the corresponding reverse of the RegExp combinations, that is, Float32Array to hexadecimal?

Can you explain the purpose of the RegExp in this part

.match(/.{1,8}/g).map(x => x.match(/.{1,2}/g).reverse().join('')

of the code?

Simply put it splits up each 8 characters for hex value of each float32 in an array, then reverses pairs for little endian decoding and puts them back together for every float32 value.

'01234567ABCDEF01' --> [ '67452301', '01EFCDAB']

So in the end you can just map every array item to the correct Float32 value

What is the corresponding reverse of the RegExp combinations, that is, Float32Array to hexadecimal?

Inverse function to convert Float32Array to hex little endian buffer string is pretty simple:

let myFloatArray = [ 0.0 , 0.1 , 0.2 , 0.3 ]
let buffer_string = myFloatArray.map(f => Float32ToHex(f).match(/.{1,2}/g).reverse().join('')).join('')

Hello, this code is pretty good.
What is the license?

What is the license?

Hello, I guess we can go with MIT and keep the original head references at the top.
Is that OK?

Yes. thank you. 👍
I was thinking to be used as a simple terminal tool.