HTML5 тэг <audio>

15-03-2010

В этом уроке мы попробуем применить HTML5 тег audio, этот тег позволяет воспроизвести аудио файл без использования Flash и JavaScript, единственный минус это наверное то что HTML5 как и CSS3 работает пока не во всех браузерах, а не работают они в сравнительно старых браузерах и во всех IE это что касается популярных браузеров, на счет непопулярных не знаю проверяйте сами.

Синтаксис:
Открывающий тег <audio> и закрывающий </audio> как собственно и все остальные теги, имеет несколько атрибутов:

src – адрес к воспроизводимому файлу (адрес конечно валидный)
autobuffer – тип этого атрибута логический (boolean) то есть да или нет, определяет будет ли воспроизводимый файл предварительно заноситься в буфер или нет
autoplay – тоже логический тип, определяет будет ли файл воспроизводится сразу при открытии страницы либо после нажатия кнопки play
controls – логический тип, показывает или скрывает панель для управления аудио файлом то есть плай, пауза и т.д.

С синтаксисом наверное все, но также нужно отметить что разные браузеры поддерживают разные кодеки допустим:
Safari 4 – wav, mp3
FireFox 3.5 – ogg, wav
chrome 3 – ogg, mp3
Ну про остальные браузеры я не знаю . Сейчас я покажу вам пример работы этого тега:
Во первых вам нужен будет аудио файл, я думою у всех есть , далее вам придется конвертировать из него mp3 и ogg так как разные браузеры поддерживают различные кодеки, затем вам нужно будет расположить эти два аудио файла в той же директории в которой будет находится ваша страница, что бы не писать абсолютный адрес к файлу.
После чего создаем html файл и между тегами body пишем следующий код:

<audio autoplay controls>
	<source src="file.ogg" />
	<source src="file.mp3" />
</audio>

здесь file это название вашего аудио файла ну и после точки соответствующий формат source мы написали два раза для того что бы каждый браузер мог прочитать свой вид кодека. Так как autoplay и controls имеют логический тип мы их просто указываем в открывающемся теге, хотя можно было написать и так autoplay=”autoplay” controls=”controls”. Ну вот наверное и все смотрите демо с песенкой

Masha3.19.2010 07:03

Вышел браузер «Сафари» версии 3.1, в пресс-релизе написано, что «Сафари» — первый браузер, поддерживающий новые теги video и audio из HTML5.

ответить

admin3.19.2010 08:03

Кому:Masha, там наврали значит))) у меня лично на firefix'е все работает можешь проверить если хочешь, можешь дать ссылку на ресурс где такое пишут?

egor10.9.2010 05:10

а будет воспроизводит потоковое аудио? если вставить не название.mp3, а ссылку:порт?

CyberTech2.7.2011 07:02

В ИЕ 8 еще нет такой поддержки, в Опера 11 и ФФ 4 (бета) и Chrome 9 все отлично работает. Считаю рановато еще применять на сайтах HTML5 - как минимум половина посетителей не сможет оценить его достоинства. Так как не каждый обновил браузеры до нужной версии или еще сидит на ИЕ 8 .А таких тьма - так как сновная масса пользовталей Интернета - обычные люди многие из которых знают только как включить/выключить комп + ткнуть на нужное приложение, чтобы в нем работать. Такие задачи как обновление ПО и установка нового эту публику приводит в ступор. При чем это касется не только поколения за 40, но и даже молодого. Для меня было удивлением узнать (когда ездил на вызовы по настрйоке ПО), что как миниумм n-ная часть молодого поколения не знает даже как переустановить винду.

admin2.7.2011 07:02

ну можно ж поставить, фолбэк. то есть если не поддерживается HTML5 все открывается через flash

CyberTech2.7.2011 09:02

хз.. все равно считаю рановато. А делать всеобщую поддержку - это дело довольно трудозатратное. Проще использовать уже обкатанное и поддерживающее всеми браузерами. Кстати, мне вот интересно как браузер понимает чем проигрывать файл? Это завивит от предустановленных плагинов для браузера или плеер уже встроен в сам браузер? Если вариант второй, так вообще скоро будет просто идиллия для вебмастеров ))) Не надо использовать всякие плееры (нагружать тем самым сервер), да и пользователям хлопот меньше - все будет унифицировано в одном стандарте. Хотя исходя из поддержки форматов - могли бы конечно и больше сделать. wav, mp3 и ogg - всего лишь небольшая часть и огромного списка. Тээкс. Только что поставил ИЕ 9 (бета) - фишка работает, но почему то обрезало песенку до 22 секунд. Т.е постители, использующие ИЕ (при чем от .. и до 9 версии) уже явно отпадают. Кстати, баг нашел у тебя один: При нажатии на Reply в Опере 11 все правое меню ушло под форму ответа

