WordPress: तपाइँको ब्लग पोष्टमा एक एमपी 3 प्लेयर इम्बेड गर्नुहोस्

WordPress ब्लग पोस्ट एमपी 3 प्लेयर

पोडकास्टिंग र संगीत साझेदारीको साथ यति प्रचलित अनलाइन, तपाईंको ब्लग पोष्टहरूमा अडियो सम्मिलित गरेर तपाईंको साइटमा तपाईंको आगन्तुकको अनुभव बृद्धि गर्ने राम्रो अवसर छ। धन्यबाद, वर्डप्रेस अन्य मिडिया प्रकार एम्बेड गर्न को लागी यसको समर्थन विकसित गर्न जारी छ - र mp3 फाईलहरू ती मध्ये एक हो जुन गर्न सजिलो छ!

जबकि भर्खरको अन्तर्वार्ताको लागि एक खेलाडी प्रदर्शन उत्कृष्ट छ, वास्तविक अडियो फाइल होस्टिंग उचित नहुन सक्छ। वर्डप्रेस साइटहरूको लागि प्राय जसो वेब होस्टिंगहरू स्ट्रिमि media मिडियाका लागि अप्टिमाइज हुँदैनन् - त्यसोभए अचम्म नमान्नुहोस् यदि तपाईं केही मुद्दाहरूमा दौडन थाल्नुहुन्छ जहाँ तपाईं ब्यान्डविथको उपयोगमा सीमा पार्नुहुन्छ वा तपाईंको अडियो स्टोल पूर्ण रूपमा। म एक अडियो स्ट्रिमि service सेवा वा पोडकास्ट होस्टिंग ईन्जिनमा वास्तविक अडियो फाइल होस्टिंग सिफारिश गर्दछु। र ... निश्चित गर्नुहोस् कि तपाईंको होस्ट SSL समर्थन गर्दछ (एक https: // पथ)… सुरक्षित रूपमा होस्ट गरिएको एक ब्लग अन्यत्र सुरक्षित रूपमा होस्ट नगरिएको अडियो फाइल खेल्दैन।

त्योले भन्यो, यो तपाईलाई आफ्नो फाईलको स्थान थाहा छ, यसलाई ब्लग पोष्टमा सम्मिलित गर्न एकदम सरल छ। वर्डप्रेसको आफ्नै HTML5 अडियो प्लेयर यसमा सिर्जित छ त्यसैले तपाईं प्लेयर प्रदर्शन गर्न सर्टकड प्रयोग गर्न सक्नुहुनेछ।

यहाँ गरेको भर्खरको पोडकास्ट घटनाको उदाहरण यहाँ छ।

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

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

वर्डप्रेस एमपी 3, m4a, ogg, wav, र wma फाईल प्रकार समर्थन गर्दछ। तपाईंसँग एक सर्टकड पनि छ जसले घटनामा फेलब्याक प्रदान गर्दछ तपाईंसँग ब्राउजरहरू प्रयोग गर्ने एक वा अर्को समर्थन नगर्ने:

[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"]

WordPress मा अडियो प्लेलिस्टहरू

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

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

त्यहाँ छन् केहि समाधानहरू बाहिर तपाइँ आफ्नो बाल थीममा थप्न सक्नुहुन्छ कि बाह्य अडियो फाइल लोड सक्षम पार्छ।

तपाईंको पोडकास्ट आरएसएस फीड तपाईंको साइडबारमा थप्नुहोस्

WordPress प्लेयर प्रयोग गरेर, मैले तपाईंको पोडकास्ट एक साइडबार विजेटमा स्वचालित रूपमा प्रदर्शन गर्न एक प्लगइन लेखें। तिमी सक्छौ यहाँ यसको बारेमा पढ्नुहोस्प्लगइन डाउनलोड गर्नुहोस् WordPress भण्डारबाट।

WordPress अडियो प्लेयरको अनुकूलन

तपाईं मेरो आफ्नै साइट द्वारा देख्न सक्नुहुन्छ, एमपी 3 प्लेयर WordPress मा धेरै आधारभूत छ। जे होस्, किनकि यो 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;
}

तपाईंको वर्डप्रेस एमपी En प्लेयर बढाउनुहोस्

तपाइँको एमपी 3 अडियो प्रदर्शन को लागी केहि पनी आश्चर्यजनक अडियो प्लेयरहरु को लागी केहि भुक्तान प्लगइनहरु छन्:

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

तिम्रो के बिचार छ?

यो साइट स्प्याम कम गर्न Akismet को उपयोग गर्दछ। जान्नुहोस् कि तपाईंको डेटा कसरी संसाधित छ.