Wordpress audio player on blog/ ब्लॉग पर वर्डप्रेस ऑडियो प्लेयर

आज की इस पोस्ट में हम सीखेंगे कि वर्डप्रेस ऑडियो प्लेयर को ब्लॉग में कैसे इन्टीग्रेट करते हैं. पोस्ट थोड़ी टेक्नीकल है तो हम पहले आगाह किये देते हैं कि आप इसे पढ़ कर वक़्त बर्बाद न करें :)

हमें पिछले कुछ दिनों से पोडकास्टिंग का कीड़ा काट रहा है...तो गाहे बगाहे हम कुछ न कुछ पोडकास्ट करते रहते हैं. पोडकास्ट होस्ट करने के लिए डिवशेयर का इस्तेमाल करते हैं पर डिवशेयर का प्लेयर मुझे खास पसंद नहीं आता...थोड़ा क्लटर ज्यादा है उसमें...वैसे तो जितने ऑनलाइन प्लेयर दिखे हैं मुझे...सबसे नीट यही है फिर भी उतना अच्छा नहीं लगा. वर्डप्रेस का ऑडियोप्लेयर का लेआउट  एकदम क्लीन है...इसे आप अपने ख़ास गाने भी ब्लॉग पर पोस्ट करने के लिए इस्तेमाल कर सकते हैं.

कल सुबह मूड हुआ कि इसे ब्लॉग पर चिपकाया जाए...सोचा नहीं था कि इतना मुश्किल होगा. सुबह कुणाल ऑफिस गया तब बैठे लैपटॉप लेकर कि एक आधे घंटे में निपटा के खाना वाना खा लेंगे. मगर आधा एक घंटा बढ़ते बढ़ते शाम के पांच बज गए...न खाया था कुछ पिया था...जिद्दी हूँ एक नंबर की...जब तक करुँगी नहीं कुछ और काम में मन ही न लगे. कुछ दोस्तों से पूछा भी पर जावास्क्रिप्ट नहीं आता था उन्हें.

मैं किसी टोपिक के पीछे पड़ती हूँ तो फिर कुछ बाकी नहीं छोड़ती...कल जावा स्क्रिप्ट पढ़ भी ली...पूरा का पूरा कोड पढ़ के देखा...सिंटेक्स एरर इतने सालों बाद स्क्रीन पर दिखा पर डिबग नहीं हो पाया मुझसे. फिर मुझे लग रहा था कि कितना सिंपल तो है...पूरा कोड दिख रहा है तो हो क्यूँ नहीं रहा. शाम होते चक्कर आने लगे...मूवी देखने का मूड था 'द आर्टिस्ट' शाम के छः बजे का शो था...वो भी मिस कर दिया. जब कुछ नहीं काम हो रहा था तो सोचा कि नहा लेते हैं...शैम्पू करने के बाद अक्सर मेरा मूड बदल जाता है. तो शैम्पू किया...फिर एक बहुत अजीज दोस्त से बात की...उससे बात करके मूड अच्छा हुआ...फिर बाइक उठा के घूमने निकल गयी. रात को छोटे भाई को मेल लिखी कि दिक्कत हो रही है...थोड़ा देख दो.

और सुबह देखती हूँ जिमी का मेल आया हुआ है...प्यारा सा मेल और उसके टेस्ट ब्लॉग का लिंक जहाँ साउंड फ़ाइल प्ले हो रही थी...मारे ख़ुशी के आँखों में आंसू आ गए...गर्व से सर तन गया कि वाह...मेरा छोटा सा भाई इतना होशियार हो गया :) बहुत अच्छा लगा बहुत बहुत.

ये तो हुआ फिल्म का सेंटी हिस्सा...अब मुद्दे पर आते हैं :)

2. create a new page

1. आपको एक फ़ाइल होस्टिंग साईट की जरूरत पड़ेगी...चूँकि आप ब्लोगर इस्तेमाल करते हैं तो सबसे आसान होगा गूगल साइट्स पर अपनी वेबसाईट बनाना. इसलिए लिए यहाँ जाएँ-  https://sites.google.com/

2. जब आपकी वेबसाईट बन जाए तो इसमें एक नया पेज बनाएं...जैसे कि मैंने बनाया है ऑडियो...पेज के राईट साइड के ऊपर कोर्नर में ये जो पेज में प्लस का बटन दिख रहा है उसको दबाने से नया पेज बन जाता है. मैंने इसे नाम दिया है audio.
आपको जरूरत पड़ेगी तीन फाइलों की. एक जावास्क्रिप्ट (.js)की फ़ाइल है, एक फ्लैश प्लेयर(.swf) है और एक mp3 जो कि आपका म्यूजिक है जिसे प्ले करने के लिए हम इतना ड्रामा कर रहे हैं. आपका पेज कुछ ऐसा दिखेगा... https://sites.google.com/site/pujaupadhyaykislay/audio इसकी हमें आगे जरूरत पड़ेगी. 

