WordPress: сіздің блогыңызға MP3 ойнатқышын салыңыз

WordPress-тегі блогтың MP3 ойнатқышы

Интернетте кеңінен таралған подкастинг пен музыканы бөлісу арқылы сіздің блогыңызға аудио енгізу арқылы сайтқа келушілердің тәжірибесін жақсартудың тамаша мүмкіндігі бар. Бақытымызға орай, 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"]

Қысқа кодты басқа опциялармен жақсартуға болады:

  • цикл - дыбысты циклға жіберуге арналған нұсқа.
  • авто ойнату - файл жүктелген бойда оны автоматты түрде ойнатуға арналған опция.
  • алдын ала жүктеу - аудио файлды парақпен алдын ала жүктеу мүмкіндігі.

Барлығын біріктіріңіз, міне сізге:

[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 аудио ойнатқышын теңшеу

Менің сайтыңыздан көріп отырғаныңыздай, 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, керемет қолдау көрсетілетін плагиндер мен керемет қызмет пен қолдауға ие керемет плагин сайты.

Сен не ойлайсың?

Бұл сайт спамның төмендеуі үшін Akismet пайдаланады. Деректеріңіздің қалай өңделетінін біліңіз.