Как добавить музыкальный проигрыватель в Blogger: Как разместить аудиоплеер на Blogger

Установка музыкального проигрывателя HTML5 в Blogger

 Расскажу как  добавить на блог аудио плеер. Выбор метода зависит от задач: либо встроить с помощью HTML-кода непосредственно в шаблон Темы или − с помощью гаджета  HTML/JavaScript.

Показать статью

Как вставить код музыкального плеера в шаблон Темы блога на Blogger

1. Откройте Тема➨Изменить NTML.
2. Найдите строку с тегом <body>. Это будет начало тела страницы.
3. Вставьте приведенный ниже код плеера сразу после тега <body>.
4. Не забудьте заменить https:// example.com/audio.mp3* на путь к вашему реальному аудиофайлу.

 <!-- 🎵 Аудиоплеер в шапке -->
<audio controls='controls' style='display:block; margin:10px auto;'>
<source src='https://example.com/audio.mp3'* type='audio/mpeg'/></audio>
  

Как вставить код плеера через гаджет HTML/JavaScript на Blogger

• На панели управления блогом в левой части экрана выберите "Дизайн" ↦   
  "+ Добавить гаджет" ↦ "HTML/JavaScript".
• В поле "Содержание" вставьте HTML-код плеера, например

<audio controls>
  <source src="https:// example.com/audio.mp3"* type="audio/mpeg"></audio>
    

• В поле "Название" —  например, Слушать нашу музыку.
• Нажмите "Сохранить", чтобы добавить гаджет в  блог.
• После этого плеер должен появиться на выбранном вами месте в макете блога. Обновите страницу блога, чтобы убедиться, что плеер работает корректно.

✏️Совет. Как создать необычный музыкальный проигрыватель в виде пластинки?

С помощью HTML, CSS и JavaScript можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта, звук появляется при наведении на пластинку.

🔽 Для скачивания кода плеера перейдите по ссылке:
👉 Код плеера

🔽 Демо плеера:
👉 Демо стильного плеера

💡 Замените ссылку, https://Modern-Talking-Romantic-Warriors.mp3, на свою прямую ссылку на MP3.

Перед воспроизведением музыки, кликните в любом месте по экрану, чтобы активировать звук, затем наведите на пластинку.