4

Интересует такой вопрос, каким образом сделана favicon на сайте megalyrics.ru, когда запускаешь какой-нибудь трек?

Изначально мысль была, что через js/php генерится статический изображение эквалайзера, и заменяется. Но, разные пользователи слушают разные треки и к тому же браузер это дело хорошо кеширует, потому явно не так происходит. К тому же это ж сколько в день миллиардов генерации изображения, пусть даже такого маленького.

Есть у кого какие идеи?

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

2
  • 2
    То, что по вашей ссылке - полезнейшая вещь, спасибо). А генерить можно и на стороне клиента, canvas'ом.
    – ling
    19 янв 2012 в 8:06
  • Да не за что ))) Написал к ответу коммент по этому поводу, а потом уже ваш прочитал. Спасибо!
    – DemoS
    19 янв 2012 в 8:15

1 ответ 1

3

Во время проигрывания трека favicon подменяется при помощи JavaScript. Однако вместо полноценных ссылок используется трюк с префиксом "data:". Т.е. во время проигрывания с определенным интервалом генерируется favicon сл. вида:

<link id="sm2-favicon" rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAVklEQVQ4jaXJoQ2AQBjF4A6HxWDQGMRpDIYpWYAFWOEQ6Htp8jf5VAGuAPE5A/M5AvPrtcB89sB8tsD8emtgPktgPnNgfrWXPvQ3BcBDHzKfmz5kfrUPbn11Htae9cEAAAAASUVORK5CYII=">

Сами данные картинки могут как генерироваться на JS, так и загружаться сразу все возможные варианты с сервера (если не ошибаюсь, там получается всего 64 варианта, 2 колонки по 8 делений)

PS Парсер не может разобрать вторую ссылку. http://ru.wikipedia.org/wiki/Data:_URL

4
  • Что значит не может? У меня отлично открывается, дублирую ruseller.com/lessons/les1060/index.html За ответ спасибо. На самом деле там вариантов больше, т.к. каждое деление имеет 3 вида заполнения, а не 2, т.е. заполняется по 1/3. Ну наверное тогда логично сделать все изображения и отдавать нужные. Но опять же, этож несколько раз в секунду отправлять запрос на сервер, с данными трека, проверять их, искать нужную картинку и отдавать назад. Я это к тому, что на сервер нагрузка ведь бешенная идет. В смысле не по объему данных, а по количеству запросов.
    – DemoS
    19 янв 2012 в 8:12
  • Хотя, если подумать, возможно это делается все на стороне клиента. Т.е. кэшируются все картинки и общение браузера(трека) через js идет уже не с сервером, а с браузером клиента и его кешем. Наверное да, скорее всего так оно и есть.
    – DemoS
    19 янв 2012 в 8:14
  • 1
    > Что значит не может? Попробуйте вставить эту ссылку: ru.wikipedia.org/wiki/Data:_URL > На самом деле там вариантов больше Все равно, количество возможных вариантов сильно ограниченно, а размер favicon в base64 порядка 200 байт всего. Т.ч. даже если там по 16 делений на столбик, то получается 16*16*200 = 51 200 байт. > Но опять же, этож несколько раз в секунду отправлять запрос на сервер Еще раз. Запросов на сервер не идет вообще, т.ч. нагрузка на сервер отсутствует полностью. Почитайте ссылку в вики, которую я выложил выше. 19 янв 2012 в 8:21
  • Я думал вы про мою ссылку =) Попробовал в адресную строку вбить из wiki data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7 Картинка, прикольно )) Но посмотрите "свойства изображения", и ее размер ;)
    – DemoS
    19 янв 2012 в 8:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.