Има два подхода за създаване на почти всичко. Първият - е да се разгледа въпроса с замах, който се развива като цяло към частния, попълване конуси на проблеми при появата и надявайки се, че ще разберете във всички. Вторият - е да се създаде серия от прости тестове: разработване от частния към цялото. тестване на всяка стъпка, преди да можете да използвате плодовете на своя труд, за да създадете крайната, крайния продукт.
Всеки от тези методи има своите предимства, но втората, по правило води до по-добър резултат. Тук показвам втория подход за развитието на първоначалния прототип на уеб-аудио плейър, който въвежда в първата част на тази статия серия.
първоначалните елементи
Преди всичко нека да сме сигурни, че може да играе на аудио файла на страницата на всички. Тук използвам Track 24 от албума Призраци на III група NIN е лицензиран под Creative Commons:
Тъй като последните версии на Firefox, заедно с други модерни браузъри вече поддържат. тр 3. Тук се използва само този кодек. I поставя елемент
След като се уверите, че озвучаването работи, следващата задача е да създадете свой собствен потребителски интерфейс за играча.
Работата по постепенното подобряване
Добавен в долната част на HTML-страници, този сценарий всъщност намалява нашата аудио плеър с обикновен елемент
Сега ние можем лесно да настроите текста за всеки HTML-елемент.
След това трябва да се направи действителната бутона, за да направи нещо:
Създаване на «Mute» бутон
Също така, ние трябва да създадем контролите за силата на звука. Най-просто - правите бутон «Mute», която използва един модел много подобен на модела върху бутона за пускане / пауза:
Тази функция е малко по-суров, когато звукът е включен, тя определя обема на звука, за да му абсолютния максимум (доколкото системата), но в момента това е допустимо.
Създаване на контрол на звука
На следващо място, ние се нуждаем от по-точен контрол на звука. Очевидният кандидат за този контрол UI - елемент на «гама».
За съжаление, няма метод setAttributes. което ще позволи да се определят няколко атрибута едновременно. Въпреки това, за тази цел, ние можем да направим доста проста функция:
Сега вече можете да зададете атрибути на силата на звука кръг с един ред код:
Имайте предвид, че минималните и максималните стойности съответстват регулатор MUTER (функция).
На следващо място, ние добавяме един манипулатор събитие към контролера поле чрез задаване на силата на звука на аудио запис в контролната стойност вътре анонимен функция:
Тук сме изправени пред първия сериозен проблем: от функционална гледна точка, намаляване на силата на звука на 0 и кликнете върху «Mute» - това е едно и също, така че промяната на състоянието, за да се появи в бутона. Как да го направя?
контроли за синхронизация
Моето решение е да се игнорира бутоните и следете за евентуални промени в обема на самия елемент
Има още едно нещо, което трябва да се поправи. Когато песен свършва, музиката трябва да се върнем към началото и бутона за възпроизвеждане трябва да се покаже «Играй» вместо «Пауза» и «Стоп»:
Този код предполага, че след като сценарият е зареден, всички условия, ще бъдат идеални: че браузърът поддържа HTML5 и всички функции на API, което е, ние използвахме и че записът се зарежда веднага. Но това не винаги е така: например, Android 2 и по-долу не поддържа събитието. приключила за аудио. Има начини да се получи около това и много folbekov, че бихме могли да добавят, но аз няма да се обърне внимание на тях днес.
Послепис Може също така да се интересуват от:
По-малко от шест месеца след датата на последния промяната в W3C работен процес, тъй като ръководството на консорциума са получили предложение да се прилага този нов процес в крайна сметка по случая. И отписване е без значение HTML спецификация на музея, така че те не са объркани разработчиците ", който се представя за" значение.
Друг CSS модул, което ни казаха тихо падежът на статута, с които W3C съветва да започне рутинното използване на нови продукти. съдържа имот ви позволява да ограничите промяната на чертежа на дърво, прекрояване на CSS-кутии и да промените размера им в рамките на елемента. Ето защо е толкова важно ...
ОЩЕ
От Париж (на снимката), който наскоро премина CSS заседание на работната група, пристигнала забавни новини: Имоти решетка ред дефицит и решетка-колона-празнина, както и намаляването на решетка-празнина ...
Свързани статии