आपकी ऑडियो सेवा के लिए अनुकूली तरंग

जब मुझे एक एकल प्रसारण साइट के लिए ऑडियो संग्रह स्थापित करने की आवश्यकता थी, व्यवस्थापक पैनल के अलावा, मुझे एक ऑडियो प्लेयर की भी आवश्यकता थी। प्रसारण 40 मिनट और दो संगीतमय विराम के साथ चला। इस तरह के लंबे प्रारूपों में वेवफॉर्म का उपयोग करना विशेष रूप से सुविधाजनक है, इसलिए, कई संगीत सेवाओं की तरह, मैंने खिलाड़ी के डिजाइन में इस समाधान का उपयोग करने का निर्णय लिया।

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

प्रसिद्ध SOUNDCLOUD ने स्थिर केंद्र के सापेक्ष पूरे तरंग को स्थानांतरित करके इस समस्या को छोटे स्क्रीन पर हल किया। लेकिन मैं ऐसा नहीं चाहता।

रेडियो प्रसारण व्यवस्थापक पैनल के माध्यम से किया गया था, और मैंने तुरंत ffmpeg के माध्यम से ऑडियो फ़ाइलों की अधिक संकुचित प्रतियां बनाईं। अपनी क्षमताओं को छोड़ना और एक तरंग उत्पन्न करना मूर्खता होगी।

कार्यों की एल्गोरिथ्म:

1. भंडारण के लिए न्यूनतम आकार में तरंग की उत्पत्ति
2. वेक्टर में अनुवाद (JSON)
3. इस सरणी के लिए एक खिलाड़ी को आकर्षित करना
4. अनुकूलन क्षमता का कार्यान्वयन: सरणी की समान कमी और चरण 3 पर वापस लौटें

तरंग निर्माण

इस दृष्टिकोण के कार्यान्वयन के समय, बीबीसी के साथियों ने अभी तक JSON में आउटपुट को उनकी उपयोगिता में जारी नहीं किया था, जहां तक ​​मुझे याद है। और फिलहाल, मैं आपको सलाह दूंगा कि आप नकारात्मक संख्या और अतिरिक्त के बेकार आउटपुट को हटाने के लिए उनकी उपयोगिता का पुनर्निर्माण करें। बिटनेस और अन्य बकवास के चैनलों के बारे में पुराना है।
इस बीच, जारी रखें:

यदि हम खिलाड़ी का मेरा डिज़ाइन लेते हैं (यह यहाँ चौड़ाई में घटा है), तो हम देखेंगे कि प्रति पट्टी 2 पिक्सेल हैं (प्लस 1 पिक्सेल विभाजक)। इसका मतलब है कि 600px हमें चौड़ाई में 1200px देगा।



मुझे लगता है कि भविष्य में यह बहुत कम संभावना नहीं होगी कि ऑडियो फ़ाइल की एक बड़ी प्रस्तुति की आवश्यकता होगी। ठीक है, अगर आप 4K मॉनिटर की पूरी चौड़ाई पर डिज़ाइन नहीं खींचते हैं, तो आपको इसके बारे में सोचना चाहिए, लेकिन मैं 600x60px पर रुकता हूं।

और अब कोड के करीब:

shell_exec("ffmpeg -y -i '$name.mp3' -filter_complex 'aformat=channel_layouts=mono,compand,showwavespic=s=600x120,crop=in_w:in_h/2:0:0' -c:v png -pix_fmt monob -frames:v 1 '$png_path.png' > /dev/null 2>/dev/null &"); 

-filter_complex - फिल्टर कनेक्ट करें

aformat - ध्वनि के साथ काम करते हैं

channel_layouts

-मनो - मोनो मोड

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

-showwavespic = s = 600x120 - s छवि का आकार लेता है।

-प्रॉप = in_w: in_h / 2: 0: 0 - प्राप्त छवि को क्रॉप करें। एक नियम के रूप में, आउटपुट आवृत्ति प्रतिक्रिया एक्स अक्ष के आसपास प्रतिबिंबित होती है। इसलिए, हम छिड़कते हैं, केवल हिमशैल के टिप को छोड़कर।

