👨🏾 🕺🏿 🥙 जावास्क्रिप्ट में एक वेव फाइल को पार्स करना 💷 🛎️ 🦔

इस विषय की प्रेरणा के तहत बनाया गया।
सामान्य जावास्क्रिप्ट, जिसका उपयोग सभी को किया जाता है, वह फ़ाइल सिस्टम या बाइनरी डेटा के साथ काम करने के लिए उपकरण प्रदान नहीं करता है, इसलिए नीचे वर्णित सब कुछ नोड के बारे में होगा। js.

Wav फ़ाइल

तरंग डिजीटल ऑडियो डेटा के लिए एक प्रारूप है। यह एक मानक RIFF संरचना का उपयोग करता है। डेटा को 3 भागों में विभाजित किया जा सकता है

हैडर
प्रारूप अनुभाग
डेटा

अधिक डेटा हो सकता है, लेकिन इसका आमतौर पर उपयोग नहीं किया जाता है।

फ़ाइल पार्सिंग

var http = require('http'); var fs = require('fs'); var sys= require('sys') var Canvas = require('canvas');

हम उन मॉड्यूल को कनेक्ट करते हैं जिनकी हमें ज़रूरत होती है, हमें तरंग फ़ाइल की तरंग को खींचने के लिए नोड-कैनवास की आवश्यकता होती है।

 var path = '/my/files/TH.wav'; //   . var wave = {}; //          fs.readFile(path, function (err, data) { if (err) throw err; //         data

फ़ाइल पार्स हो रही है ...

हैडर

पहला भाग सबसे सरल है। इसे 4 बाइट्स के 3 टुकड़ों में भी विभाजित किया जा सकता है

फ़ाइल प्रकार होता है - "RIFF"
फ़ाइल का आकार
"तरंग" लेबल शामिल है

 var text = ''; var j = 0 for (var i = j; i < j + 4; i++) { text += String.fromCharCode(data[i]); } j = i; wave.type = text; //   - «RIFF» var text = ''; for (var i = j; i < j + 4; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.size = parseInt(text, 2); //     8    ,    .

यहां एक सूक्ष्मता है - डिफ़ॉल्ट रूप से, रीड बाइट्स को 10 वीं प्रणाली में स्थानांतरित किया जाता है, जो अतिरिक्त असुविधा पैदा करता है, इसलिए हम ऐडबाइट फ़ंक्शन को शुरू करते हैं, जो बाइट की शुरुआत में लापता बिट्स को जोड़ देगा।

 function addByte(byt) { while (8 != byt.length) { byt = '0' + byt; } return byt; }

 var text = ''; for (var i = j; i < j + 4; i++) { text += String.fromCharCode(data[i]); } j = i; console.log(j + ' Label -' + text); wave.label = text; // «wave»

डेटा प्रारूप अनुभाग

