सामग्री का विपणनविपणन के साधन

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

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

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

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

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

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

[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 प्लेयर वर्डप्रेस में काफी बुनियादी है। हालाँकि, क्योंकि यह HTML5 है, आप इसका उपयोग करके इसे थोड़ा सा सजा सकते हैं सीएसएस. 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 ऑडियो को प्रदर्शित करने के लिए कुछ सशुल्क प्लगइन्स भी हैं:

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

Douglas Karr

Douglas Karr के सीएमओ हैं खुली अंतर्दृष्टि और के संस्थापक Martech Zone. डगलस ने दर्जनों सफल मार्टेक स्टार्टअप्स की मदद की है, मार्टेक अधिग्रहणों और निवेशों में $5 बिलियन से अधिक की उचित परिश्रम में सहायता की है, और कंपनियों को उनकी बिक्री और विपणन रणनीतियों को लागू करने और स्वचालित करने में सहायता करना जारी रखा है। डगलस एक अंतरराष्ट्रीय स्तर पर मान्यता प्राप्त डिजिटल परिवर्तन और मार्टेक विशेषज्ञ और वक्ता हैं। डगलस डमी गाइड और बिजनेस लीडरशिप पुस्तक के प्रकाशित लेखक भी हैं।

संबंधित आलेख

शीर्ष पर वापस करने के लिए बटन
समापन

पता लगाया गया

Martech Zone आपको यह सामग्री बिना किसी लागत के प्रदान करने में सक्षम है क्योंकि हम विज्ञापन राजस्व, संबद्ध लिंक और प्रायोजन के माध्यम से अपनी साइट से कमाई करते हैं। यदि आप हमारी साइट देखते समय अपना विज्ञापन अवरोधक हटा देंगे तो हम आभारी होंगे।