-c: v png -pix_fmt monob -frames: v 1 - आउटपुट छवि प्रारूप, bw रंग पैलेट और केवल पहला फ्रेम (हमें एनीमेशन की आवश्यकता नहीं है)। png8 गुणवत्ता के लिए बहुत अच्छा है (हमारे मामले में दोषरहित) / स्थान।

> / देव / अशक्त 2> / देव / अशक्त और रसातल में आउटपुट और कामकाजी डेटा भेजें। और '&' php को काम खत्म करने के लिए कंसोल की प्रतीक्षा नहीं करने देता, बल्कि चालू रखने की अनुमति देता है।

आउटपुट पर, हमें यह चित्र मिलता है:


अंतिम फ़ाइल का आकार 2.4kb

मजेदार बात यह है कि सफेद के बजाय कुछ साल पहले एक लाल रंग था। डेवलपर्स, जाहिरा तौर पर, डिफ़ॉल्ट मूल्यों को बदल दिया।

वेक्टर में तरंग बदलें

परिणामी छवि Y में आयाम और X में समय है। यह एक आयामी JSON सरणी में अनुवाद करने के लिए प्राथमिक है। जहां मान आयाम आयामों के रूप में कार्य करेंगे, और समय केवल उनका क्रमिक सूचकांक है।

मैंने मक्खी पर अनुवाद करने का फैसला किया, परिणाम को कैशिंग किए बिना, यह बहुत जल्दी किया जाता है।
हम वाई के साथ पिक्सेल की संख्या को पहले से दूसरे तक मापते हैं, और एक्स के साथ अगले पिक्सेल पर जाते हैं।

 $a = imagecreatefrompng("test.png"); $i = 0; $h = '60'; // horizontal movener while ( $i < 600 ) { // vertical movener $y = $h-1; $c = 0; while ( $c < $h ) { //echo imagecolorat($aa, $i, $c ); // test color if(imagecolorat($a, $i, $c ) == "255") { $arr[$i] = $c; break; } else { $arr[$i] = $y; } $c++; } $i++; }; echo json_encode($arr); 

परिणामी सरणी में 600 मान हैं।

[46,28,34,35,34,35,26,33,39,29,29,30,30,30,33,33,28...]

JSON द्वारा रेंडरिंग प्लेयर

सुविधाजनक कार्य प्रगति बार के लिए, मैंने इलियट बेंटले से प्रोग्रेसर.जेएस लिया। उन्होंने इसे एक ऑडियो ट्रांसक्रिप्शन सेवा के लिए बनाया था।

github.com/ejb/progressor.js 2.76 KB

आइए एक बार फिर हमारे खिलाड़ी पर नज़र डालें।



प्रगति पट्टी में दो परतें होती हैं: एक पृष्ठभूमि जिसमें ग्रे बार और हरे होते हैं।

नीचे चित्र getGraph फ़ंक्शन के साथ तैयार किए गए हैं।

