वेब प्लेयर FLAC.JS (HTML5)

लगभग इंतजार किया! यह हुआ! आप JS पर फ़्लैक फाइल्स चला सकते हैं। 2012 से लेख जारी रखने में, मैं और अधिक विस्तार से बताना चाहता हूं कि इस flac.js. का उपयोग कैसे करें।





बेशक, कई डेवलपर्स समझ नहीं पा रहे हैं कि मैं ऐसा क्यों कर रहा हूं, क्योंकि सब कुछ वहां लिखा गया है और कोड है, और यहां तक कि aurora.js ढांचे की विकिपीडिया भी। लेकिन किसी विषय को गहराई से खोदने की कोशिश करने पर, मुझे एहसास हुआ कि यह नियमित js डेवलपर के लिए इतना सरल नहीं है। मेरी राय में, प्रोग्रामर जो लिखते हैं (और अक्सर नहीं लिखते हैं) ये फ्रेमवर्क / घटक अंतिम हैं यह सोचने के लिए कि यह कैसे समझ में आता है और अन्य प्रोग्रामर को वितरण के लिए उपलब्ध है।



Aurora.js फ्रेमवर्क और flac.js घटक अपने काम को समझने और उनके लिए कुछ नया जोड़ने के लिए मात्रा और बारीकियों में बहुत बड़े हैं, इसलिए मैंने डेवलपर्स को js प्रारूप में (और कॉफ़ीस्क्रिप्ट नहीं) लिया और कुछ जोड़ा। किसान कोड के एक व्यावहारिक प्रकार के लिए। मुझे उम्मीद है कि भविष्य में मुख्य डेवलपर (डेवोन गोवेट) गलतियों को समझेंगे और हर चीज को खूबसूरती से फिर से लिखेंगे, लेकिन अब आप इसके विकास का भी उपयोग कर सकते हैं।



इस तथ्य के बावजूद कि aurora.js और flac.js मॉड्यूल द्वारा बनाए गए हैं, मैंने कभी भी अन्य संयोजनों में उनका उपयोग नहीं देखा है। सिद्धांत एक अच्छी बात है, लेकिन व्यवहार में सब कुछ अलग है। मैं हमेशा एक गणितज्ञ के काम के उदाहरण के साथ आता हूं, जिसे कोई भी खुद के अलावा नहीं समझ सकता है। विकास उत्साही है, इसलिए मैं डेवलपर की मदद करने के लिए निर्देश प्रकाशित करता हूं।



तो, aurora.js एक ढांचा है जिससे आप कोडेक्स को मॉड्यूलर रूप से कनेक्ट कर सकते हैं। कोडेक को js में भी लिखा जाता है। फ्रेमवर्क - एक फाइल पढ़ता है, प्लेयर मॉड्यूल को कमांड भेजता है (दृश्य भाग + कुछ कार्यक्षमता)।



मॉड्यूल के बीच बातचीत का सिद्धांत:







सिर में डालें (किसी भी jquery संस्करण, लेकिन यह एक वांछनीय है):

<link rel="stylesheet" href="/css/player.css" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script src="/js/player.js" type="text/javascript"></script> <script src="/js/auroraplayer.js" type="text/javascript"></script> <script src="/js/aurora.js" type="text/javascript"></script> <script src="/js/flac1.js" type="text/javascript"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

स्क्रिप्ट में सम्मिलित करें (कार्यों की सामग्री को समायोजित करने की आवश्यकता है। यह मेरी साइट से एक टुकड़ा है):

 if (player) {player.disconnect(); $(player).remove();} //   ,   . ( ) (function(DGPlayer){ if (document.cookie.indexOf ('vol=')!=-1) { DGPlayer.volume =parseInt((document.cookie.substring (document.cookie.indexOf ('vol=')+4, document.cookie.length)));} else { DGPlayer.volume = 50;} //    ,     50%. DGPlayer.songTitle=''; DGPlayer.songArtist=''; DGPlayer.coverArt = ''; DGPlayer.duration=0; DGPlayer.bufferProgress=0; //    . DGPlayer.seekTime=0; player = new DGAuroraPlayer(AV.Player.fromURL('http://'+document.domain+'/'+encodeURI(nam)), DGPlayer); //    player.player.on ('end', function() { player.disconnect(); $(player).remove(); next (window.idd);}); //      player.player.on ('error', function(e) {player.disconnect(); $(player).remove(); next (window.idd);}); //   }(DGPlayer(document.getElementById('dgplayer')))); //  html . player.ui.on('volume', function() {document.cookie="vol="+parseInt(player.player.volume)+"; path=/; expires="+date5;}); //   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्लेयर ऑब्जेक्ट में ui होता है - यह dgplayer (दृश्य भाग) और खिलाड़ी - औरोरा फ्रेमवर्क है।



HTML में, सम्मिलित करें:

 <div class="player" id="dgplayer" tabindex="0"> <div class="avatar"> <img src=""> </div> <span class="title"></span> <span class="artist"></span> <div class="button"></div> <div class="volume"> <img src="/img/volume_high.png"> <div class="track"> <div class="progress2"></div> <div class="handle"></div> </div> <img src="/img/volume_low.png"> </div> <div class="seek"> <span>0:00</span> <div class="track"> <div class="loaded"></div> <div class="progress2"></div> </div> <span>-0:00</span> </div> <span class="file_description"> fLaC.      .</span> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

तल पर लिंक पर एक डेमो साइट के साथ सभी आवश्यक फाइलें संग्रह में हैं।



और वह यह है! जब आवश्यक हो, वांछित सेटिंग्स के साथ स्क्रिप्ट चलाएं और खिलाड़ी खेलेंगे।



नुकसान के एक जोड़े हैं:



1) रिवाइंड सभी फ्लैक प्रारूपों में काम नहीं करता है। यानी यह काम करता है या नहीं।

2) मोज़िला फ़ायरफ़ॉक्स के साथ खोया संगतता। सब कुछ 9 वें संस्करण में काम किया, उदाहरण के लिए, लेकिन बाद में नहीं। उन्होंने वहां कुछ बदला।

बड़े फ़ाइल आकार के कारण, रिवाइंडिंग 3-5 सेकंड में टुकड़ों में होती है। लेकिन सामान्य परिस्थितियों में, यह पर्याप्त है।



ऑरोरा फ्रेमवर्क (कॉफ़ीस्क्रिप्ट में लिखित)।

डेमो साइट - केवल एक वेब सर्वर से चलती है। कोई क्रॉस-डोमेन नहीं है। (अपडेट किया गया 09.16.2014 11:00 नए ओपेरा ब्राउज़र के लिए समर्थन जोड़ा गया)

11/11/2016 अपडेटेड जेएस कोडेक्स। बेहतर संगतता और प्रदर्शन।

काम करने का उदाहरण ।