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)
*/

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.