हेडर के ठीक बाद डेटा फॉर्मेट सेक्शन जाता है, यह कीवर्ड "fmt" से शुरू होता है

 var text = ''; for (var i = j; i < j + 4; i++) { text += String.fromCharCode(data[i]); //text += data[i].toString(16); } j = i;

इसके बाद फाइल विकल्प हैं।

आकार, बाइट	नाम	विवरण
4	चंक डेटा का आकार	फ़ाइल के बारे में डेटा रखने वाले बाइट्स की संख्या समाहित करता है
2	संपीड़न कोड	इसमें कोड होता है जो फ़ाइल संपीड़न की उपस्थिति को इंगित करता है (एक wav फ़ाइल में एमपीईजी द्वारा भी ध्वनि पिन की जा सकती है, लेकिन इन सुविधाओं का उपयोग नहीं किया जाता है), सबसे अधिक बार 1 होगा, जिसका अर्थ है पीसीएम / असम्पीडित, अर्थात्। कोई संपीड़न नहीं
2	चैनलों की संख्या	चैनलों की संख्या, wav फ़ाइल में मल्टी-चैनल रिकॉर्डिंग हो सकती है, उदाहरण के लिए 5.1
4	नमूना दर	नमूना दर, आमतौर पर 44100 - सीडी नमूना दर
4	प्रति सेकंड औसत बाइट्स	फ़ाइल बिटरेट करें
2	ब्लॉक संरेखित करें	ध्वनि का 1 फ्रेम जिसमें सभी चैनल स्थित हैं, अच्छी तरह से, या आप अलग-अलग कह सकते हैं - नमूना आकार
2	नमूना प्रति महत्वपूर्ण बिट्स	एक चैनल के फ्रेम को कूटने के लिए बिट्स (!) की संख्या

इसके अलावा, वेव फाइल बनाने वाले प्रोग्राम यहां कुछ भी लिख सकते हैं, जिन्हें अक्सर बाद में इन कार्यक्रमों द्वारा समझा जाता है।

 // extra bytes fmt var text = ''; for (var i = j; i < j + 4; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.extra_bytes_fmt = parseInt(text, 2); //Compression code var text = ''; for (var i = j; i < j + 2; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; var compression = ''; switch (parseInt(text, 2)) { case 0: compression = 'Unknown'; break; case 1: compression = 'PCM/uncompressed'; break; case 2: compression = 'Microsoft ADPCM'; break; case 6: compression = 'ITU G.711 a-law'; break; case 7: compression = 'ITU G.711 Âµ-law'; break; case 17: compression = 'IMA ADPCM'; break; case 20: compression = 'ITU G.723 ADPCM (Yamaha)'; break; case 49: compression = 'GSM 6.10'; break; case 64: compression = 'ITU G.721 ADPCM'; break; case 80: compression = 'MPEG'; break; case 65536: compression = 'Experimental'; break; default: compression = 'Other'; break; } wave.compression = compression; //Number of channels var text = ''; for (var i = j; i < j + 2; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; console.log(j + ' Number of channels - ' + parseInt(text, 2)); wave.number_of_channels = parseInt(text, 2); //Sample rate var text = ''; for (var i = j; i < j + 4; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; console.log(j + ' Sample rate - ' + parseInt(text, 2) + ' hz '); wave.sample_rate = parseInt(text, 2); //Average bytes per second var text = ''; for (var i = j; i < j + 4; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.average_bytes_per_second = parseInt(text, 2) * 8 / 1000; //        / //Block align var text = ''; for (var i = j; i < j + 2; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.block_align = parseInt(text, 2); //Significant bits per sample var text = ''; for (var i = j; i < j + 2; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.significant_bits_per_sample = parseInt(text, 2); //Extra format bytes var text = ''; for (var i = j; i < j + 2; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.extra_format_bytes = parseInt(text, 2); //end fmt

डेटा

चूंकि fmt अनुभाग में अतिरिक्त फ़ील्ड्स की संख्या बहुत अनुमानित नहीं है (वास्तविक स्थिति अक्सर extra_bytes_format फ़ील्ड में परिलक्षित नहीं होती है), स्पर्श द्वारा "डेटा" कीवर्ड को ढूंढना सबसे आसान है।

 while (!(text == 'data' || j == wave.size)) { text = String.fromCharCode(data[j]) + String.fromCharCode(data[j + 1]) + String.fromCharCode(data[j + 2]) + String.fromCharCode(data[j + 3]); j++; } wave.data_position = j;

कीवर्ड के बाद 4 बाइट्स में डेटा का आकार होना चाहिए

 var text = ''; for (var i = j; i < j + 4; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = byt + text; } j = i; wave.chunk_size = parseInt(text, 2);

अब हम स्वयं डेटा प्राप्त कर सकते हैं, हमें उपरोक्त सभी आवश्यक चीजें मिल गईं। इस विषय में, मैं 2 चैनलों के एक क्लासिक उदाहरण पर विचार करूंगा, क्योंकि अन्य विकल्प बहुत दुर्लभ हैं।

 //sound wave.lc = []; wave.rc = []; var k = 16; /*       -      ,    k */ wave.n = wave.block_align * k; while (j < wave.size) { var text = ''; for (var i = j; i < j + wave.block_align; i++) { var byt = data[i].toString(2); if (byt.length != 8) { byt = addByte(byt) } text = text + byt; } var s1 = text.slice(0, text.length / 2); if (s1[0] == 1) { s1 = -(parseInt(text.slice(1, text.length / 2), 2)) } else { s1 = parseInt(text.slice(0, text.length / 2), 2) } var s2 = text.slice(text.length / 2, text.length); if (s2[0] == 1) { s2 = -(parseInt(text.slice(text.length / 2 + 1, text.length), 2)) } else { s2 = parseInt(text.slice(text.length / 2, text.length), 2) } /*  1   8 ,   ,   (16,24, 32… ),      */ wave.lc.push(s1); wave.rc.push(s2); j = i; j += wave.n; }

नोड के पुस्तकालय के लिए धन्यवाद - कैनवास-नोड, हम तरंगों को आकर्षित कर सकते हैं।

लहरें खींचो

आप लाइब्रेरी के साथ-साथ ब्राउज़र में एक नियमित कैनवास के साथ काम कर सकते हैं

 var canvas = new Canvas(900, 300); var ctx = canvas.getContext('2d'); var canvas2 = new Canvas(900, 300); var ctx2 = canvas2.getContext('2d'); ctx.strokeStyle = 'rgba(0,187,255,1)'; ctx.beginPath(); ctx.moveTo(0, 150); ctx2.strokeStyle = 'rgba(0,187,255,1)'; ctx2.beginPath(); ctx2.moveTo(0, 150); wave.k = 900 / wave.lc.length; wave.l = 300 / Math.pow(2, wave.significant_bits_per_sample); //               900  300 var q = Math.pow(2, wave.significant_bits_per_sample) / 2; /*  node.js       FreeBSD,       */ var web = http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/html' }); for (var i = 1; i < wave.lc.length; i++) { if (wave.lc[i] > 0) { var y = 150 + Math.floor(wave.lc[i] * wave.l) } else { var y = 150 + Math.floor((-q - wave.lc[i]) * wave.l) } if (wave.lc[i] == 0) y = 150 ctx.lineTo(Math.floor(i * wave.k), y); } ctx.stroke(); res.write('<img src="' + canvas.toDataURL() + '" /><br/>'); //   for (var i = 1; i < wave.rc.length; i++) { if (wave.rc[i] > 0) { var y = 150 + Math.floor(wave.rc[i] * wave.l) } else { var y = 150 + Math.floor((-q - wave.rc[i]) * wave.l) } if (wave.rc[i] == 0) y = 150 ctx2.lineTo(Math.floor(i * wave.k), y); } ctx2.stroke(); res.write('<img src="' + canvas2.toDataURL() + '" /><br/>'); //    res.end(); }).listen(8000);

परिणाम

ps गुणवत्ता और उप-कोड कोड के लिए क्षमा करें। मैं सिर्फ सीख रहा हूं, इसके अलावा मैंने जितना संभव हो उतना सरल लिखने की कोशिश की।

जावास्क्रिप्ट में एक वेव फाइल को पार्स करना