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

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

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

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

HTML5 шаблон:

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

• значення 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 файлу в секцію

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

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

Ще по темі:

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