क्रॉस-ब्राउज़र ऑडियो विज़ुअलाइज़ेशन बनाएँ

लगभग एक साल पहले, एक सुंदर html5 ऑडियो प्लेयर बनाने का एक कार्य था। डिजाइनरों ने सबसे सरल दृश्य आकर्षित किया:



सबसे आसान विकल्प पृष्ठभूमि संगीत के लिए असंबंधित पृष्ठभूमि में एक "शोर" आकर्षित करना है। लेकिन हम आसान तरीकों की तलाश नहीं कर रहे हैं।

एचएबीआर पर एचटीएमएल 5 में एक लेख ऑडियो विज़ुअलाइज़ेशन था जिसमें जावास्क्रिप्ट का उपयोग करते हुए विज़ुअलाइज़ेशन के सवाल पर विस्तार से विचार किया गया है। ऑडियो के बारे में जानकारी प्राप्त करने के लिए 2 मानक हैं:

• Chrome के लिए वेब ऑडियो API ,
• फ़ायरफ़ॉक्स के लिए ऑडियो डेटा एपीआई ।

मानक एक दूसरे से बहुत अलग हैं, इन एपीआई का उपयोग करके हम केवल इन ब्राउज़रों में समर्थन प्राप्त कर सकते हैं। हम सूची का विस्तार करना चाहते थे और एक समाधान के साथ आया था जो IE के पुराने संस्करणों में भी काम करता था।

सरलीकृत डेमो


सभी संगीत तृतीय-पक्ष सेवा से आयात किए गए थे और रूबी में लिखित प्रीप्रोसेसिंग - स्टीरियो mp3 128kb में रूपांतरण। हमने इसे रेंडर करने के लिए एक json फाइल बनाने के लिए जोड़ा।

सर्वर साइड

आकृति में, 30 कॉलम आवृत्ति रेंज की "संतृप्ति" दिखाते हैं: बाईं ओर कम आवृत्तियों, दाईं ओर उच्च आवृत्तियों।

एल्गोरिथ्म के विवरण में जाने के बिना, सर्वर पर, 2 रत्नों का उपयोग करके - वेवफाइल से डेटा प्राप्त करने के लिए .wav फाइलें और fftw3 तेजी से फूरियर रूपांतरण की गणना करने के लिए, निम्न प्रारूप के जेनसन :

{ //   —    0.0: [/*  30 */], 0.04: [...], 0.08: [...] ... } 

औसत विज़ुअलाइज़ेशन फ़ाइल का आकार 500kb है।

प्रयोगात्मक रूप से, हमने 0.04 सेकंड का एक "रिज़ॉल्यूशन" चुना, जिस पर दृश्य सुचारू रूप से बदलता है (क्या आपको 24 फ्रेम प्रति सेकंड याद है?) और फ़ाइल का आकार नहीं बढ़ता है। मजेदार तथ्य: पहले कार्यान्वयन में, स्तंभों की ऊंचाई को एक डॉट के साथ एक संख्या द्वारा दर्शाया गया था और फ़ाइल का आकार 5 मेगाबाइट तक पहुंच गया था। एक पूर्णांक में कलाकारों को जोड़ने से दसियों के कारक द्वारा फ़ाइल का आकार कम हो गया।

ग्राहक पक्ष

क्लाइंट पर, एल्गोरिथ्म स्पष्ट है: सर्वर से प्रत्येक ऑडियो फ़ाइल के लिए, json विज़ुअलाइज़ेशन लिया जाता है। प्लेबैक के दौरान, निकट भविष्य में फ़ाइल से वर्तमान समय लिया जाता है और 30 कॉलम खींचे जाते हैं, जिसकी ऊंचाई की गणना सर्वर पर की जाती है।

विपक्ष और पेशेवरों

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