В поисковой строке Рамблера можно не только писать — но и говорить

    Привет %USERNAME%!

    Google Chrome начиная с 11 версии получил возможность распознавания речи в тегах input;
    Раз уж возможность есть, грех ее не использовать :)

    Теперь в поисковой строке рамблера можно не только писать — но и говорить.




    Любому <input type='text' /> можно задать атрибут x-webkit-speech и у инпута появится иконка с микрофоном. По нажатию на микрофон откроется окошко которое предложит вам произнести слово или фразу и после распознанный текст появится в инпуте.

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

    Иконка микрофона — это псевдо-элемент ::-webkit-input-speech-button;
    По умолчанию он имеет следующие стили:

    input::-webkit-input-speech-button {
        -webkit-appearance: -webkit-input-speech-button;
        display: inline-block;
    } 


    Чтобы изменить внешний вид кнопки можно использовать следующий CSS:

    input::-webkit-input-speech-button {
        -webkit-appearance: button;
        background: url('voice_icon.png') no-repeat 0px 2px;
        float: right;
        width: 15px;
        height: 16px
    }


    Кроме возможности изменения внешнего вида микрофона браузер предоставляет доступ к DOM-событию onwebkitspeechchange которое срабатывает сразу после того как пользователь воспользовался распознаванием речи.

    Пример отсылки формы сразу после изменения значения поля:

    document.getElementById('search_query').onwebkitspeechchange = function(evt){
        document.getElementById('search_form').submit();
    };
    

    В параметре передаваемому функции обработчику onwebkitspeechchange приходит event объект самая интересная часть которого поле results с массивом предлагаемых вариантов распознавания.

    Распознавание речи ведется исходя из языка браузера — но есть если у тега html указать атрибут lang=«de_DE» — то распознается немецкая речь.

    Тоже самое произойдет если в документе указать

    <meta http-equiv='Content-Language' content='de_DE' />

    Вроде все. Да пребудет с вами сила :)

    Иван Полуянов
    Разработчик
    Афиша-Рамблер-SUP
    0.00
    Company
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 56

      –13
      У Вас собственная разработка или сторонний API для распознавания голоса используется, например гугловский?
      Можно ли получить доступ к этому API напрямую?
        +9
        Это функция встроена в Google Chrome
          +1
          я тоже люблю читать только заголовки новостей
          +16
          Рамблер жив?
            +3
              0
              Так же как и «длинный шмель»
              +1
              Моя первая мысль на топик )
              • UFO just landed and posted this here
                • UFO just landed and posted this here
                    +2
                    Rambler F5
                  +2
                  Среднесуточные переходы с рамблера:

                  image
                  +6
                  Не знал что у Рамблера есть легкая версия
                    +1
                    А домен так себе (
                      +1
                      у него долгая история, а название читали как «аРНОЛЬд»
                      0
                      Да, тоже не знал
                      По моему она просто шикарна, ну, по крайней мере, по сравнению с полной версией
                      Правда верхняя менюшка напоминает новый дизайн гугла
                        0
                        работала очень давно. во времена диалапа ходил на r0.ru, когда ещё не было мобильной версии, и ro.ru и r0.ru вели в одно и то же место
                        0
                        Верхняя строка как у гугл.
                          +8
                          Посмотрите дату запуска на официальном блоге. В это время Гугл еще не показал свой новый стиль.
                          Сходство, скорее, с шапкой Афиши, что предсказуемо.
                          +2
                          А будет ресурс социальной направленности Rambler+?
                          +1
                          Может у меня с микрофоном что-то или произношением но распознавание с ошибкой 80%
                            +3
                            Спасибо за рассказ о новой фиче у Хрома :)
                              +2
                              Кстати, это фича Хрома или любого браузера на вебкит?
                                +3
                                Это фича браузеров на движке Chromium
                              +4
                              Блин.

                              Я три раза четко произнёс «Сиськи».

                              Распозналось как:

                              — google (!)
                              — wow (ну тут да, я не против)
                              — нитки.

                                +3
                                у меня с первой попытки распознало:)
                                вообще отличную фичу сделал гугл, сейчас попробовал пару десятков русских запросов сделать(и на рамблере и на гугле) — все распознало без ошибок, даже длинные предложения. а вот с инглишем у меня видать все совсем плохо, только короткие запросы распознает верно(из 1-3 слов)
                                +16
                                < [:|||||:] >Квадратный корень из двухсот пятидесяти шести</ [:|||||:] >
                                  +1
                                  А что, по украинские не шпрехает? Сразу на английский переходит? :(
                                    0
                                    А есть ограничение на кол-во таких input`ов на странице? И как у него с распознаванием имен и фамилий?
                                      +1
                                      Ограничений на количество инпутов нет. Имена и фамилии распознает неплохо
                                      +5
                                      С нетерпением жду караоке.
                                        –5
                                        В поисковой строке рамблера можно не только писать — но и какать. Простите, не удержался. Вечер пятницы послужит мне оправданием. Смею заверить, что на самом деле я глубоко восхищен этим замечательным достижением.
                                          0
                                          javascript:document.getElementById('lst-ib').setAttribute('x-webkit-speech', 'true')

                                          Сделайте на главной Гугла в хроме, будет тоже самое.
                                            0
                                            Более того, плагинчики, вроде Oweb Голосовой Ввод, позволяют добавить эту фичу и к другим Поисковым Системам…


                                            … и не только к ПС…



                                            PS: PR — страшная штука.
                                              +3
                                              я в замешательстве, как произнести "@" at или собака?
                                                +2
                                                В полях пароль и повтор пароля!
                                            • UFO just landed and posted this here
                                                0
                                                При упоминании «орального полового акта с поиском» срабатывает пасхалка на сколько я понял…
                                                  +7

                                                  Второй раз ищется уже конкретно то что говорите.
                                                  –5
                                                  Кто-то пользуется Рабмлером? Бог ты мой!
                                                  –1
                                                  а зачем собственно изменять вид иконки? %)
                                                    0
                                                    document.getElementById('search_querty')
                                                    Улыбнуло
                                                    +5
                                                    Пытался голосом сказать jquery, так и не удалось правильно распознать, вот что он предлагал

                                                    джейк в аврмии
                                                    кавалеры
                                                    жиклеры
                                                    jade вы еврей


                                                    Попробовал сказать хабрахабр, распознал с первой попытки правильно.
                                                      0
                                                      Я так понимаю, Chrome распознаёт речь в зависимости от языка браузера.
                                                      У меня английский Chrome и jquery замечательно распознаётся, но никакой «хабрахабр» не распознается.
                                                      +1
                                                      «тест» распозналось как «секс»
                                                        +2
                                                        Рамблер лучше знает, что вам на самом деле нужно ;)
                                                        0
                                                        Сначала Нихром, теперь голосовой поиск. Когда ожидать Рамблер+?
                                                        +2
                                                        Можно использовать для тренировки произношения англияского языка. Если правильно произнёс — слово правильно высветится =)
                                                          +1
                                                          Я попробовал произнести множество медицинских лекарственных препаратов, как известно слова еще те. либо у меня идеальное произношение, либо сервис распознает полностью всё.
                                                            0
                                                            >В параметре передаваемому функции обработчику onwebkitspeechchange приходит event объект самая интересная часть которого поле results с массивом предлагаемых вариантов распознавания.
                                                            Ух ты, это действительно уже работает? Я помню, что в виде черновика спецификации оно существовало давно, но вот когда я в последний раз проверял, в Chrome не было фич вроде списка предположений.
                                                              0
                                                              Да, работает.
                                                              В results массив объектов с предположительным текстом + число с коэффициентом правильности распознания.
                                                              –4
                                                              Клево, конечно все эти фичи воровать с Гугла, но самую главную забыли — поиск:)
                                                              Нанять хорошего пеарщика надо, чтобы кричал, что Рамблер-поиск жив.
                                                                +2
                                                                Почему воровать? Когда одни сервисы используют API других сервисов — это же не называется воровством? Вот тут также.

                                                                Пиарщика наняли, пиарщик отличный. Только пиарщику кричать незачем. Работаем.

                                                              Only users with full accounts can post comments. Log in, please.