PHP का उपयोग करके एमपी 3 फ़ाइलों से तरंग के साथ छवि बनाना

मैं jQuery का उपयोग कर साइटों के लिए एक ऑडियो प्लेयर को लागू करने के तरीकों में से एक साझा करना चाहूंगा। अर्थात्, लोकप्रिय साउंडक्लाउड सेवा की शैली में एक खिलाड़ी, जिसे HTML + CSS + JS में बनाया गया है। एक दिलचस्प jPlayer खिलाड़ी के बारे में हाल के लेख की खोज में।



खिलाड़ी में स्वयं jPlayer, सरल लेआउट की एक निश्चित राशि और मुख्य घटक होते हैं - खेली जा रही फ़ाइल के तरंग से एक तस्वीर (यह एक स्पष्ट तस्वीर है जो सिग्नल एम्पलीट्यूड को दिखाती है, जो एक टाइमलाइन पर प्लॉट की गई है)।







आप अपनी ज़रूरत की हर चीज़ के साथ पुरालेख डाउनलोड करके इस पूरा होने के परिणामों से परिचित हो सकते हैं: http://test.dis.dj/wave/ (खिलाड़ी के इंटरफ़ेस का एक डेमो और इसके साथ एक संग्रह भी है)।

अब प्रक्रिया के बारे में अधिक

Http://andrewfreiday.com/2010/04/29/generating-mp3-waveforms-with-php/ पर Google में स्क्रिप्ट खोजने के बाद, और सुनिश्चित करें कि यह ठीक से काम करता है, मैंने अपनी आवश्यकताओं को पूरा करने के लिए इसे थोड़ा खत्म करने का फैसला किया। अर्थात्, कंसोल मोड को इसमें जोड़ें, और बीच में जहां तरंग स्थित है, और किनारों पर अपारदर्शी भी तस्वीर को पारदर्शी बनाएं, ताकि आप प्लेयर में सीधे प्लेबैक प्रगति प्रदर्शित कर सकें, जैसा कि साउंडक्लाउड के साथ किया जाता है।



स्क्रिप्ट इस तरह से काम करती है: किसी फ़ाइल को वेव फॉर्मेट में लंग एनकोडर कहकर ट्रांसकोड करती है, फिर प्राप्त फ़ाइल को पार्स करती है और एंप्लीट्यूड जेनरेट करती है, उन्हें एक एरे से भरती है। फिर इन आयामों से एक तस्वीर तैयार की जाती है, जिसे बाद में संपीड़ित किया जाता है और काम के परिणामस्वरूप दिया जाता है।



आप परिणामस्वरूप स्क्रिप्ट का उपयोग इस प्रकार कर सकते हैं:

1. सुनिश्चित करें कि सिस्टम में PATH चर में PHP निर्दिष्ट है
2. > wave file.mp3
   
   
   
   - एक विशिष्ट फ़ाइल के लिए एक छवि उत्पन्न करता है
3. > wave-all
   
   
   
   - एक फ़ोल्डर में सभी फ़ाइलों के लिए छवियां उत्पन्न करता है
4. वैकल्पिक रूप से, आप index.php
   
   
   
   फ़ाइल का उपयोग कर सकते हैं, इसे एक ब्राउज़र के माध्यम से एक्सेस कर सकते हैं

लेआउट पूरी तरह से सरल है - एक पृष्ठभूमि या चित्र के रूप में तरंग के साथ एक पूर्ण परत, क्योंकि यह अधिक सुविधाजनक है, नीचे यह दो और पूर्ण परतें हैं, जिसमें जेएस चौड़ाई (खेलने और डाउनलोड करने के लिए प्रगति पट्टी) सेट करता है। यह सब सामान position: relative



साथ एक और परत में लिपटे हुए है position: relative



, आसपास के लेआउट तत्वों पर प्रभाव से बचने के लिए। बाकी नियंत्रण, अड़चन और सजावट है। डेमो डाउनलोड पेज पर उपलब्ध है।



तैयार परिणाम http://dis.dj/music/seamless.html पर देखे जा सकते हैं।

खिलाड़ी का उपयोग

खिलाड़ी को किसी भी कंटेनर में प्रस्तुत किया जाता है, इसके लिए आपको इसे किसी अन्य jQuery प्लगइन की तरह कॉल करने की आवश्यकता है:

 $(function(){ $('#waveform').waveform({ media: { oga: "http://dis.dj/files/tracks/DiS - Seamless.oga", m4a: "http://dis.dj/files/tracks/DiS - Seamless.m4a", mp3: "http://dis.dj/files/tracks/DiS - Seamless.mp3" }, image: "http://dis.dj/files/tracks/DiS - Seamless.png", title: "DiS - Seamless", duration: 186, size: 7442977, durationFormatted: "3:06", sizeFormatted: "7.10MB", createDate: "5 \u0434\u0435\u043a\u0430\u0431\u0440\u044f 2010 03:32:20", path: "jplayer/" }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ट्रैक लोड करने से पहले एक सुंदर प्रदर्शन के लिए लंबाई और समय के डेटा की आवश्यकता होती है, हम मानते हैं कि यह जानकारी पहले से ही कहीं कैश की गई है।



खिलाड़ी कॉल का उपयोग करके "बाहरी दुनिया" के साथ बातचीत करता है:

 $(function(){ $("#waveform").waveform("play"); $("#waveform").waveform("pause"); $("#waveform").waveform("stop"); $("#waveform").waveform("getTrack"); //       ( ,  ) $("#waveform").waveform("setTrack", {…}); //      $("#waveform").waveform("getPlayer"); //   jPlayer',       (.  jPlayer) });