HTML5 API работы с вибрацией

Vibration API есть? А если найду? HTML5 для мобильных устройств

Если я, приступая к этой части рассказа об HTML5, скажу что-то вроде «мобильные устройства получают все большее распространение, как интернет-обозреватели», это будет не просто банальность, а самая настоящая глупость. На долю телефонов, смартфонов и планшетов уже приходится большая часть www-трафика, мобильные устройства — уже сейчас основные потребители Интернета, и с этим нельзя не считаться. Впрочем, создателей браузеров (по крайней мере, некоторых) в бездействии обвинить трудно. В этой главе рассказывается о нескольких API, специфичных для мобильных устройств.

В чем вообще заключается принципиальное отличие веб-приложения, запущенного на планшете или смартфоне от такого же, работающего на десктопе? Кроме некоторых неподдерживаемых стационарным компьютером возможностей, еще и такой прозаической вещью, как необходимость учитывать ограниченный заряд батареи. Вот с этих жестоких реалий и начнем.

Vibration API (Second Edition)

W3C Recommendation 18 October 2020

Please check the errata for any errors or issues reported since publication.

The English version of this specification is the only normative version. Non-normative translations may also be available.


This specification defines an API that provides access to the vibration mechanism of the hosting device. Vibration is a form of tactile feedback.

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at

The following editorial changes were made since the W3C Recommendation 10 February 2015 (diff):

  • a privacy & security section was added based on risks of fingerprinting based on vibration
  • the reference to WebIDL was updated
  • the text has been aligned with the hook provided by latest Page Visibility API
  • the term «browsing context» was clarified to refer to «top-level browsing context»

This document represents the consensus of the group on the scope and features of the Vibration API. It should be noted that the group is aware of more advanced use cases that cannot be realized using this simpler first version. The intent is to address them in a future revision.

This document was published by the Device and Sensors Working Group as a Recommendation. If you wish to make comments regarding this document, please send them to (subscribe, archives). All comments are welcome.

Please see the Working Group’s implementation report.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

1. Introduction

This section is non-normative.

The API is specifically designed to address use cases that require simple tactile feedback only. Use cases requiring more fine-grained control are out of scope for this specification. This API is not meant to be used as a generic notification mechanism. Such use cases may be handled using the Notifications API [ NOTIFICATIONS ] specification. In addition, determining whether vibration is enabled is out of scope for this specification.

2. Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words MAY, MUST, and SHOULD are to be interpreted as described in [ RFC2119 ].

This specification defines conformance criteria that apply to a single product: the that implements the interfaces that it contains.

Implementations that use ECMAScript to implement the APIs defined in this specification must implement them in a manner consistent with the ECMAScript Bindings defined in the Web IDL specification [ WEBIDL-1 ], as this specification uses that specification and terminology.

3. Terminology

The concepts and are defined in [ HTML5 ].

4. Vibration Interface

The vibrate () method, when invoked, MUST run the algorithm for processing vibration patterns.

The rules for are as given in the following algorithm:

  1. Let pattern be the first method argument of the vibrate () method.
  2. Let valid pattern be the result of passing pattern to validate and normalize.
  3. If the result of running the steps to determine the visibility state [ PAGE-VISIBILITY-2 ] is not visible , then return false and terminate these steps.

