Html5 устройство - аудио заснемане в браузъри

Най-новите html спецификации имат много готини екстри и едно от тях, за което никой все още не говори, е елементът устройство. Осигурява достъп до устройства като камера или микрофон. И въпреки че този елемент все още не се поддържа от нито един от браузърите, това е бъдещето на уеб разработката.

HTML5 е стандарт от ново поколение за браузъри, най-новата разработка на WHATWG и в момента се прилага от разработчиците на браузъри. Разработването на спецификацията отне повече от пет години и все още е в процес на разработка. HTML5 направи голяма крачка в превръщането на браузъра в по-силна платформа за приложения с някои нови функции. WebSockets и изпратените от сървъра събития са отворени за гъвкави уеб приложения, докато медийните елементи и елементът canvas могат да се използват за безпроблемно вграждане на нови типове съдържание в уеб страници. И така, каква е следващата стъпка в HTML?

Отговорът на въпроса по-горе ще ви даде възможност да контролирате нови видове входни устройства. HTML елементът на устройството предоставя достъп до устройство, което осигурява достъп до устройства като микрофон или уеб камера. Кодовият фрагмент по-долу демонстрира как елементът устройство и Stream API могат да се използват за запис на кратък аудио клип. Моля, имайте предвид, че елементът на устройството и свързаните с него API все още не са налични в нито един браузър и може да се променят преди пристигането на браузъра. Както и да е, досега кодът изглежда така:

Когато е избрано устройство, се извиква събитието за промяна, на което можете да закачите обратно извикване, за да реагирате на промените. Свойството data е Stream обект, който представлява избраното устройство.

Бутонът служи както за стартиране, така и за край на записа, като с натискането му сменяме надписа от възпроизвеждане на пауза и обратно. Когато се обаждамезапис, обектът Stream започва запис и връща обект StreamRecorder. С помощта на таймер ограничаваме продължителността на записа до 10 секунди.

Записът спира при натискане на бутона за спиране или след изтичане на 10 секунди. Записаните аудио данни се извличат от обекта StreamRecorder чрез извикване на метода "stop". Записаните аудио данни се представят като файлов обект (W3C File API). Сега изборът е ваш какво да правите със записания клип, може би ще го публикувате на уеб сървър.

И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".