वर्डप्रेस: ​​अपने ब्लॉग पोस्ट में एक एमपी 3 प्लेयर एम्बेड करें

वर्डप्रेस के साथ ब्लॉग पोस्ट एमपी 3 प्लेयर

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

हाल ही में एक साक्षात्कार के लिए एक खिलाड़ी को प्रदर्शित करना बहुत अच्छा है, वास्तविक ऑडियो फ़ाइल को होस्ट करना उचित नहीं हो सकता है। वर्डप्रेस साइटों के लिए अधिकांश वेब होस्ट स्ट्रीमिंग मीडिया के लिए अनुकूलित नहीं हैं - इसलिए यदि आप कुछ मुद्दों में भागना शुरू करते हैं तो आश्चर्यचकित न हों, जहां आप बैंडविड्थ उपयोग या अपने ऑडियो स्टालों पर पूरी तरह से हिट करते हैं। मैं ऑडियो स्ट्रीमिंग सेवा या पॉडकास्ट होस्टिंग इंजन पर वास्तविक ऑडियो फ़ाइल होस्ट करने की अनुशंसा करता हूं। और… सुनिश्चित करें कि आपका होस्ट एसएसएल (एक https:// पथ) का समर्थन करता है… सुरक्षित रूप से होस्ट किया गया ब्लॉग ऐसी ऑडियो फ़ाइल नहीं चलाएगा जो कहीं और सुरक्षित रूप से होस्ट नहीं की गई हो।

उस ने कहा, यह आपकी फ़ाइल का स्थान जानता है, इसे ब्लॉग पोस्ट में एम्बेड करना काफी सरल है। वर्डप्रेस का अपना HTML5 ऑडियो प्लेयर सीधे इसमें बनाया गया है ताकि आप खिलाड़ी को प्रदर्शित करने के लिए शोर्ट का उपयोग कर सकें।

मेरे द्वारा किए गए हालिया पॉडकास्ट एपिसोड का एक उदाहरण यहां दिया गया है:

वर्डप्रेस में गुटेनबर्ग संपादक के नवीनतम पुनरावृत्ति के साथ, मैंने सिर्फ ऑडियो फ़ाइल पथ को चिपकाया और संपादक ने वास्तव में शोर्ट बनाया। वास्तविक शोर्ट निम्नानुसार है, जहां आप उस src को उस फ़ाइल के पूर्ण URL से बदल देंगे जिसे आप खेलना चाहते हैं।

[audio src="audio-source.mp3"]

वर्डप्रेस mp3, m4a, ogg, wav, और wma filetypes को सपोर्ट करता है। आपके पास एक शोर्टकोड भी हो सकता है जो उस घटना में एक फॉलबैक प्रदान करता है जब आपके पास ऐसे ब्राउज़र का उपयोग करने वाले आगंतुक होते हैं जो एक या दूसरे का समर्थन नहीं करते हैं:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav"]

आप शोर्टकोड को अन्य विकल्पों के साथ बढ़ा सकते हैं:

  • लूप - ऑडियो को लूप करने का एक विकल्प।
  • ऑटोप्ले - लोड होते ही फाइल को अपने आप चलाने का विकल्प।
  • प्रीलोड - पृष्ठ के साथ ऑडियो फ़ाइल को प्रीलोड करने का एक विकल्प।

यह सब एक साथ रखो और यहाँ आपको क्या मिलता है:

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

वर्डप्रेस में ऑडियो प्लेलिस्ट

यदि आप एक प्लेलिस्ट बनाना चाहते हैं, तो वर्डप्रेस वर्तमान में आपकी प्रत्येक फाइल को चलाने के लिए बाहरी होस्टिंग का समर्थन नहीं करता है, लेकिन यदि आप अपनी ऑडियो फाइलों को आंतरिक रूप से होस्ट कर रहे हैं तो वे इसे पेश करते हैं:

[playlist ids="123,456,789"]

वहां कुछ समाधान वहां से आप अपने बाल थीम में जोड़ सकते हैं जो बाहरी ऑडियो फ़ाइल को लोड करने में सक्षम करेगा।

अपने साइडबार में अपने पॉडकास्ट आरएसएस फ़ीड जोड़ें

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

वर्डप्रेस ऑडियो प्लेयर का अनुकूलन

जैसा कि आप मेरी अपनी साइट से देख सकते हैं, एमपी3 प्लेयर वर्डप्रेस में काफी बुनियादी है। हालाँकि, क्योंकि यह HTML5 है, आप इसे CSS का उपयोग करके काफी हद तक तैयार कर सकते हैं। CSSIgniter ने इस पर एक बेहतरीन ट्यूटोरियल लिखा है ऑडियो प्लेयर को अनुकूलित करना इसलिए मैं इसे यहां नहीं दोहराऊंगा... लेकिन यहां वे विकल्प दिए गए हैं जिन्हें आप अनुकूलित कर सकते हैं:

/* Player background */
.mytheme-mejs-container.mejs-container,
.mytheme-mejs-container .mejs-controls,
.mytheme-mejs-container .mejs-embed,
.mytheme-mejs-container .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
.mytheme-mejs-container .mejs-button > button {
  background-image: url("images/mejs-controls-dark.svg");
}

.mytheme-mejs-container .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
.mytheme-mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mytheme-mejs-container .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
.mytheme-mejs-container .mejs-time-buffering,
.mytheme-mejs-container .mejs-time-current,
.mytheme-mejs-container .mejs-time-float,
.mytheme-mejs-container .mejs-time-float-corner,
.mytheme-mejs-container .mejs-time-float-current,
.mytheme-mejs-container .mejs-time-hovered,
.mytheme-mejs-container .mejs-time-loaded,
.mytheme-mejs-container .mejs-time-marker,
.mytheme-mejs-container .mejs-time-total,
.mytheme-mejs-container .mejs-horizontal-volume-total,
.mytheme-mejs-container .mejs-time-handle-content {
  height: 3px;
}

.mytheme-mejs-container .mejs-time-handle-content {
  top: -6px;
}

.mytheme-mejs-container .mejs-time-total {
  margin-top: 8px;
}

.mytheme-mejs-container .mejs-horizontal-volume-total {
  top: 19px;
}

अपने वर्डप्रेस एमपी 3 प्लेयर को बढ़ाएं

कुछ बिल्कुल आश्चर्यजनक ऑडियो खिलाड़ियों में अपने एमपी 3 ऑडियो को प्रदर्शित करने के लिए कुछ सशुल्क प्लगइन्स भी हैं:

प्रकटीकरण: मैं उपरोक्त प्लगइन्स के लिए अपने सहबद्ध लिंक का उपयोग कर रहा हूं Codecanyon, एक शानदार प्लगइन साइट जिसमें अच्छी तरह से समर्थित प्लगइन्स और उत्कृष्ट सेवा और समर्थन है।

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.