WordPress. Ձեր բլոգում տեղադրեք MP3 նվագարկիչ

Բլոգի տեղադրում MP3 նվագարկիչ WordPress- ով

Podcasting- ի և երաժշտության համօգտագործման միջոցով ինտերնետում տարածված լինելը մեծ հնարավորություն է ընձեռում բարելավել ձեր այցելուների փորձը ձեր կայքում `աուդիո տեղադրելով ձեր բլոգի հաղորդագրությունների մեջ: Բարեբախտաբար, WordPress- ը շարունակում է զարգացնել իր աջակցությունը լրատվամիջոցների այլ տեսակների ներդրմանը `և mp3 ֆայլերը դրանցից մեկն են, որոնք հեշտ է արվել:

Չնայած վերջին հարցազրույցի համար նվագարկիչ ցուցադրելը հիանալի է, իրական աուդիո ֆայլը հյուրընկալելը գուցե ցանկալի չէ: WordPress կայքերի համար վեբ հոստերից շատերը օպտիմիզացված չեն հոսքային լրատվամիջոցների համար. Այնպես որ մի զարմացեք, եթե սկսեք բախվել որոշ խնդիրների, երբ դուք սահմանափակում եք թողունակության օգտագործման կամ ձեր աուդիո կրպակները ընդհանրապես: Ես խորհուրդ կտայի իրական աուդիո ֆայլը տեղավորել աուդիո հոսքային ծառայության կամ podcast հոսթինգի շարժիչի վրա: Եվ… համոզված եղեք, որ ձեր ընդունողն աջակցում է SSL- ին (https: // արահետ)… անվտանգ հյուրընկալված բլոգը չի նվագարկի աուդիո ֆայլ, որը այլևս ապահով կերպով չի տեղակայված

Ասաց, որ գիտեք ձեր ֆայլի գտնվելու վայրը, այն բլոգում տեղադրելը բավականին պարզ է: WordPress- ն ունի իր սեփական HTML5 աուդիո նվագարկիչը, որը ներկառուցված է անմիջապես դրա մեջ, այնպես որ կարող եք օգտագործել կարճ կոդ ՝ նվագարկիչը ցուցադրելու համար:

Ահա մի օրինակ, որը ես արեցի վերջերս կատարված փոդքասթի դրվագից.

WordPress- ում Գուտենբերգի խմբագրի վերջին կրկնության միջոցով ես պարզապես տեղադրեցի աուդիո ֆայլերի ուղին, և խմբագիրն իրականում ստեղծեց կարճ կոդ: Հետևում է փաստացի կարճ ծածկագիրը, որտեղ դուք կփոխարինեք src- ը ձեր ցանկալի խաղացած ֆայլի ամբողջական URL- ով:

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

WordPress- ն աջակցում է mp3, m4a, ogg, wav և wma ֆայլատեսակները: Կարող եք ունենալ նույնիսկ կարճ կոդ, որն ապահովում է հետադարձ դեպք այն դեպքում, երբ այցելուներ ունեք, որոնք օգտագործում են զննարկիչներ, որոնք չեն աջակցում մեկին կամ մյուսին.

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

Կարող եք ընդլայնել կարճ ծածկագիրը, ինչպես նաև այլ ընտրանքներով.

  • հանգույց - աուդիո փաթաթելու տարբերակ:
  • autoplay - ֆայլը բեռնելուն պես ավտոմատ կերպով խաղալու տարբերակ:
  • նախաբեռնում - աուդիո ֆայլը էջով նախաբեռնելու տարբերակ:

Դիր բոլորը միասին և ահա թե ինչ ես ստանում.

[audio mp3="source.mp3" ogg="source.ogg" wav="source.wav" loop="yes" autoplay="on" preload="auto"]

Աուդիո երգացանկեր WordPress- ում

Եթե ​​ուզում եք ունենալ երգացանկ, WordPress- ը ներկայումս չի աջակցում ձեր ֆայլերից յուրաքանչյուրի արտաքին հոստինգը նվագարկելու համար, բայց նրանք այն առաջարկում են, եթե ձեր աուդիո ֆայլերը ներսում եք հյուրընկալում.

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

Կա որոշ լուծումներ այնտեղ, որը կարող եք ավելացնել ձեր Երեխայի թեմային, որը թույլ կտա արտաքին աուդիո ֆայլերի բեռնումը:

Ավելացրեք ձեր Podcast RSS հոսքը ձեր կողային տողում

Օգտագործելով WordPress նվագարկիչը ՝ ես գրեցի մի կոնտակտ ՝ ձեր podcast- ը ավտոմատ կերպով ցուցադրելու կողային գծի վիջեթում: Դու կարող ես Այստեղ կարդացեք այստեղ և ներբեռնել ներդիրը WordPress- ի պահոցից:

WordPress աուդիո նվագարկչի հարմարեցում

Ինչպես տեսնում եք իմ սեփական կայքի կողմից, MP3 նվագարկիչը բավականին հիմնարար է 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;
}

Բարելավեք ձեր WordPress MP3 նվագարկիչը

Կան նաև որոշ վճարովի լրացումներ ՝ ձեր MP3 աուդիոն ցուցադրելու համար միանգամայն ապշեցուցիչ աուդիո նվագարկիչներում.

Բացահայտում. Ես օգտագործում եմ իմ փոխկապակցված հղումները վերը նշված հավելումների համար Codecanyon, plugin- ի ֆանտաստիկ կայք, որն ունի լավ աջակցվող պլագիններ և բացառիկ սպասարկում և աջակցություն:

Այս կայքը օգտագործում է Akismet- ը սպամի նվազեցման համար: Իմացեք, թե ինչպես է ձեր տվյալները մշակվում.