<
  • Главная
Статьи

Додаємо музику в свій блог

Для того щоб додати музичний плеєр на сторінку сайту або блогу, в більшості випадків навіть не потрібно реєструватися на всілякі сервіси, що надають послуги аудіо хостингу.
Розмістити музичний файл або аудіо запис на будь-який веб-сторінці, можна використовуючи пряме посилання на сам файл і спеціально призначений для вставки аудіо-файлів тег, доступний в 5-ій версії HTML. Плеєр і всі елементи управління створить браузер, єдина умова щоб він, браузер, був більш-менш сучасним.
Щоб використовувати тег <audio>, який служить контейнером для розміщення аудіо-файлів і виведення плеєра на сторінці сайту, потрібно переконається що тип HTML документа (DOCTYPE) сайту вказано правильно

Тег <audio> володіє настройками, за допомогою яких можна управляти відтворенням доданого файлу, але потрібно сказати що зовнішній вигляд плеєра буде таким, яким його задумали розробники браузера, хоча за допомогою jQuery і CSS3 як завжди можна творити чудеса .
Щоб встановити плеєр на сторінці, потрібно додати в її HTML код запис тега, яку можна зробити двома способами:
1.

<audio src = "../прямая посилання / на / файл"> </ audio>

2.

<Audio>
<source src = "../прямая.ссилка.на.файл">
</ Audio>

У другому варіанті записи, можна додати кілька посилань з джерелами на різні формати файлів, для універсальності. Наприклад: mp3 і OGG, щоб бути впевненим що файл буде відтворено в більшості браузерів, тому що різні браузери можуть відтворювати різні формати файлів. (В IE, аж до 9-ої версії тег працювати не буде - в IE9 буде).
Для відтворення аудіо файлів в браузері є всього три формату - mp3, OGG і WAV.


Додатково тег <audio>, підтримує такі атрибути:
- autoplay - самовідтворення аудіо-файлу після завантаження сторінки;
- controls - додавання панелі управління - плеєра. (В різних браузерах плеєр буде виглядати по-різному);
- loop - автоповтор;
- preload - буде завантажувати файл разом із завантаженням веб-сторінки;
- src - шлях до воспроизводимому файлу.
Найпростіша запис для плеєра буде виглядати так:

<Audio controls>
<source src = "../ прямая_ссилка / file.mp3" type = "audio / mpeg">
<source src = "../ прямая_ссилка / file.ogg" type = "audio / ogg; codecs = vorbis">
Тег audio не підтримується у вашому браузером. <a href=".../file.mp3"> Завантажити музику </a>
</ Source>
</ Source>
</ Audio>


Довантажувати свої аудіо файли і отримувати пряме посилання на них, поки що, на халяву, можна як і раніше на сервірують Google. наприклад використовуючи Сайти Гугл , Хоча як показує практика і інші хмарні сервіси не гірше.

Корисний об'єм Гугл-сайту - 100 МДБ, тому сильно не розгуляєшся з пісеньками, з іншого боку, завантажуючи файли туди, отримуєш хост-посилання, що вже не є для Драйв, крім того можна пожертвувати трохи якістю і довантажити в межах 50-ти - 40-а композицій, а це ні багато-ні мало - вже пара, а то і три альбоми.


Під завісу дивовижна мелодія від Two Steps from the Hell:



Тег audio не підтримується у вашому браузером. завантажити mp3 .

Ось і все всім удачі і хорошого настрою.


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью