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

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

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

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

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

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

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

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

WordPress 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 प्लेयर वर्डप्रेस में काफी बुनियादी है। हालाँकि, क्योंकि यह एचटीएमएल 5 है, आप सीएसएस का उपयोग करके इसे काफी तैयार कर सकते हैं। 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, एक शानदार प्लगइन साइट जिसमें अच्छी तरह से समर्थित प्लगइन्स और उत्कृष्ट सेवा और समर्थन है।

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

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