3. जावास्क्रिप्ट की फ़ाइल और फ्लैश प्लेयर मैंने अपनी साईट पर अपलोड कर दिया है...आप वहां से डाउनलोड कर लीजिये. यहाँ https://sites.google.com/site/pujaupadhyaykislay/audio

दूसरा तरीका है इन्हें वर्डप्रेस के साईट से डाउनलोड करना http://wpaudioplayer.com/download/ यहाँ से Standalone पर क्लिक कीजिये...जिप फ़ाइल को अनलोक कीजिए. फोल्डर में पहली और आखिरी फाइल की जरूरत है आपको. 'audio-player' and 'player'.

3. download/upload files

4. अपने वेबपेज पर ऐड फाइल्स पर क्लिक कीजिये और audio-player.swf और player.js अपलोड कर दीजिये. ये कुछ ऐसा दिखेगा. अब अपनी mp3 फ़ाइल भी यहाँ अपलोड कर लीजिये.

५. अब हमें जरूरत है ब्लॉग के html में एक छोटा सा कोड डालने की...इसलिए लिए ब्लॉग डैशबोर्ड में जायें और टेम्पलेट सेलेक्ट करें. पहले अपने ब्लॉग टेम्पलेट का बैकप ले लीजिये...इसके लिए टॉप राईट कोर्नर में जो backup/restore button है उसे क्लिक करें. फिर एडिट html पर क्लिक करें.

6.  cntrl+f से head ढूँढिये...उसके ठीक पहले ये एक लाइन का कोड चिपकाना है.

<script language='JavaScript' src='https://sites.google.com/site/pujaupadhyaykislay/audio/audio-player.js'/>

इस कोड में जो हिस्सा ब्लू में है...उसकी जगह आप अपनी साईट का url डालिए. (go to no. 2). Replace only the part highlighted in blue...ऑडियो के बाद का हिस्सा /audio-player.js'/> को वैसा ही रहने दीजिये. 

अब टेम्पलेट सेव कर लीजिये. 

7. html का दूसरा कोड...इसमें आपको तीन लिंक बदलने हैं...

<div dir="ltr" style="text-align: left;" trbidi="on">

<br />

<div dir="ltr" style="text-align: left;" trbidi="on">

<object data="https://sites.google.com/site/pujaupadhyaykislay/audio/player.swf" height="24" id="audioplayer1" type="application/x-shockwave-flash" width="290">

<param name="movie" value="https://sites.google.com/site/pujaupadhyaykislay/audio/player.swf">

<param name="FlashVars" value="playerID=audioplayer1&soundFile=https://sites.google.com/site/pujaupadhyaykislay/audio/Enya-OnlyTime.mp3">

<param name="quality" value="high">

<param name="menu" value="false">

<param name="wmode" value="transparent">

</object> 

सिर्फ वो हिस्सा रिप्लेस कीजिये जो नीले रंग में बोल्ड है...बाकी एक्सटेंशन वैसे ही रहने दीजिये. /player.swf

mp3 की लिंक की जगह आपके गाने का जो नाम  है वो लिखिए...कृपया ध्यान से नोट कीजिये ये वही होना चाहिए जो आपकी फ़ाइल का नाम है. जैसे मेरे गाने का नाम था 'Enya-OnlyTime'

लिंक: https://sites.google.com/site/pujaupadhyaykislay/audio/Enya-OnlyTime.mp3 

मान लीजिये आपके गाने का नाम है 'piya basanti' तो जब आप फाइल अपलोड कर रहे हैं उसके पहले ही फाइल के नाम से स्पेस डिलीट कर दीजिये...'piyabasanti' वैसे तो दिक्कत नहीं आ रही है...पर कभी कभी स्पेस के कारण फ़ाइल नहीं दिखा रहा है. 

link: https://sites.google.com/site/yoursitename/audio/piyabasanti.mp3

8. अब नयी पोस्ट लिखिए...जो भी आप लिखते हो, अच्छा बुरा, प्यारा जो भी...लिख लीजिये...अब कंपोज के बगल में जो लिंक है...html उसको क्लिक कीजिये...कीड़े मकोड़े जैसी बहुत सी लाइंस आ जायेंगी :) इसमें सबसे नीचे स्क्रोल कीजिये और वहां ये ऊपर वाला कोड चिपका दीजिये. इससे प्लेयर पोस्ट के नीचे आएगा. अगर प्लेयर कहीं और प्लेस करना है तो कर्सर को वहां पर रखिये जहाँ प्लेयर चाहिए और html पर क्लिक कीजिये...और उधर ही कोड चिपका दीजिये. 

9. अब कहिये...पूजा तुम सबसे अच्छी हो. :) :) मुस्कुराइए. 

10. Publish :)