Interested in such a question, how is the favicon made on megalyrics.ru , when you launch a track?

Initially the idea was that through js / php a static image of the equalizer is generated, and replaced. But different users listen to different tracks, and besides, the browser caches this business well, so this is clearly not the case. Besides, this is how many billions of images are generated per day, even if they are so small.

Does anyone have any ideas?

UPD Found it , like what you need, but still it turns out how many images should be generated in terms of the equalizer ....

  • 2
    The fact that your link is the most useful thing, thanks). And you can generate on the client side, canvas. - ling
  • Yes, not at all))) I wrote a comment to the answer about this, and then I read yours. Thank! - DemoS

1 answer 1

While playing the track, favicon is replaced with JavaScript . However, instead of full links, a trick with the prefix " data: " is used. Those. during playback at a certain interval, favicon is generated. view:

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

These pictures themselves can be both generated on JS, and all possible options are downloaded from the server at once (if I'm not mistaken, it turns out only 64 variants, 2 columns with 8 divisions each)

PS The parser cannot parse the second link. http://ru.wikipedia.org/wiki/Data:_URL

  • What mean can not? I have a great open, duplicate ruseller.com/lessons/les1060/index.html Thanks for the answer. In fact, there are more options, because each division has 3 types of filling, but not 2, i.e. Filled in 1/3. Well, probably then it is logical to make all the images and give the necessary. But again, several times a second, send a request to the server with the track data, check them, search for the desired picture and return it. What I mean is that the load on the server is crazy. In the sense of not by the amount of data, but by the number of requests. - DemoS
  • Although, if you think about it, maybe this is done on the client side. Those. all pictures are cached and the browser (track) communication through js is no longer with the server, but with the client browser and its cache. Probably yes, most likely the way it is. - DemoS
  • one
    > What can it mean? Try inserting this link: ru.wikipedia.org/wiki/Data:_URL > In fact, there are more options Anyway, the number of possible options is very limited, and the size of favicon in base64 is about 200 bytes in total. T.ch. even if there are 16 divisions per column, it turns out 16 * 16 * 200 = 51,200 bytes. > But again, etozh several times a second to send a request to the server again. Requests to the server does not go at all , t.ch. server load is completely absent . Read the link in the wiki, which I posted above. - Ilya Pirogov
  • I thought you were about my link =) I tried to drive into the address bar of the wiki data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7 Picture, cool)) But look at the image properties, and its size;) - DemoS