Andew.ru | HTML шаблон для вставки audio на сторінку

Стаття є частиною теми Як вставити аудіо на сайт і описує варіант, коли ми формуємо весь HTML код САМІ і додаємо його безпосередньо в пост. Тут представлений шаблон блоку HTML коду для audio в якому вам залишиться тільки підставити свої шляхи до ваших звукових файлів. Код перевірений мною і працює у всіх основних браузерах.

Я віддаю перевагу саме це варіант тому що:

  • він простий і зрозумілий;
  • працює коли у клієнта відключений js (пам'ятаємо, що наша мета донести контент до користувача). Також не забувайте, що не всі роботи виконують js код, а тому вони можуть не побачити ваш аудіо контент якщо ви генеруєте його код за допомогою js;
  • дозволяє вставляти код прямо в текст статті;
  • дозволяє самому модифікувати код (можна прикрасити вставку аудіо);
  • дозволяє виконати мікророзмітки вашого audio ;

Якщо перед вами стоїть питання з якого хостингу завантажувати мультимедійні файли аудіо і відео, то подивіться статтю Yandex Disk REST API jQuery Plugin , В якій описаний варіант вставки медіа файлів на WEB сторінку з Яндекс Диска.

HTML5 шаблон:

<! - HTML5 шаблон коду для вставки audio до статті -> <div> <h3> Заголовок audio </ h3> <object id = "audioplayer_1" width = "290" height = "24" type = "application / x -shockwave-flash "data =" / audio / player.swf "> <param name =" movie "value =" / audio / player.swf "> <param name =" quality "value =" high "> <param name = "menu" value = "false"> <param name = "wmode" value = "transparent"> <param name = "flashvars" value = "playerid = audioplayer_1 & soundfile = / audio / your_file.mp3 & width = 290"> <div> <audio controls = "controls" preload = "none" style = "height: 28px; width: 66%;"> <source src = "/ audio / your_file.ogg" type = "audio / ogg"> <source src = "/audio/your_file.mp3" type = "audio / mpeg"> <p> HTML5 audio не підтримується у вашому браузером. </ p> <p> <a href="/audio/your_file.mp3"> Завантажити audio </ a> </ p> </ audio> </ div> </ object> </ div> <! - Кінець HTML шаблону для вставки audio до статті ->

Якщо потрібно вставити кілька плеєрів на сторінку, то повтори цей блок коду зміниться тільки:

  • значення ID в тезі і в параметрі плеєра, що б ID був у кожної вставки коду свій;
  • шлях до файлу з audio. (Шлях до самого плеєра буде скрізь однаковий)

Пояснення до коду:


1) атрибути тега

  • id = "audioplayer_1" -Бажано задавати, особливо якщо аудіо-файлів буде кілька на сторінці, це id буде використано як одні з параметрів переданих flesh плеєру (див.нижче);
  • width = "290" height = "24" ширина і висота в пікселях, задавати потрібно обов'язково !, можете залишити ці значення;
  • type = "application / x-shockwave-flash"-значення постійно;
  • data = "/ your_path / player.swf" -це шлях до файлу flash плеєра, може бути як абсолютний (як в прикладі) так і повний з http: // ...;

2) теги містять імена параметрів і їх значення для object. Опишу тільки деякі:

  • value = "transparent"-задає прозорість вікна плеєра, можна залишити як є;
  • - важливий параметр, в value якого задаються параметри які будуть передані flash плеєра. Тут розглянемо тільки обов'язкові параметри, всі можливі дивись на сайті джерелі . Параметри пишуться в один рядок без розриву і об'єднуються через знак &

Обов'язкові параметри:

  • soundfile -як шлях до mp3 файлу, може бути абсолютним як в прикладі так і з http: //. Файл може знаходиться і на іншому сайті, головне що б він віддавався при зверненні до нього. (Див. Статтю про те як правильно підготувати звуковий файл для хостингу скоро);
  • width = 290-поставити теж значення що і в атрибутах тега. Параметр обов'язковий.
  • playerid -вказати значення атрибута id з тега, якщо ви задавали його.

3) Всередині тега вкладений контейнер <div> з тегом HTML5 вміст якого буде показуватися в тих браузерах, які не підтримують flash, але підтримують HTML5.

4) атрибути тега -стандартні і описані всюди-детально можете почитати тут посилання

5) Атрибути тега задають шлях до mp3 файлу і тип файлу. Оскільки браузери читають кожен свій набір форматів, то що б бути впевненим що ми догодимо більшості браузерів зазвичай вставляють два і більше тегів з шляхами до файлів різних форматів одного і того ж audio. В основному для звуку потрібно вказувати два формати mp3 - завжди (він у нас і flash плеєром буде відтворюватися), і додатковий .ogg. В принципі достатньо і одного mp3, тому що він відтворюватися браузерами які не підтримують flash. Якщо будете використовувати тільки одні файл то можете шлях до нього помістити прямо в тег і не писати тег взагалі.

6) У тегевложена фраза і посилання на скачку файлу для тих випадків якщо виявиться що браузер не підтримує і тег HTML5

7) Розробники плеєра також рекомендують додати в секцію web сторінки audio-player.js файл, коригувальний роботу плеєра в різних браузерах і надає розширений функціонал по управлінню ним через js. Тут вирішуйте самі. Я не додаю цей файл тому плеєр і так нормально працює в основних браузерах, а керувати ним за допомогою js при такому варіанті його додавання на сторінку мені не потрібно. Всі параметри, які передаються за допомогою js плеєру можна передати і тут через значення в flashvars. До того ж цей js файл все ж важить 29KB і плюс додатковий запит до сервера. Якщо ж ви хочете управляти плеєром з js і генерувати код за допомогою нього, то дивіться моє опис другого варіанту вставки плеєра засноване на js.

Код для підключення js файлу в секцію

<Script type = "text / javascript" src = "path / to / audio-player.js"> </ script>

Разом у нас виходить триступенева система по донесенню нашого звуку користувачеві - спочатку ми намагаємося відтворити його через flash плеєр, якщо невдача, то намагаємося через HTML5, і якщо і тут невдача, то пропонуємо скачати файл.

Наведений тут шаблон універсальний і вам не обов'язково використовувати тільки вказаний. Ви можете вибрати будь-який інший, який вам більше сподобатися, для цього просто в шаблоні HTML коду, в тезі підставу шлях до свого плеєра і подкорректируйте передачу параметрів йому відповідно до документації. А в іншому шаблон коду залишиться незмінним.

Ще по темі:

Реалізація video і audio в HTML5, шаблони, schema.org мікророзмітки

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

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: