ವರ್ಡ್ಪ್ರೆಸ್: ನಿಮ್ಮ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ಎಂಪಿ 3 ಪ್ಲೇಯರ್ ಅನ್ನು ಎಂಬೆಡ್ ಮಾಡಿ

ವರ್ಡ್ಪ್ರೆಸ್ನೊಂದಿಗೆ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಎಂಪಿ 3 ಪ್ಲೇಯರ್

ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ ಪಾಡ್‌ಕಾಸ್ಟಿಂಗ್ ಮತ್ತು ಸಂಗೀತ ಹಂಚಿಕೆಯೊಂದಿಗೆ, ನಿಮ್ಮ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಳಲ್ಲಿ ಆಡಿಯೊವನ್ನು ಎಂಬೆಡ್ ಮಾಡುವ ಮೂಲಕ ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಸಂದರ್ಶಕರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಉತ್ತಮ ಅವಕಾಶವಿದೆ. ಅದೃಷ್ಟವಶಾತ್, ವರ್ಡ್ಪ್ರೆಸ್ ಇತರ ಮಾಧ್ಯಮ ಪ್ರಕಾರಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲು ತನ್ನ ಬೆಂಬಲವನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತಿದೆ - ಮತ್ತು mp3 ಫೈಲ್ಗಳು ಸುಲಭವಾದವುಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ!