admin2.7.2011 09:02

я вообще думаю что если сейчас не использовать HTML5 то потом он никому не нужен будет... и вообще надо выводить сообщения для пользователей ie о том что их браузер говно.... да тут много багов в верстке, надо будет переверстать как нибудь... ну все равно спасибо))

эммм. тэги не прошли ))) в общем погляди кооректность кода формы Reply именно ту часть которая отвечает за нажатие. При чем меню сползает именно, когда пишешь ответ, а когда отправишь - меню нормально снова отображает.

;) смотри внимательно кнопку Reply скорее всего там у тебя ( при нажатии ) не закрыт тэг либо либо либо в связи с чем правое меню как бы становится часть формы поля ответа. На счет ИЕ соглашусь - не браузер, а г**** полное. Но вынуждены все мы и под него подстраиваться. Вообще не знаю, у меня проблем с кросбраузерностью не наблюдалось практически никогда. Хотя и спецом для каждого браузера хаки не использую. Хз, может быть просто коды составляю верно и не заморачиваюсь чрезмерными наворотами. Голое CSS и HTML юзаю Кстати, тут у себя пытался применить слайд шоу на Джиквери, что-то у меня как-то так и не получилось корректной работы. При обновлении картинок именно в момент обновления отображает почему-то предыдущую как бы как призрак. Т.е выглядит это таким образом: Появляется новая картинка и в момент ее появления дополнительно (на момент ее загрузки) рядом отображется предыдущая. Хз что ей надо, решил не заморачиваться и убрал вообще слайдшоу :) Может быть, когда выздоровлю и мозг не буджет опухшим от насморка и чихания так найду причину ;)

мм а че ты используешь?... плагин или сам написал?

та я сам с нуля всегда пишу. Замороченно конечно было по началу. Но уже почти свою CMS практически сделал за счет постоянного улучшения. Теперь уже стало проще намного )) Вот недавно сделал так, чтобы у каждой страницы автоматом свои титлы, ключи и так далее было (т.е оптимизация под поисковики) Т.е шаблонизировал все по категориям. Отказался от шапки, которая раньше была на все страницы одна. Явные плюсы своего движка - никто не знает есть ли дыры или нет + когда сам с нуля пишешь проще ориентироваться где и что ))) Достали меня все эти ДЛЕ, ВордПрессы и Джумлы с их навороченными кодами и кучей дыр. Вообще коды пишу все в блокнотике. Не знаю, так и не привык ко всяким HTML редакторам.

а слайд шоу хотел применить тут _test.itraffik.ru_ (это для тестов поддомен) делаю новый шаблон для игрового сайта + перевожу на улучшенный движок. Хотел сделать, чтобы игры как слайдшоу шли.

даа))) с нуля всегда интересней писать, я тоже сейчас занимаюсь одним проектом... ischoool.ru поэтому блог подзабросил... а че за CMS? не знаю с слайдшоу у меня никогда проблем не было... надо будет статью ка нибудь написать.. :)

CyberTech2.7.2011 10:02

вот погляди.. единственный мой минус я не умею красочно и сексуально все делать. Вот поэтому и лажу по таким блогам как твой чтобы найти разного рода украшательства )) я больше по функционалу специализируюсь )) Вот мое творение _online-nso.ru_ Можешь поковыряться поглядеть ))) Единственное не стал делать комментарии на сайте, так как в них вечно срут спамом )))))) В итоге мне это надоело и я вообще убрал такую фишку. Пока не знаю как назвать CMS тем более чтоя как бы даже и не на продажу делал его. Так чисто для себя да для парочки давних клиентов. Счас погляжу твое творчество :)

поглядел твое творчество. что-то для школы собрался делать? Кстати почему так долго грузится у тебя все? Что этот сайт, что айскул. Хост что ли слабенький? Или скрипты не оптимизированные?

admin2.7.2011 10:02

там зарегиться надо будет... или если хочешь доступы могу скинуть...

так а для чего мне регаться то? )) я ж давно уже не школьник )))

просто с главной страницы ничего о проекте не поймешь, пока..

дааа с сексуальностью явно проблемыыы))))))

вот о чем и веду речь ))) Я сторонник делового минимализма ) Но заметил, что многие любят, чтобы прям аж в глаза все моргало )))))

не знаю мне больше серые тона нравятся...))

