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

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

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

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

Зауваження автора: Описаний в статті метод вставки відео прекрасно працює, проте він заснований на використанні flash плеєра, як програвача аудіо за замовчуванням, що не є проходженням актуальним тенденціям в Інтернеті, де зараз спостерігається зрушення переваг на користь використання js плеєрів. Але, на мій погляд, рішення повинно бути якомога простіше і без великих бібліотек і безлічі коду, а js плеєри, поки ще, залишають бажати кращого в цьому відношенні.

Як то мені потрібно було для себе вирішити задачу - як додати в пост свою голосову замітку. Це мала бути дуже простий спосіб з невеликою кількістю коду, який я міг би зберігати разом з основним текстом статті. Так само я планував надалі оформити це у вигляді плагіна до CKEditor, який використовую як редактор тексту в своїх CMS. Переглянувши різні джерела і протестувавши їх я сформував, на мій погляд,, яке і описано тут.

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

1. Перша, буде основною - це флеш плеєр. Мною обраний був вільний, який буде відтворювати звук в тих браузерах, які підтримують flash плеєр. Причина вибору мною в цьому підході flash, як основного плеєра для аудіо, в тому, що він буде відображатися однаково в різних браузерах на відміну від HTML5 плеєра, вид якого, поки, залишає бажати кращого. А підключати для відтворення аудіо JS бібліотеку управління HTML5 плеєром мені здається не зовсім доцільним, так як, такі JS плеєри все ж громіздкі і не так ідеальні, як хотілося б. Для Відтворення відео файлів, безумовно, потрібно використовувати, як первинний, JS HTML5 плеєр. Взагалі, в ідеалі, хотілося б обходитися для відтворення аудіо та відео без використання додаткових плеєрів (flash або JS), а використовувати тільки можливості браузера .;
2. Друга - HTML5 тег <audio> - буде резервною для випадків, коли flash не підтримується. В основному, це MAC і iГаджетов, але у них HTML5 плеєр вже досить добре реалізований в браузерах.
3. Третій, резервний варіант, буде посилання на стрибка, коли перші дві не спрацюють. Це варіант на крайній випадок, так як зараз вже все браузери підтримують HTML5 тег audio.

Нам знадобитися завантажити zip з файлами flash плеєра і js до нього ( посилання на офіційний сайт ).

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

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

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

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

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

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

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

Ще по темі:

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