ВордПресс: Уградите МП3 плејер у свој пост на блогу

Блог Пост МП3 Плаиер са ВордПресс-ом

Уз тако распрострањене подкастове и размену музике на мрежи, постоји сјајна прилика да побољшате искуство посетилаца на својој веб локацији уграђивањем звука у постове на блогу. Срећом, ВордПресс наставља да развија своју подршку за уграђивање других врста медија - и мпКСНУМКС датотеке су једне од оних које је лако учинити!

Иако је приказивање плејера за недавни интервју сјајно, хостинг стварне аудио датотеке можда није препоручљив. Већина веб хостова за ВордПресс веб локације нису оптимизовани за стримовање медија - зато се немојте изненадити ако почнете да наилазите на неке проблеме у којима достигнете ограничење употребе пропусног опсега или звучне тезге. Препоручио бих хостинг стварне аудио датотеке на услузи аудио стреаминга или на механизму за хостинг подцаста. И ... будите сигурни да ваш домаћин подржава ССЛ (хттпс: // путања) ... блог који је сигурно хостован неће репродуковати аудио датотеку која није сигурно хостована негде другде.

Међутим, ако знате локацију датотеке, уградити је у блог пост је прилично једноставно. ВордПресс има свој ХТМЛ5 аудио плејер уграђен директно у њега, тако да можете користити кратки код за приказ плејера.

Ево примера из недавне епизоде ​​подцаста коју сам радио:

Са најновијом итерацијом Гутенберговог уређивача у ВордПресс-у, управо сам налепио путању звучне датотеке и уредник је уствари креирао кратки код. Следи стварни кратки код, где бисте срц заменили пуним УРЛ-ом датотеке коју желите да репродукујете.

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

Постоје нека решења тамо можете да додате тему за децу која ће омогућити спољно учитавање аудио датотека.

Додајте свој РСС феед за Подцаст на бочну траку

Користећи ВордПресс плејер, написао сам додатак за аутоматски приказ вашег подцаста у виџету бочне траке. Можете прочитајте о томе овде преузмите додатак из спремишта ВордПресс.

Прилагођавање ВордПресс Аудио Плаиер-а

Као што видите на мојој веб локацији, МП3 плејер је прилично основни у ВордПресс-у. Међутим, пошто је ХТМЛ5, можете га прилично дотјерати помоћу ЦСС-а. ЦССИгнитер је написао одличан туториал о прилагођавање аудио уређаја па нећу све овде понављати ... али ево опција које можете прилагодити:

/* 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 звука у неким апсолутно запањујућим аудио плејерима:

Откривање података: Користим своје партнерске везе за горе наведене додатке путем ЦодеЦанион, фантастична локација додатака која има добро подржане додатке и изванредну услугу и подршку.

Шта ви мислите?

Ова страница користи Акисмет како би смањила нежељену пошту. Сазнајте како се ваш коментар обрађује.