WordPress: Вградете MP3 плейър в публикацията си в блога

MP3 Post MPXNUMX Player с WordPress
Време за четене: 3 протокол

С толкова разпространените онлайн подкастинг и споделяне на музика, има чудесна възможност да подобрите изживяването на посетителите си на вашия сайт, като вградите аудио в публикациите си в блога. За щастие, WordPress продължава да развива своята подкрепа за вграждане на други типове медии - и mp3 файловете са едни от тези, които се правят лесно!

Докато показването на плейър за скорошно интервю е чудесно, хостването на действителния аудио файл може да не е препоръчително. Повечето уеб хостове за WordPress сайтове не са оптимизирани за стрийминг на медии - така че не се изненадвайте, ако започнете да се сблъсквате с някои проблеми, при които сте достигнали ограничения за използването на честотната лента или вашите аудио сергии. Препоръчвам ви да хоствате действителния аудио файл в услуга за аудио стрийминг или подкаст хостинг машина. И ... бъдете сигурни, че вашият хост поддържа 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"]

Има някои решения там можете да добавите към вашата детска тема, която ще позволи зареждане на външни аудио файлове.

Добавете вашия RSS канал за подкаст към страничната си лента

Използвайки плейъра на WordPress, написах плъгин за автоматично показване на вашия подкаст в приспособлението на страничната лента. Можеш Прочетете за него тук и изтеглете приставката от хранилището на WordPress.

Персонализиране на WordPress Audio Player

Както можете да видите от моя собствен сайт, 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;
}

Подобрете вашия MP3 плейър на WordPress

Има и някои платени плъгини за показване на вашия MP3 аудио в някои абсолютно зашеметяващи аудио плейъри:

Разкриване: Използвам своите партньорски връзки за горните приставки чрез Codecanyon, фантастичен сайт за приставки, който има добре поддържани приставки и изключителни услуги и поддръжка.

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.