To a vibration pattern given pattern , run these steps:

  1. If pattern is a list, proceed to the next step. Otherwise run the following substeps:
    1. Let list be an initially empty list, and add pattern to list .
    2. Set pattern to list .
  2. Let max length be an implementation-dependent maximum length of pattern .

    To using pattern , run these steps:

      An implementation MAY return false and terminate these steps.

    When the user agent determines that the visibility state of the Document of the top-level browsing context changes, it MUST abort the already running processing vibration patterns algorithm, if any.

    5. Security and privacy considerations

    Vibration API is not a source of data on its own and as such is not producing any data possible to consume on the Web. However, it is known that it can serve as a source of events for other APIs. In particular, it is known that certain sensors such as accelerometers or gyroscopes are prone to tiny imperfections during their manufacturing. As such, they provide a fingerprinting surface that can be exploited utilizing the vibration stimuli generated via the Vibration API. In this sense, Vibration API provides an indirect privacy risk, in conjunction with other mechanisms. This can create possibly unexpected privacy risks, including cross-device tracking and communication. Additionally, a device that is vibrating might be visible to external observers and enable physical identification, and possibly tracking of the user.

    For these reasons, the user agent SHOULD inform the user when the API is being used and provide a mechanism to disable the API (effectively no-op), on a per-origin basis or globally.

    6. Examples

    This section is non-normative.

    In the following example the device will vibrate for 1000 milliseconds (ms):

    In the following example the pattern will cause the device to vibrate for 50 ms, be still for 100 ms, and then vibrate for 150 ms:

    The following example cancels any existing vibrations:

    A. Acknowledgements

    The group is deeply indebted to Justin Lebar, Mounir Lamouri, Jonas Sicking, and the Mozilla WebAPI team for their contributions, and for providing the WebVibrator prototype as an initial input. Thanks to Anne van Kesteren for suggestions on how to make the specification reusable in other contexts, and to Lukasz Olejnik for the privacy considerations. Finally, thanks to Zhiqiang Zhang for the Simplified Chinese translation.

    The HTML5 Vibrate API

    The HTML5 Vibrate API allows you to trigger vibration on a device.

    Estimated reading time: 2 minutes

    Table of contents

    Make me vibrate

    Mobile and tablet devices have become hugely prevalent in how users access the web. So much so that Walmart reported that on Black Friday over 50% of traffic was via mobile traffic. This is good news for developers as these devices come with a range of capabilities that are largely accessible through HTML5. You can get access to the camera and audio on these devices and you can also trigger vibration on a device.

    The HTML5 Vibration API is a W3C Candidate Recommendation and as such browser vendors are using vendor prefixes. We can normalise this easily though.

    You can check for browser support like this


    To make a device vibrate is a simple as

    The number value is the time in milliseconds that the device should vibrate for.

    You can also trigger a number of vibrations by passing an array. Every second value represents the delay before the next vibration in the array should be triggered.

    In the above example the device will vibrate for a second, wait for a second and then vibrate for half a second.

    To stop vibration immediately you can do this.

    Browser support

    I wasn’t able to find any good documentation on browser support for the HTML5 Vibrate API so I knocked up a quick test and ran it against my mobile and tablet devices.

    At the time of writing the following are supported

    • Google Chrome Beta for Android
    • Firefox for Android

    At the time of writing the following are unsupported

    • Safari for iOS7
    • Google Chrome for Android

    Now you know how to go and create your dildonics startup.


    Have an update or suggestion for this article? You can edit it here and send me a pull request.

    Recent Posts

    About the author

    George Ornbo is a Software Engineer based in Buckinghamshire, England.

    5 библиотек с API для работы с HTML5 Audio

    Сегодня мы хотели бы сделать небольшой обзор различных библиотек, которые используют HTML5 Audio API, а также более известный HTML5 Audio Element с более простым API.

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

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

    1. Webaudiox.js

    Webaudiox.js – это не совсем библиотека, а набор помощников в работе с Web Audio API. Он абсолютно независим и будет работать на любом браузере, который поддерживает Web Audio API.

    Документация состоит из простого примера кода в форме газетного материала:

    Как уже было сказано, для того, чтобы файл с помощниками webaudiox.js работал, он должен быть включенным. Для того, чтобы понять, как это работает, посмотрите analyser2canvas Helper. Этот помощник использует преимущества AnalyserNode Interface для того, чтобы делать визуализацию воспроизводимого звука в режиме реального времени.

    У webaudiox.js GitHub repo есть много различных примеров, которые можно попробовать в действии. Но, конечно, ваш браузер должен поддерживать Web Audio API. Этот набор помощников не является полизаполнением, поэтому браузер с более поздней поддержкой не будет лучшей идеей, если только вы не хотите объединить его с другим скриптом, библиотекой или ресурсом.

    По нашему мнению, webaudiox.js – отличный выбор для работы с HTML5 играми.

    2. Howler.js

    Howler.js рекламируется просто как «библиотека аудио JavaScript для современной сети», которая возвращается к Web Audio API и отходит от аудио HTML5.

    У этой библиотеки достаточно обширные возможности, вот некоторые из них:

    • поддержка различных форматов файлов для более широкой поддержки браузера.
    • кеширование свойств Web Audio API и HTML5 audio
    • одновременное мультитрековое воспроизведение
    • общий и потрековый mute/unmute, а также регулировка громкости
    • формирование цепочки метода
    • 3KB gzip без зависимостей

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

    Обратите внимание на пример так называемого «спрайтового звука», где вы найдете местонахождение разных звуков в одном звуковом файле.

    API имеет красивый, чистый вид и создает такое впечатление, что работать с ним не составит особого труда. Поскольку используется новый Web Audio API, поддержка браузера соответствующая.

    Авторы библиотек описывают это как «отлично подходящая для игр», но она также хороша для любого другого веб-приложения.

    3. Pedalboard.js

    Как и предыдущие библиотеки, Pedalboard.js использует Web Audio API, но на этот раз он используется для создания звуковых эффектов на аудио источниках, базируется на звуковых эффектах гитары.

    Проще говоря, вы можете создать свою рабочую панель и управлять гитарными звуками. Ярким примером является «эффект гитары в облаке»:

    Синтаксис для API ориентирован на объект, поэтому он достаточно чист и прост в использовании. Вот пример:

    Этот код построен на объекте «stage», содержащим «board», который, в свою очередь, содержит «pedals», с помощью чего создаются желаемые эффекты.

    Следует признать, что эта библиотека не обязательно будет самой полезной для создания игр и других приложений, но при креативном подходе можно придумать интересный материал. Эта библиотека работает в любом браузере, поддерживающем Web Audio API.

    Если вам понравится эта библиотека, вы можете посмотреть, как работает Band.js, «композитор» API, поддерживающий ритмы, большое количество инструментов, секции воспроизведений и сложные музыкальные размеры.

    4. Wad

    Wad предназначен для Web Audio DAW (Digital Audio Workstation) и описывается как «jQuery для ваших ушей». Эта библиотека упрощает работу с аудио, используя Web Audio API.

    Вот пример кода, где написан трек пианино, с использованием «квадратной» волны:

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

    Есть такие особенности как установка стереопозиции, 3D установка, фильтры, реверберация, вход микрофона и способность включать эффекты из внешних библиотек.

    Но есть один недостаток в этой библиотеке: она не работает в Firefox, и в описании авторы это упоминают.

    5. Fifer

    Fifer – это «микро лаборатория» для HTML5 Audio API, которая работает с лайт версией Flash на более старых браузерах.

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

    Некоторые особенности API:

    • Предварительная загрузка и регистрация файлов.
    • Файлы игр с дополнительной цепью и отзывом конца.
    • Выключение или уменьшение звука отдельных файлов или всех файлов одновременно.

    Эта библиотека довольно простая, она могла бы быть хорошим инструментом в работе над большими проектами. Большой плюс – она перейдет на Flash, если Web Audio API будет недоступен.

    И обратите внимание, что этот API основан на HTML5 audio, а не на Web Audio API, так что есть поддержка IE9 для HTML5, IE8 и ранней версии Flash.

    У repo есть простой пример, который вы можете просмотреть здесь. Ничего особенного, просто ударный звук в формате MP3 с отступлением к SWF.

    Ресурсы Web Audio API

    Все библиотеки, которые мы с вами разобрали, позволяют вам пользоваться возможностями Web Audio API без необходимости копаться слишком глубоко, чтобы достать хороший звук, обеспечивающий хороший, чистый API.

    Если вы хотите изучить API и создавать свои собственные произведения, советуем вам заглянуть в книгу Бориса Смус (Boris Smus) Web Audio API от O’Reilly, которая доступна он-лайн с версией для печати.

    Также, есть введение в Web Audio на HTML5 Rocks и документ на тему MDN.

    Поддержка браузера

    Если библиотека, которую вы выбрали, использует HTML5 Audio, то она поддерживается на всех браузерах, включая IE9+. Но если библиотека использует Web Audio API, то она будет работать не на всех браузерах.

    Нет поддержки некоторых мобильных браузеров, а Safari требует разрешение от продавца. Плохая новость – ни одна версия IE не поддерживает Web Audio API, даже IE11. Это нерешенный вопрос команды IE, который, мы надеемся, скоро будет решен.

    How to Use the HTML5 Vibration API

    Users are increasingly using smartphones and tablets to access the web. As of December 2013, one in every five web visits is from a mobile device. If your website or app is mobile-aware, that figure could be far higher.

    Development for multiple devices has its challenges, but there are also possibilities which aren’t typically available on desktop PCs. Consider the vibration mechanism; it’s a simple tactile feedback device which can alert you of new messages or phone calls. It’s especially useful in a noisy environment where sound cannot be heard or quiet places where it would be a distraction.

    Wouldn’t it be great if you could use vibration in your application?…

    • Walking directions could be indicated using one vibration for left, two for right.
    • The phone could vibrate in a certain way when an event occurs or you’re close to someone.
    • You could send secret messages in vibration-based morse code!
    • A game could be enhanced by vibrating when you crash or are hit by a missile.

    That’s exactly what the HTML5 Vibration API allows you to do!

    To Vibrate or Not to Vibrate?

    Just because we can vibrate the phone, it doesn’t follow that we should. Vibration is a huge battery drain so it’s probably best disabled if power is running low or a game is not active in the current tab. Depending on your application, it may be best to provide a user option so they can enable, disable or configure vibration criteria.

    Browser Support and Detection

    The API is relatively new and support is currently limited to recent versions of Firefox and Chrome. Earlier editions require moz and webkit prefixes respectively. You should also use a device which has a vibration mechanism — the API may be available in your browser, but you won’t know its working without one!

    Use the following check to detect for vibration support:

    To check and use prefixed versions, you can use code such as:

    Vibration Basics

    A basic vibration can be set by passing a number of milliseconds to navigator.vibrate :

    Alternatively, you can pass an array with vibration and delay parameters specified in milliseconds. For example, to vibrate for 500ms, wait for 300ms, then vibrate again for 100ms:

    The even-numbered array items define a vibration time (arrays are zero-based so the first and third items are 0 and 2). Odd-numbered array items define the delay time.

    Vibration is non-blocking; your JavaScript code will continue to run while the device is vibrating. To stop it, you can pass zero to navigator.vibrate .

    This concept could be useful in games. For example, when the user crashes their car, you set navigator.vibrate(10000) . However, if the crash effect ends before 10 seconds has elapsed, you set navigator.vibrate(0) to finish it.

    Vibration Demonstration

    To test the API in your device…

    View the source for all HTML, CSS and JavaScript. The form parameters build an array which is passed to navigator.vibrate when START is clicked. When the STOP button is clicked, navigator.vibrate(0); is executed.

    Have fun with the Vibration API and let me know if you have any interesting uses for it.

    HTML5 Game Development: Adding Vibration API

    If you are a HTML5 web game developer, and you are more targeted toward mobile gamer than desktop gamer, you may probably want to enrich your HTML5 game by adding ‘vibration’ features.

    Among the HTML5 API, there is a API called “Vibration API”. The “Vibration API” allows you to command the device using JavaScript, to vibrate in a pattern for a given duration. Let’s say we are playing a game, where we can tap to shock a creature, so in this case we want to vibrate the device every time when the creature is being shocked.

    View Demo or scan the following code using your mobile device, and browse it with Google Chrome for Android:

    In this article, I’ll show you the simple usage of Vibration API in your web game.

    Tutorial Details

    • Difficulty: Beginner
    • Technology: HTML5 Vibration API
    • Supported Browser: Google Chrome for Andro >Following is the HTML structure & CSS of our sample game:

    http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />

    Demo: Game Development Adding Vibration API | onlyWebPro

    Играем с API файловой системы в HTML5

    Дата публикации: 2012-09-28

    От автора: HTML5 позволяет нам пожинать урожай новых возможностей, таких как рисование с помощью canvas, реализация мультимедиа с помощью аудио- и видео- API и так далее. Одним из этих сравнительно новых инструментов является API файловой системы. Он дает нам доступ к разделу-«песочнице» локальной файловой системы пользователя, таким образом еще больше заполняя брешь между рабочим столом и веб-приложениями! Сегодня в учебнике мы пробежимся по основам этого нового волнующего API, исследовав привычные задачи файловых систем. Давайте приступим!


    Для применения больше не нужно скачивать и устанавливать данное программное обеспечение. Всего лишь веб-браузер и соединение с Интернетом дает нам возможность использовать любое веб-приложение в любое время, где угодно и на любой платформе.

    В общем, веб-приложения – это отлично; но в сравнении с приложениями для рабочего стола, у них все еще имеется один значительный недостаток: отсутствие способа взаимодействия и организации данных в структурированную иерархию папок – настоящую файловую систему. К счастью, при помощи нового API файловой системы все меняется. Он дает веб-приложениям контролируемый доступ к частной локальной файловой системе “sandbox” («песочница»), где можно записывать и читать файлы, создавать и заносить в списки каталоги и так далее. Хотя на момент написания этой статьи «полную» реализацию API файловой системы поддерживает только браузер Google Chrome, она все же заслуживает изучения, как мощная и удобная форма местного хранения файлов.

    API файловых систем бывает двух разных версий. Асинхронный API, удобный для обычных приложений, и синхронный API, предназначенный для применения веб-пользователями. В рамках этого учебника мы изучим только асинхронную версию API.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Шаг 1 – Начинаем

    Ваш первый шаг – получить доступ к файловой системе HTML5, сделав запрос к объекту системы LocalFile с помощью глобального метода window.requestFileSystem():

    Веб-приложению «вырваться» за пределы местного корневого каталога невозможно.

    В качестве первых двух параметров вы определяете время существования и размер нужной вам файловой системы. ПЕРМАНЕНТНАЯ файловая система подходит для тех веб-приложений, которые обязаны хранить данные пользователя постоянно. Браузер не будет их удалять, за исключением случаев определенного пользовательского запроса. ВРЕМЕННАЯ файловая система подходит для веб-приложений, кэширующих данные, но может работать, если веб-браузер удаляет файловую систему. Размер файловой системы определяется в байтах и должен иметь разумную верхнюю границу количества данных, нуждающихся в хранении.

    Третий параметр – это функция обратного вызова, запускаемая, когда агент пользователя успешно предоставляет файловую систему. Ее аргумент – объект FileSystem. И, наконец, можно добавить опциональную функцию обратного вызова, которая вызывается в случае ошибки, или когда запрос к файловой системе отклоняется. Ее аргумент – объект FileError. Хотя этот параметр необязательный, отслеживать ошибки для пользователей очень полезно, так как ошибки случаются во многих местах.

    Файловая система, действующая с этими функциями, зависит от происхождения содержащего ее документа. Все документы или веб-приложения одного происхождения (хост, порт и протокол) разделяют файловую систему. Два документа или приложения различного происхождения имеют совершенно разные и несовместимые файловые системы. Файловая система узко предназначена для одного приложения и не может получить доступа к данным, хранимым в другом приложении. На жестком диске пользователя она также изолирована от остальных файлов, и это хорошо: веб-приложению «вырваться» за пределы местного корневого каталога или получить доступ к произвольным файлам каким-либо иным способом невозможно.

    HTML5 vibration API with code examples

    While reading more and more about HTML5 and working with it nearly everyday there is something new you end up doing everyday.

    Yesterday I was doing a bit of reading and came across the Vibration API so let me share you few things about the vibration API.

    Why would you use a vibration API

    Well I can think of a few usage scenarios and the one that is more obvious is to when you alert user about something in your mobile application it would be fun if you can add a little bit of shake so that an alert becomes a little bit more exciting. Or if you are a game developer then you can use it when a guy snaps a punch on other guys face.

    Think of anything that result in some sort of a shock you can use vibrations to make that shock more realistic

    Lets start looking more in depth of this API


    With new APIs introduced not all browsers support it out of the box so it makes sense to detect the API support first and then do something cool with it. Firefox for Android as of writing support this API

    Here is how we can detect the vibration API supports

    Поддержка API вибрации HTML5

    Я проверил, но ничего не могу найти о совместимости для вибро API.

    Какие браузеры поддерживают его?

    Обновить [2014-03-07]. API-интерфейс Vibration теперь поддерживается Firefox, Chrome и Opera. Я также сделал эту информацию доступной на

    Вибрационный API по-прежнему в основном не поддерживается. Firefox 16+ — это в настоящее время единственный браузер с поддержкой API.

    Согласно Mozilla Developer Network, она поддерживается в Chrome с префиксом webkit, в Firefox 11+ с префиксом moz и в Firefox 16+ без каких-либо приставка.

    Но поскольку вы можете проверить этот Issue in Chromium, на данный момент он не увенчался успехом в Chrome, и они, похоже, не торопятся, как Приоритет — 2 (нормальный).

    HTML5 Files API — чтение файлов

    Возможность веб-хранилища поддерживается в HTML5 на хорошем уровне. Но это не единственный способ получения информации веб-страницами. В эту область понемногу вводится несколько других стандартов, направленных на выполнение разных типов задач хранения данных. Одним из таких стандартов является , который технически не входит в HTML5, но имеет хороший уровень поддержки на всех современных браузерах.

    Судя по расплывчатому названию этого стандарта, может показаться, что это всеохватывающий стандарт для чтения и записи файлов на жесткий диск клиента. Но этот стандарт не настолько амбициозный или мощный. Он просто разрешает посетителю веб-сайта выбрать файл на своем жестком диске и передать его непосредственно коду JavaScript, исполняющемуся на просматриваемой веб-странице. Код может открыть этот файл и работать с его данными, будто это простой текст или что-то более сложное. Здесь ключевым аспектом является то обстоятельство, что файл передается непосредственно коду JavaScript. В отличие от обычной выгрузки файла, он никогда не отправляется на веб-сервер.

    Также важно знать, что File API не может делать. Самое важное, что он не может изменять файлы или создавать новые файлы. Чтобы сохранить какие-либо данные, нужно прибегать к другому механизму, например данные можно отправить на веб-сервер посредством запроса XMLHttpRequest или же поместить их в локальное хранилище.

    Судя по этому, можно подумать, что интерфейс File API менее полезен, чем локальное хранилище, и для большинства веб-сайтов это будет правильный вывод. Но этот стандарт приоткрывает дверь в область, в которую HTML раньше не входил, по крайней мере без помощи модулей расширений.

    В настоящее время интерфейс File API является необходимой функциональностью для определенных типов специализированных приложений, но в будущем его возможности могут быть расширены, и важность его значительно возрастет. Например, будущие версии интерфейса могут позволять веб-страницам сохранять файлы на жесткий диск клиента при условии, что пользователь контролирует имя файла и место его сохранения, используя диалоговое окно «Сохранить как». Модули расширения, наподобие Flash, уже оснащены такой способностью.

    Поддержка браузерами интерфейса File API

    Интерфейс File API не имеет такой широкой поддержки, как веб-хранилище. Текущая браузерная поддержка этого интерфейса приводится в таблице ниже:

    Поддержка браузерами интерфейса File API

    Браузер IE Firefox Chrome Safari Opera Safari iOS Android
    Минимальная версия 10 3.6 8 6 11.1 3

    Эти браузеры почти наверняка не реализуют все возможности File API, т.к. некоторые части стандарта (для работы с большими объемами двоичных данных и «вырезания» порций данных) все еще находятся в процессе разработки.

    Получение файла

    Прежде чем интерфейс File API сможет что-либо сделать с файлом, ему нужно этот файл получить. Эту задачу можно выполнить тремя разными способами, но все они одинаковые в одном ключевом аспекте — веб-страница может получить файл только в том случае, если посетитель явно выберет и предоставит его веб-странице.

    Способы получения файла следующие:

    Посредством элемента

    Присвоив атрибуту type значение file, мы получим стандартное окно для закачивания файла. Но с помощью небольшого сценария JavaScript и File API этот файл можно открыть локально.

    Посредством скрытого элемента

    Элемент очень непривлекательный. Чтобы не обезображивать им свою страницу, его можно скрыть и создать более прилично выглядящую кнопку. Нажатие этой кнопки активирует JavaScript-код, вызывающий метод click() скрытого элемента , который открывает стандартное диалоговое окно выбора файла.

    Посредством метода drag and drop

    Если браузер поддерживает этот метод, файл можно перетащить с рабочего стола или окна браузера и отпустить его в определенной области веб-страницы.

    В последующих разделах мы рассмотрим все эти подходы более подробно.

    Чтение текстового файла

    Самой простой операцией File API будет чтение содержимого простого текстового файла. На рисунке ниже показана веб-страница, которая с помощью этого интерфейса считывает разметку веб-страницы, а потом выводит этот текст в окне браузера:

    Создание этого примера начинается с элемента , который создает текстовое поле и кнопку «Выберите файл»:

    Но в то время как элемент обычно вставляется в контейнер , чтобы файл можно было закачать на веб-сервер, в данном случае наш элемент играет самостоятельную роль. Когда посетитель страницы выбирает файл, активируется событие onchange элемента , что в свою очередь активирует функцию processFiles(). Как раз на этом этапе и открывается файл посредством самого обыкновенного кода JavaScript.

    Теперь рассмотрим по частям функцию processFiles(). Сперва нам нужно взять первый файл из коллекции файлов, предоставленных элементом . Если явно не разрешить выбор нескольких файлов (посредством атрибута multiple), коллекция файлов будет гарантированно содержать только один файл, размещенный в элементе 0 массива файлов:

    Все объекты файлов обладают тремя потенциально полезными свойствами. Свойство name сообщает нам имя файла (без пути), свойство size указывает размер файла в байтах, а свойство type информирует о MIME-типе файла, если его можно определить. Эти свойства можно считывать и использовать их в дополнительной логике, например, отказаться обрабатывать файлы больше определенного размера или разрешить обрабатывать файлы только определенного типа.

    Далее создается объект FileReader для обработки файла:

    Теперь мы почти готовы вызвать один из методов объекта FileReader, чтобы извлечь содержимое файла. Но эти методы являются асинхронными. Это означает, что они начинают чтение файла, но не ожидают получения данных. Поэтому, чтобы получить данные, сначала нужно обработать событие onload:

    Наконец, подготовив этот обработчик события, можно вызывать метод readAsText() объекта FileReader:

    Этот метод сбрасывает все содержимое файла в одну длинную строку, вставляемую в свойство, которое в свою очередь отправляется событию onload.

    Метод readAsText() работает должным образом только для текстового содержимого файла, но не для двоичного. Это означает, что он идеально подходит для работы с файлами HTML, как показано на рисунке выше.

    Кроме метода readAsText(), объект FileReader имеет еще несколько других методов для чтения файлов: readAsBinaryString(), readAsDataURL() и readAsArrayBuffer(), но последний метод не поддерживается в Firefox.

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

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

    Замена элемента

    Веб-разработчики сходятся во мнении: стандартный элемент управления , применяемый для выгрузки файлов, выглядит далеко не лучшим образом. Но хотя нам не избежать использования его, совсем необязательно, чтобы пользователи его видели. Мы можем просто скрыть его с помощью следующего стилевого правила:

    Теперь нам нужно добавить новый элемент управления, который будет инициировать процесс предоставления файла. Для этого достаточно обычной кнопки со ссылкой, которую мы можем разукрасить каким угодно образом:

    Последним шагом будет обработка нажатия кнопки путем инициализации вручную элемента через вызов метода click() этого элемента:

    Теперь нажатие этой кнопки запускает функцию showFileInput(), которая «нажимает» скрытую кнопку «Выберите файл» и отображает диалоговое окно для выбора файла. Это, в свою очередь, активирует событие onchange скрытого элемента , которое запускает функцию processFiles() точно таким же образом, как и раньше.

    Чтение файла изображения

    Как мы узнали, объект FileReader обрабатывает текстовое содержимое в один простой прием. Благодаря методу readAsDataURL() он с такой же легкостью обрабатывает и изображения.

    На рисунке ниже показан пример, для реализации которого используются две новые возможности — поддержка изображений и выбор файла методом drag and drop:

    На этой странице изображение можно представить двумя способами: выбрать файл изображения с помощью элементов управления внизу или перетащить и отпустить нужный файл в выделенную пунктиром рамку.

    Выбранное изображение используется в качестве фона элемента, хотя его с тем же успехом можно было вставить в холст и обрабатывать попиксельно в холсте. Этот метод можно применить, например, чтобы создать страницу, на которую посетитель может вставить изображение, доступное для редактирования, а затем сохранить конечный результат посредством вызова объекта XMLHttpRequest.

    При создании такой страницы сначала нужно решить, какой элемент будет получать перетаскиваемые файлы. В нашем примере это

    С помощью правил таблицы стилей задаем полю для перетаскивания файла желаемый размер и оформляем рамкой и фоном:

    Возможно, вы заметили, что в поле для перетаскивания файла изображения установлены свойства background-size и background-repeat для подготовки к следующей операции. Когда файл изображения перетаскивается в поле

    Для обработки перетаскивания и отпускания файла нам требуются три события: ondragenter, ondragover и ondrop. При загрузке страницы ко всем этим событиям подключается соответствующий обработчик:

    Функция ignoreDrag() обрабатывает как событие ondragenter (которое инициализируется, когда указатель мыши с перетаскиваемым файлом входит в зону сбрасывания), так и событие ondragover (которое срабатывает постоянно во время движения курсора мыши в зоне сбрасывания). Такой подход возможен потому, что нам никак не нужно реагировать на эти действия, кроме как сообщить браузеру не предпринимать никаких действий. Код функции выглядит следующим образом:

    Событие ondrop более важное, т.к. в нем мы получаем файл и обрабатываем его. Но поскольку файл для страницы можно предоставить двумя способами, собственно для выполнения работы функция drop() вызывает функцию processFiles():

    Функция processFiles() является последним этапом в процессе перетаскивания файла. Она создает объект FileReader, подключает функцию обработки к событию onload и вызывает метод readAsDataURL() для преобразования данных изображения в данные URL:

    Объект FileReader имеет еще несколько других событий, которые можно использовать при чтении файлов изображений. Событие onprogress срабатывает периодически в процессе длинных операций, чтобы предоставить информацию об объеме загруженных данных на текущий момент. (Операцию можно аннулировать до ее завершения, вызвав метод abort() объекта FileReader.) Событие onerror срабатывает в случае проблем с открытием или чтением файла. А событие onloadend — при завершении операции любым способом, включая ее преждевременное завершение вследствие ошибки.

    Цукерберг рекомендует:  8 полезных сниппетов для поиска в WordPress
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих