வேர்ட்பிரஸ்: உங்கள் வலைப்பதிவு இடுகையில் எம்பி 3 பிளேயரை உட்பொதிக்கவும்

வேர்ட்பிரஸ் உடன் வலைப்பதிவு இடுகை எம்பி 3 பிளேயர்

ஆன்லைனில் போட்காஸ்டிங் மற்றும் இசை பகிர்வு அதிகமாக இருப்பதால், உங்கள் வலைப்பதிவு இடுகைகளுக்குள் ஆடியோவை உட்பொதிப்பதன் மூலம் உங்கள் தளத்தில் பார்வையாளர்களின் அனுபவத்தை மேம்படுத்த ஒரு சிறந்த வாய்ப்பு உள்ளது. அதிர்ஷ்டவசமாக, வேர்ட்பிரஸ் மற்ற ஊடக வகைகளை உட்பொதிப்பதற்கான அதன் ஆதரவைத் தொடர்ந்து உருவாக்கி வருகிறது - மற்றும் mp3 கோப்புகளைச் செய்வது எளிதானது!

சமீபத்திய நேர்காணலுக்கு ஒரு பிளேயரைக் காண்பிப்பது மிகச் சிறந்தது, உண்மையான ஆடியோ கோப்பை ஹோஸ்ட் செய்வது அறிவுறுத்தலாக இருக்காது. வேர்ட்பிரஸ் தளங்களுக்கான பெரும்பாலான வலை ஹோஸ்ட்கள் ஸ்ட்ரீமிங் மீடியாவிற்கு உகந்ததாக இல்லை - எனவே அலைவரிசை பயன்பாடு அல்லது உங்கள் ஆடியோ ஸ்டால்களை நீங்கள் வரம்பிடக்கூடிய சில சிக்கல்களில் நீங்கள் இயங்கத் தொடங்கினால் ஆச்சரியப்பட வேண்டாம். உண்மையான ஆடியோ கோப்பை ஆடியோ ஸ்ட்ரீமிங் சேவை அல்லது போட்காஸ்ட் ஹோஸ்டிங் இயந்திரத்தில் ஹோஸ்ட் செய்ய பரிந்துரைக்கிறேன். மேலும்… உங்கள் ஹோஸ்ட் SSL ஐ ஆதரிக்கிறது என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் (ஒரு https: // path)… பாதுகாப்பாக ஹோஸ்ட் செய்யப்பட்ட வலைப்பதிவு வேறு எங்கும் பாதுகாப்பாக ஹோஸ்ட் செய்யப்படாத ஆடியோ கோப்பை இயக்காது.

உங்கள் கோப்பின் இருப்பிடம் உங்களுக்குத் தெரியும், அதை ஒரு வலைப்பதிவு இடுகையில் உட்பொதிப்பது மிகவும் எளிது. வேர்ட்பிரஸ் அதன் சொந்த HTML5 ஆடியோ பிளேயரை நேரடியாக உருவாக்கியுள்ளது, எனவே பிளேயரைக் காண்பிக்க ஷார்ட்கோடைப் பயன்படுத்தலாம்.

நான் செய்த சமீபத்திய போட்காஸ்ட் எபிசோடில் ஒரு எடுத்துக்காட்டு இங்கே:

வேர்ட்பிரஸ் இல் குட்டன்பெர்க் எடிட்டரின் சமீபத்திய மறு செய்கை மூலம், நான் ஆடியோ கோப்பு பாதையை ஒட்டினேன், எடிட்டர் உண்மையில் சுருக்குக்குறியீட்டை உருவாக்கியது. உண்மையான சுருக்குக்குறியீடு பின்வருமாறு, அங்கு நீங்கள் விளையாட விரும்பும் கோப்பின் முழு URL உடன் src ஐ மாற்றுவீர்கள்.

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

வேர்ட்பிரஸ் mp3, m4a, ogg, wav மற்றும் wma filetypes ஐ ஆதரிக்கிறது. ஒன்று அல்லது மற்றொன்றை ஆதரிக்காத உலாவிகளைப் பயன்படுத்தி பார்வையாளர்கள் வருகை தந்தால் குறைவடையும் ஒரு சுருக்குக்குறியீடு கூட உங்களிடம் இருக்கலாம்:

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

நீங்கள் சுருக்குக்குறியீட்டை மற்ற விருப்பங்களுடன் மேம்படுத்தலாம்:

  • லூப் - ஆடியோவை லூப் செய்வதற்கான ஒரு விருப்பம்.
  • தானியங்கு - கோப்பு ஏற்றப்பட்டவுடன் தானாக இயங்குவதற்கான ஒரு விருப்பம்.
  • preload - பக்கத்துடன் ஆடியோ கோப்பை முன்னதாக ஏற்றுவதற்கான ஒரு விருப்பம்.

அனைத்தையும் ஒன்றாக இணைத்து, நீங்கள் பெறுவது இங்கே:

[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 ஆடியோவைக் காண்பிப்பதற்கான சில கட்டண செருகுநிரல்களும் உள்ளன:

வெளிப்படுத்தல்: மேலே உள்ள செருகுநிரல்களுக்கான எனது இணைப்பு இணைப்புகளைப் பயன்படுத்துகிறேன் நேரடி, நன்கு ஆதரிக்கப்பட்ட செருகுநிரல்கள் மற்றும் சிறந்த சேவை மற்றும் ஆதரவைக் கொண்ட அருமையான சொருகி தளம்.

நீங்கள் என்ன நினைக்கிறீர்கள்?

இந்த தளம் ஸ்பேமைக் குறைக்க Akismet ஐப் பயன்படுத்துகிறது. உங்கள் கருத்துத் தரவு எவ்வாறு செயல்படுத்தப்படுகிறது என்பதை அறியவும்.