ಇತ್ತೀಚಿನ ಸಂದರ್ಶನಕ್ಕಾಗಿ ಆಟಗಾರನನ್ನು ಪ್ರದರ್ಶಿಸುವುದು ಅದ್ಭುತವಾಗಿದೆ, ನಿಜವಾದ ಆಡಿಯೊ ಫೈಲ್ ಅನ್ನು ಹೋಸ್ಟ್ ಮಾಡುವುದು ಸೂಕ್ತವಲ್ಲ. ವರ್ಡ್ಪ್ರೆಸ್ ಸೈಟ್‌ಗಳಿಗಾಗಿ ಹೆಚ್ಚಿನ ವೆಬ್ ಹೋಸ್ಟ್‌ಗಳು ಸ್ಟ್ರೀಮಿಂಗ್ ಮಾಧ್ಯಮಕ್ಕಾಗಿ ಹೊಂದುವಂತೆ ಇಲ್ಲ - ಆದ್ದರಿಂದ ನೀವು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಬಳಕೆ ಅಥವಾ ನಿಮ್ಮ ಆಡಿಯೊ ಸ್ಟಾಲ್‌ಗಳ ಮೇಲೆ ಮಿತಿಗಳನ್ನು ಹೊಡೆಯುವ ಕೆಲವು ಸಮಸ್ಯೆಗಳಿಗೆ ನೀವು ಪ್ರಾರಂಭಿಸಿದರೆ ಆಶ್ಚರ್ಯಪಡಬೇಡಿ. ನಿಜವಾದ ಆಡಿಯೊ ಫೈಲ್ ಅನ್ನು ಆಡಿಯೊ ಸ್ಟ್ರೀಮಿಂಗ್ ಸೇವೆ ಅಥವಾ ಪಾಡ್‌ಕ್ಯಾಸ್ಟ್ ಹೋಸ್ಟಿಂಗ್ ಎಂಜಿನ್‌ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲು ನಾನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ. ಮತ್ತು… ನಿಮ್ಮ ಹೋಸ್ಟ್ ಎಸ್‌ಎಸ್‌ಎಲ್ (https: // path) ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ… ಸುರಕ್ಷಿತವಾಗಿ ಹೋಸ್ಟ್ ಮಾಡಿದ ಬ್ಲಾಗ್ ಆಡಿಯೊ ಫೈಲ್ ಅನ್ನು ಪ್ಲೇ ಮಾಡುವುದಿಲ್ಲ ಅದು ಸುರಕ್ಷಿತವಾಗಿ ಹೋಸ್ಟ್ ಆಗಿಲ್ಲ.

ಅದು ನಿಮ್ಮ ಫೈಲ್‌ನ ಸ್ಥಳವನ್ನು ನಿಮಗೆ ತಿಳಿದಿದೆ, ಅದನ್ನು ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡುವುದು ತುಂಬಾ ಸರಳವಾಗಿದೆ. ವರ್ಡ್ಪ್ರೆಸ್ ತನ್ನದೇ ಆದ HTML5 ಆಡಿಯೊ ಪ್ಲೇಯರ್ ಅನ್ನು ನೇರವಾಗಿ ನಿರ್ಮಿಸಿದೆ ಆದ್ದರಿಂದ ನೀವು ಪ್ಲೇಯರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಶಾರ್ಟ್‌ಕೋಡ್ ಅನ್ನು ಬಳಸಬಹುದು.

ನಾನು ಮಾಡಿದ ಇತ್ತೀಚಿನ ಪಾಡ್‌ಕ್ಯಾಸ್ಟ್ ಎಪಿಸೋಡ್‌ನ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

ವರ್ಡ್ಪ್ರೆಸ್ನಲ್ಲಿ ಗುಟೆನ್ಬರ್ಗ್ ಸಂಪಾದಕರ ಇತ್ತೀಚಿನ ಪುನರಾವರ್ತನೆಯೊಂದಿಗೆ, ನಾನು ಆಡಿಯೊ ಫೈಲ್ ಪಥವನ್ನು ಅಂಟಿಸಿದೆ ಮತ್ತು ಸಂಪಾದಕವು ಶಾರ್ಟ್ಕೋಡ್ ಅನ್ನು ರಚಿಸಿದೆ. ನಿಜವಾದ ಶಾರ್ಟ್‌ಕೋಡ್ ಅನುಸರಿಸುತ್ತದೆ, ಅಲ್ಲಿ ನೀವು ಆಡಲು ಬಯಸುವ ಫೈಲ್‌ನ ಪೂರ್ಣ URL ನೊಂದಿಗೆ src ಅನ್ನು ಬದಲಾಯಿಸುತ್ತೀರಿ.

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

ವರ್ಡ್ಪ್ರೆಸ್ ಎಂಪಿ 3, ಎಮ್ 4 ಎ, ಓಗ್, ವಾವ್ ಮತ್ತು ಡಬ್ಲ್ಯೂಎಂಎ ಫೈಲ್‌ಟೈಪ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಒಂದು ಅಥವಾ ಇನ್ನೊಂದನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬಳಸುವ ಸಂದರ್ಶಕರನ್ನು ನೀವು ಹೊಂದಿರುವ ಸಂದರ್ಭದಲ್ಲಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸುವ ಶಾರ್ಟ್‌ಕೋಡ್ ಅನ್ನು ಸಹ ನೀವು ಹೊಂದಬಹುದು:

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

ಇವೆ ಕೆಲವು ಪರಿಹಾರಗಳು ನಿಮ್ಮ ಮಕ್ಕಳ ಥೀಮ್‌ಗೆ ನೀವು ಸೇರಿಸಬಹುದಾದ ಅದು ಬಾಹ್ಯ ಆಡಿಯೊ ಫೈಲ್ ಲೋಡಿಂಗ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಸೈಡ್‌ಬಾರ್‌ಗೆ ನಿಮ್ಮ ಪಾಡ್‌ಕ್ಯಾಸ್ಟ್ RSS ಫೀಡ್ ಅನ್ನು ಸೇರಿಸಿ

ವರ್ಡ್ಪ್ರೆಸ್ ಪ್ಲೇಯರ್ ಬಳಸಿ, ನಿಮ್ಮ ಪಾಡ್‌ಕ್ಯಾಸ್ಟ್ ಅನ್ನು ಸೈಡ್‌ಬಾರ್ ವಿಜೆಟ್‌ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ನಾನು ಪ್ಲಗಿನ್ ಬರೆದಿದ್ದೇನೆ. ನೀನು ಮಾಡಬಲ್ಲೆ ಅದರ ಬಗ್ಗೆ ಇಲ್ಲಿ ಓದಿ ಮತ್ತು ಪ್ಲಗಿನ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ವರ್ಡ್ಪ್ರೆಸ್ ರೆಪೊಸಿಟರಿಯಿಂದ.

ವರ್ಡ್ಪ್ರೆಸ್ ಆಡಿಯೊ ಪ್ಲೇಯರ್ನ ಗ್ರಾಹಕೀಕರಣ

ನನ್ನ ಸ್ವಂತ ಸೈಟ್‌ನಿಂದ ನೀವು ನೋಡುವಂತೆ, ಎಂಪಿ 3 ಪ್ಲೇಯರ್ ವರ್ಡ್ಪ್ರೆಸ್ನಲ್ಲಿ ಬಹಳ ಮೂಲಭೂತವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಇದು HTML5 ಆಗಿರುವುದರಿಂದ, ನೀವು ಅದನ್ನು CSS ಬಳಸಿ ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಅಲಂಕರಿಸಬಹುದು. ಸಿಎಸ್ಎಸ್ಇಗ್ನಿಟರ್ ಉತ್ತಮ ಟ್ಯುಟೋರಿಯಲ್ ಅನ್ನು ಬರೆದಿದೆ ಆಡಿಯೊ ಪ್ಲೇಯರ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲಾಗುತ್ತಿದೆ ಹಾಗಾಗಿ ನಾನು ಎಲ್ಲವನ್ನೂ ಇಲ್ಲಿ ಪುನರಾವರ್ತಿಸುವುದಿಲ್ಲ… ಆದರೆ ನೀವು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದಾದ ಆಯ್ಕೆಗಳು ಇಲ್ಲಿವೆ:

/* 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 ಆಡಿಯೊ ಪ್ಲೇಯರ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ಎಂಪಿ XNUMX ಆಡಿಯೊವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಕೆಲವು ಪಾವತಿಸಿದ ಪ್ಲಗ್‌ಇನ್‌ಗಳಿವೆ:

ಪ್ರಕಟಣೆ: ಮೇಲಿನ ಪ್ಲಗ್‌ಇನ್‌ಗಳಿಗಾಗಿ ನನ್ನ ಅಂಗಸಂಸ್ಥೆ ಲಿಂಕ್‌ಗಳನ್ನು ನಾನು ಬಳಸುತ್ತಿದ್ದೇನೆ ವಲ್ಕ್, ಉತ್ತಮವಾದ ಪ್ಲಗಿನ್‌ಗಳು ಮತ್ತು ಅತ್ಯುತ್ತಮ ಸೇವೆ ಮತ್ತು ಬೆಂಬಲವನ್ನು ಹೊಂದಿರುವ ಅದ್ಭುತ ಪ್ಲಗಿನ್ ಸೈಟ್.

ನೀವು ಏನು ಆಲೋಚಿಸುತ್ತೀರಿ ಏನು?

ಸ್ಪ್ಯಾಮ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಈ ಸೈಟ್ ಅಕಿಸ್ಸೆಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ನಿಮ್ಮ ಕಾಮೆಂಟ್ ಡೇಟಾವನ್ನು ಹೇಗೆ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತಿದೆ ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.