С напредването на браузърите в поддръжката на новите стандарти лавинообразно расте и интереса към използването на най-новите възможности за по-добро семантично описание на страниците или за постигане на по-добро оформление и по-добра типография без нужда от картинки. Но може би най-голям интерес има към публикуването на аудио и видео в уеб чрез новите елементи на HTML5. И докато около видеото и възможностите на различните кодеци и поддръжката им от браузърите се вдига доста шум, рядко се говори за аудио. Тъй като аз пиша за музика и от време на време споделям музикални файлове, си направих труда да разуча как се работи с audio елемента и дори стигнах до там да не разчитам изцяло на флаш-плеъра от Yahoo!, който ползвах до сега в блога.
В следващите редове ще ви покажа малките ми експерименти, чрез които опознах елемента audio и се надявам те да послужат като вдъхновение за повече хора да използват новите възможности на HTML5, вместо да разчитат на външни компоненти.
Всъщност все още няма как да измъкнем от лапите на флаша. Обичайният заподозрян браузър все още е една версия преди пълното щастие, но светлината в тунела се вижда. Ако още не сте пробвали IE9 Preview, направете го, ще останете силно обнадеждени за бъдещето на уеб. И след това необичайно оптимистично оплакване от IE, да си дойдем на думата:
Според спецификациата на HTML5 елементът audio може да има следните атрибути:
src— URL указващ звуковия файл или потокpreload— указва дали файла да бъде буфериран автоматичноautoplay— указва дали файла да бъде изпълнен автоматичноloop— указва дали звукът да бъде повтарян до без крайcontrols— указва дали браузърът да показва собствен интерфейс за контрол
Освен чрез атрибута src, аудио-потокът може да бъде указан и чрез влагане на един или повече елементи source, всеки от които описва алтернативен източник чрез собствен атрибут src.
<audio src="elvis.ogg" controls preload></audio> или <audio controls preload> <source src="elvis.ogg" /> <source src="elvis.mp3" /> <!-- now include flash fall back --> </audio>
Освен това audio елемента разполага с доста свойства и методи в DOM за управление на изпълнението и информация. Можете да пускате и спирате изпълнението с play() / pause(), съответно да проверите в какво състояние е в момента плеъра, до къде е стигнал в изтеглянето на файла или до къде е стигнал в изпълнението.
Та поиграх си аз няколко вечери, за да достигна до нещо подходящо за показване. Целта беше на напиша скрипт, който от съдържащите се в страницата връзки към mp3 файлове да състави плейлист, който да се изпълнява чрез audio елемент. Първият опит беше просто това – малко HTML5 и малко JavaScript – щракаш върху песен и тя се изпълнява, щракаш върху друга и сменяш. За да се изпълнява музиката във възможно най-много браузъри качих парчетата в mp3 и ogg формат. При зареждането на страницата правя проверка какъв формат поддържа браузъра и ако поддържа ogg, заменям в адреса на файловете mp3 с ogg преди да го присвоя на src атрибута на audio елемента. Ако не поддържа ogg, а поддържа mp3, подавам му директно адреса. Подавам с предимство файловете в ogg, защото има по-добро съотношение качество/компресия и би следвало да спестим трафик при едно и също качество или пък да предложим по-добро качество при същия размер на файла.
Обаче исках да продължа напред – може ли от това да стане наистина плейлист, в смисъл да има собствени контроли, от една песен да преминава на следващата и така нататък. След още малко експериментиране стигнах и до следващия вариант, който има бутони за преминаване към следващата или предишната песен, бутон за свирене / пауза и индикатор за това каква част от песента е изпълнена.
Няма да ви занимавам прекалено много с код, всичко е в примерите и не е сложно. Искам обаче да ви обърна внимане на това, че различните нови неща в HTML5 са наистина част от един по-голям замисъл и чудесно се допълват едно – друго.
Ако искате да изпълнявате песните една след друга, трябва да знаете коя се изпълнява в момента, нали така? В доброто старо време сигурно щяхме да съхраняваме тази информация в някаква променлива, а на съответния елемент да добавим някакъв клас, за да се отличава от останалите. Обаче с HTML5 има по-лесен начин – data-* атрибутите. Просто на изпълняваната в момента песен добавям атрибут data-play="true" и се уверявам, че няма друг елемент от плейлиста с такъв атрибут. Това ми позволява след това да взема индекса на този елемент в колекцията (да живее jQuery), а също така и да използвам атрибута в CSS, за да го накарам да се отличава. Ключов момент е факта, че всички браузъри, които поддържат audio елемента, поддържат и селектори на базата на атрибути в CSS. И така с един куршум отстреляхме два заека.
Има още много неща, които могат да се добавят към малкия ми експеримент (индикатор за процеса на изтегляне, контрол на силата на звука, управление с клавиатурата…), но за мен това беше достатъчно, за да изпробвам възможностите на HTML5 за публикуване на музика и да разбера дали мога да ги използвам в блога. След като пробвах резултата във всички достъпни ми браузъри, използвах първия вариант, за да направя малко разширение за WordPress, с което да заменя плеъра на Yahoo!, който ползвах до сега. Естествено лузърите за с IE все още ще се грижи плеъра на Yahoo!. Ако браузъра не поддържа HTML5 audio или не може да изпълнява ogg или mp3, ще използва него.
И накрая едно допълнение – списъкът с песни в примерите е от първата ми публикация за музика. От както я написах мина доста време, през което успях да намеря липсващото парче в нея – изпълнението на Ледбели на Gallows Pole, или Gallis Pole, както е записана тогава.