а какая страница именно?... главная?

да вообще все страницы *смущенно*. имено таким образом получается. когда впервые заходишь то долго грузится у тебя все. А вот когда уже начинаешь лазить, то нормуль. Я эту проблему решил просто и легко один коннект к базе и все дела. Возможно слишком много коннектов у тебя идет либо хост слабенький. У меня когда то был скрипт там чуть ли не перед каждым запрсов в БД были коннекты к ней. И вот когда в среднем по человек 100-200 тусило одновременно на сайте, был полный абзац. Я полазил поудалял все на хер, оставил один коннект в шапке тем более она грузится везде и тем самым забыл о долгой загрузке и вообще о нагрузке на сервак. Хотя конечно можно еще и закэшировать дополнительно инфу. Но пока эти не заморачивался )))

ну у меня там один коннект (там класс работающий с БД подключается один раз)... там скорей всего MySQL запросы не оптимизированны... надо будет посмотреть... спасибо еще раз))

_online-nso.ru_ тут еще более сексуальный вывод инфы сделаю и все ) просто сайт достаточно недавно запустил . Для меня важнее было улучшить движок в плане оптимизации под поисковики, чем сам дизайн. В принципе там по сути сложного в дизе особо нет. Хочу чтобы каждая новость в стиле веб 2.0 была. Сделать два файла с закругленными концами, сделать еще стили для div дополнительные в которых эти файлы будут прописаны типа как верх и низ и усе готово. Все упирается в фантазию )) Какой цвет, какое украшательство прицепить и так далее.

ну вот цвета у тебя там, не подходят что ли... вот прога оч помогает при подборе цветов http://www.colorschemer.com/studio_info.php он платный, есть крякнутые поищи)

та если честно писдюка одного послушал мол делай в синих тонах делай в синих тонах... у меня ранее фон был светлосерым (белый сильно в глаза бьет) и как то нормуль все выглядело. А когда придал фону цветность пришлось цветность и всему остальному делать. И тут начались траблы как бы сделать так чтобы все сочеталось, но при этом, чтобы не получилось все пестро как у попугая и выдержано в одном стиле и короче тут я пал жертвой дизайна )))

по поовду проги спс большое. уже смотрю цветовые схемы

ладно.. не буду отвлекать )) надо сидеть и фантазировать )))) Хотя как подумаю об этом, так сразу наступает великая лень ) Мне проще что-то из функционала сделать, чем дизайнерить :) :) :) На счет мускула - погляди может как то еще неверно прописаны типы полей. Тоже кстати замедляет обработку инфы. Но думаю дело не в этом. Смотри у тебя по сути на том же айскул нет ничего, что выводится через БД в данный момент. Единственное - форма регистрации и то, запрос срабатывает, когда его отправляют (т.е когда заполнили рег.данные и нажали зарегаться)

александр4.20.2011 01:04

в Хроме через audio, всех остальных через компонент видеогалерея(bitrix), работает. Firefox4,Safari,IE9 с тегом audio не заработали у меня. Через USER_AGENT определил Chroma остальные компонентом работали. Был глюк когда в Хроме не играл, пришлось комп перезагрузить, странно работает. Отчего была проблема неизвестно, может спящий режим...

Axe7.3.2011 07:07

запуск аудио по кнопке - работает. как остановить воспроизведение?

пацан8.12.2011 05:08

у меня работает в ie9, google chrome, opera, firefox. в safari не работает вообще, ни в 4, ни в 5 версии. даже онлайн тест мне показывает, что safari не поддерживает тег audio.

dzantiev8.14.2011 08:08

не знаю ничего про сафари не могу сказать.., но по идее должен работать, не проверял еще

Lumen11.9.2011 06:11

С <a href="yourmusic.mp3" rel="nofollow">Open music</a> Тоже самое ведь

Я имел ввиду с кодом

с а хревом

dzantiev11.9.2011 06:11

так?)))

Сирожа12.22.2011 08:12

аЕ! Е е!))

юра3.12.2012 11:03

проблема: когда ставлю два плеера html5, для двух песен. Кнопка плей, и с первого плеера и с второго, запускает первую песню. Как разделить? чтоб первый плеер играл первую песню а второй - вторую песню Использовал такой код: Play Music Pause Music Stop Music

ОСТАВИТЬ КОММЕНТАРИЙ

'Prootime

HTML5 тэг <audio>

ПОПУЛЯРНЫЕ ЗАПИСИ

Click here to cancel reply.

ПОСЛЕДНИЕ ЗАПИСИ

ГРУППА ВКОНТАКТЕ