इसका अर्थ स्तंभ विभाजकों के साथ वांछित मोटाई और रंग के स्तंभों को आकर्षित करना है।

 var c = document.createElement("canvas"); c.width = width; c.height = height; var ctx = c.getContext("2d"); function getGraph(fillStyle1,fillStyle2,fillStyle3) { if (fillStyle3) { //console.log(fillStyle1); var grd = ctx.createLinearGradient(0,120,0,0); grd.addColorStop(0.5,fillStyle1); grd.addColorStop(1,fillStyle2); fillStyle1 = grd; fillStyle2 = fillStyle3; } json.forEach(function(item, i, arr) { ctx.fillStyle = fillStyle1; ctx.fillRect(i * 3, height, 2, item - height); ctx.fillStyle = fillStyle2; var next = json[i + 1]; if( item <= next ) { h2 = next; } else { h2 = item; } ctx.fillRect(i * 3 + 2, height, 1, h2 - height); }); return c.toDataURL(); } 

यहां अनुकूलन क्षमता के बिना एक काम करने वाला उदाहरण है

4. अनुकूलनशीलता का कार्यान्वयन

अब हमें क्लाइंट पर JSON सरणी को वांछित आकार में कम करने की आवश्यकता है और यहां आपके पास अनुकूलन क्षमता है।

एक योजना है

मन में आने वाली पहली पहली विधि एक चक्र में हर दूसरे, तीसरे, चौथे ... को निकालना है, इसलिए आप सरणी को आधे से कम नहीं कर सकते हैं, और पिक्सेल सटीकता यहां प्राप्त नहीं की जा सकती है।

सरणी मानों को हटाकर तरंग को संशोधित करना एक मृत अंत है। जब आप ऐसा करते हैं, तो आप देखेंगे कि तरंग कितना अव्यवस्थित रूप से फटी हुई हो जाती है, क्योंकि आप चरम फेंकते हैं और ऊंचाई में पड़ोसियों को औसत नहीं करते हैं।

हमें एल्गोरिदम को फिर से शुरू करने की आवश्यकता है। Js पर एल्गोरिथ्म का कार्यान्वयन है:

largestTriangleThreeBuckets

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



और यहां आप KDPV के रूप में अनुकूली के साथ संपर्क कर सकते हैं।

उस दृश्य मोड को सेट करें जहां दाईं ओर html फ्रेम होगा। तब आप इस विंडो की चौड़ाई बदल सकते हैं।

प्लान बी - पफ

हालाँकि, मैं अभी भी ग्राहक पक्ष को लोड नहीं करना चाहूंगा। उदाहरण के लिए, मुझे 1000 डॉट्स -5000 चाहिए, लेकिन स्क्रीन की पूरी चौड़ाई। अगर मेरे पास अधिक अंक हैं, तो यह बात मोबाइल पर कैसे व्यवहार करेगी? एक तरफ, यह बिल्कुल कोई समस्या नहीं है, यह इतना महंगा नहीं लगता है, एल्गोरिदम के डेमो को देखते हुए, यह आसानी से 5000 अंक चबाता है। लेकिन दूसरी तरफ, जितना मांगना चाहिए, उतना देना चाहिए। डिजाइन का प्रश्न।

प्राथमिक, यदि आपके पास Node.Js है, तो आप इस कोड को सर्वर पर स्थानांतरित कर सकते हैं। और अगर आपके पास php है, तो आप php में इस एल्गोरिथ्म का कार्यान्वयन पा सकते हैं लेकिन ... क्यों, मैंने सोचा।

रेज़ामापलिंग एल्गोरिदम कहाँ हैं? उसी मूल लीबी जीडी में जो हम JSON उत्पन्न करते थे। हम बस क्लाइंट से आवश्यक चौड़ाई के पैरामीटर को पास करते हैं और JSON में परिवर्तित करने से पहले हमारे तरंग का आकार बदल देते हैं।

इसलिए, मैं शुरुआत में लिखे गए कोड का विस्तार करूंगा।

 $h = 60; $width_new = 600; $a = imagecreatefrompng("$id.png"); $width_old = imagesx($a); $aa = imagecreatetruecolor($width_new, $h); imagecopyresized($aa, $a, 0, 0, 0, 0, $width_new, $h, $width_old, $h); imagetruecolortopalette($aa, false, 2); $i = 0; // horizontal movener while ( $i < $width_new ) { // vertical movener $y = $h-1; $c = 0; while ( $c < $h ){ //echo imagecolorat($aa, $i, $c ); // search what color is needed if(imagecolorat($aa, $i, $c ) == "1"){ $arr[$i] = $c; break; } else { $arr[$i] = $y; } $c++; } $i++; }; echo json_encode($arr); 

उसके बाद, आप चिंता नहीं कर सकते हैं यदि आपको डिज़ाइन बदलने की आवश्यकता है, तो खिलाड़ी की चौड़ाई, एक मोबाइल एप्लिकेशन में विस्तार करें। सब कुछ काफी लचीला और बहुत स्मार्ट दिखता है।

कोड यहाँ है