Як вставити аудіо на сайт

Універсальний спосіб вставки audio в web сторінку на основі HTML5 і флеш плеєра. Працює у всіх браузерах (і мобільних), легко налаштовується, має мінімум коду. Може програвати кілька файлів, як play лист. Чи не гальмує завантаження сторінки, відповідає стандартам, відкритий код. Ідеальний варіант для вставки mp3 і інших аудіо до статті. Є реалізація для WordPress в вигляді плагіна.

Ось як це буде виглядати:

Приклад вставки audio

У цій статті я описую реалізацію аудіо для тих, хто має можливість безпосередньо вставляти в свої статті HTML і js код.

Підхід використовує дві технології для програвання аудіо файлу і має три рівні "відмовостійкості":

Нам потрібні, толькл два файли з усього завантаженого архіву:

• player.swf це сам flash player. який буде програвати mp3 файли.
• audio-player.js це js, який додасть функціональності з управління плеєром і усуває неправильності його роботи в різних браузерах.

Файли з цього архіву потрібно розмістити на сайті. До речі js можете стиснути.
У цій статті домовимося, що приклади використовуватимуть директорію "/ audio" від кореня вашого сайту.

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

РЕАЛІЗАЦІЯ РІШЕННЯ У двох варіантах:

ПЕРШИЙ - Формуємо весь HTML код САМІ і вставляємо в статтю. Напишемо шаблон HTML коду в якому потрібно буде міняти тільки шляхи для конкретного випадку.

ДРУГИЙ - Формуємо HTML ЧЕРЕЗ js. В пост (або куди вам потрібно) вставляємо маленький блок коду js.