📮 🕕 🤤 ध्वनि के साथ एनिमेटेड GIF 🤚 🙁 🔍

“ जीआईएफ को रहने की अनुमति दी गई लूपिंग एनीमेशन है जिसे नेटस्केप ने जोड़ा है। यदि नेटस्केप ने अपने ब्राउज़र में GIF समर्थन नहीं जोड़ा होता, तो 1998 में GIF की मृत्यु हो जाती। "

- अलेक्जेंडर ट्रेवर,
CompuServe में GIF टीम लीडर

इस साल जून में जीआईएफ ने अपनी 25 वीं वर्षगांठ मनाई, और आज इंटरनेट पर वितरित सबसे पुराना ग्राफिक प्रारूप है। मजेदार एनिमेटेड जिफ देखने के लिए एक सप्ताह के अंत में समर्पित करते हुए, आप समझते हैं कि उनमें से कुछ ध्वनि के साथ बहुत बेहतर होंगे। ध्वनि के साथ लूपिंग एनीमेशन के लिए सभी वर्तमान समाधान (उदाहरण के लिए: coub.com , gifsound.com ) GIF को छोड़ने की पेशकश करते हैं, लेकिन यह एक विकल्प नहीं है। और मैंने इस बेहद महत्वपूर्ण समस्या को हल करने के लिए सप्ताहांत पर जिफों को देखने का त्याग करने का फैसला किया।

लिंक से ध्वनि के साथ इंटरनेट जीआईएफ पर पहला। आपको नीले बटन पर क्लिक करना होगा, और फिर GIF पर। खिलाड़ी को सभी आधुनिक ब्राउज़रों (नवीनतम फ़ायरफ़ॉक्स और क्रोम में परीक्षण) में काम करना चाहिए।

कटौती के तहत कोई सुराग नहीं होगा, लेकिन मानक के लिए एक एक्सटेंशन बनाने की प्रक्रिया होगी, एक कनवर्टर और एक खिलाड़ी लिखेंगे।

1987 से, GIF प्रारूप में केवल दो महत्वपूर्ण बदलावों का अनुभव किया गया है:

89 में, प्रारूप का दूसरा संस्करण (जिसे जीआईएफ 89 ए कहा जाता है) जारी किया गया था। चित्रों के बीच देरी को निर्दिष्ट करना संभव हो गया (पहले GIF 87a प्रारूप में एक फ़ाइल में कई चित्र थे)। तृतीय-पक्ष डेवलपर्स अब अपने स्वयं के ब्लॉक को फ़ाइल (एप्लिकेशन एक्सटेंशन ब्लॉक) में जोड़ने में सक्षम थे।
90 में, नेटस्केप ने अपना स्वयं का ब्लॉक जोड़ा, जो आपको यह निर्दिष्ट करने की अनुमति देता है कि एनीमेशन को कितनी बार दोहराया जाएगा।

प्रारूप विस्तार विकास

जैसा कि ऊपर बताया गया है, जीआईएफ 89 ए मानक अपने डेटा को जीआईएफ फ़ाइल में रखने की अनुमति देता है। आवेदन विस्तार ब्लॉक प्रारूप:

आकार, बाइट्स	सामग्री
2	एप्लिकेशन एक्सटेंशन ब्लॉक हेडर (हमेशा 0x21, 0xFF)
1	ब्लॉक आकार (हमेशा 11)
8	आवेदन आईडी
3	अनुप्रयोग प्रमाणीकरण कोड (यह सत्यापित करने के लिए उपयोग किया जा सकता है कि एक विशिष्ट एप्लिकेशन द्वारा एक ब्लॉक बनाया गया है)
*	नेस्टेड डेटा ब्लॉक
1	ब्लॉक एंड पॉइंटर (0x00)

आइए यहां WAVE फ़ाइल के शीर्ष लेख को फिट करने का प्रयास करें:

आकार, बाइट्स	सामग्री
4	फ़ाइल हैडर (हमेशा "RIFF")
4	डेटा का आकार
4	डेटा प्रारूप (WAVE फ़ाइलों के लिए - "WAVE")

चूंकि ब्लॉक आकार जीआईएफ प्रारूप द्वारा नियंत्रित किया जाता है, हम फ़ील्ड को हेडर से डेटा आकार के साथ छोड़ देंगे और एप्लिकेशन पहचानकर्ता में "RIFFWAVE" लिखेंगे। बाकी WAVE फ़ाइल को नेस्टेड GIF ब्लॉक के रूप में लिखा जाता है।

हम छवि के साथ पहले ब्लॉक के ठीक सामने ध्वनि के साथ एक ब्लॉक सम्मिलित करेंगे (वास्तव में, आप इसे कहीं भी सम्मिलित कर सकते हैं)।

कनवर्टर विकास

इनपुट कन्वर्टर GIF और WAVE फ़ाइलों को स्वीकार करता है, और आउटपुट एक RIFWAVE ब्लॉक के साथ GIF देता है। आप सोर्स कोड गूगल कोड पर देख सकते हैं।

कोड काफी सरल है, WAVE फाइल पढ़ें, उससे GIF ब्लॉक बनाएं। फिर हम जिफ़ फ़ाइल पढ़ते हैं और सभी ब्लॉक लिखते हैं, जैसे ही हमें एक तस्वीर के साथ पहला ब्लॉक मिलता है, उसके सामने ध्वनि के साथ एक ब्लॉक डालें। कोड का सबसे महत्वपूर्ण भाग - कन्वर्ट GIF इकाई के लिए एक WAVE फ़ाइल:

def get_wav_block(file): #     (signature, size, format) = unpack('4sI4s', file) if signature != 'RIFF': raise Exception('Not a RIFF file') if format != 'WAVE': raise Exception('Not a WAVE file') data = file.read(size - 4) #    wave_block_header = struct.pack('BBB8sBBB', 0x21, 0xff, 11, 'RIFFWAVE', 0, 0, 0) data_subblocks = [wave_block_header]; #      255  for i in range(0, len(data) // 255): data_subblocks.append(chr(0xff)) data_subblocks.append(data[i*255:(i + 1)*255]) if (len(data) % 255) > 0: rest = len(data) % 255 data_subblocks.append(chr(rest)) data_subblocks.append(data[-rest:]) #     data_subblocks.append(chr(0)) return ''.join(data_subblocks)

ध्वनि के साथ एक GIF बनाना

एनिमेटेड जिफ़ बनाना:

 # ffmpeg    ffmpeg -ss 0:00:9.73 -t 2.86 -i warlus.webm -s 500x280 -r 10 frames/image%03d.png #   GIF convert -delay 10 -loop 0 frames/*.png source.gif

हम ध्वनि और जाँच करते हैं कि सब कुछ दिखता है (और लगता है) जैसा हमने योजना बनाई थी:

 mplayer -ss 0:00:9.73 -endpos 2.86 warlus.webm -ao pcm:file="source.wav" -vo null mplayer -loop 0 -audiofile source.wav source.gif

ध्वनि के साथ GIF में कनवर्ट करें

 python wave2gif.py example/source.gif example/source.wav result.gif

खिलाड़ी बनाओ

खिलाड़ी jsgif पर आधारित है - जावास्क्रिप्ट में एनिमेटेड GIFs के लिए एक खिलाड़ी। jsgif gif को पार्स करता है और कैनवास पर प्रत्येक फ्रेम को खींचता है। इसमें एक फ़ंक्शन जोड़ें, जब "RIFFWAVE" ब्लॉक का पता चलता है:

ब्लॉक से डेटा वापस WAVE फ़ाइल स्वरूप में कनवर्ट करें;
हम प्राप्त फ़ाइल को डेटा में कनवर्ट करते हैं: URL और इसे ऑडियो तत्व में स्थानांतरित करें।

 var doSound = function(sound) { // Header var size = sound.data.length + 4 var size_text = String.fromCharCode(size & 255, (size >> 8) & 255, (size >> 16) & 255, (size >> 24) & 255); var header = [ "RIFF", size_text, // length "WAVE" ].join(''); var out = [header, sound.data].join(''); var dataURI = "data:audio/wav;base64," + escape(window.btoa(out)); sound_element = new Audio(); sound_element.src = dataURI; };

jsgif तेजी से काम नहीं करता है, लेकिन ध्वनि के अलावा यह और भी धीमा हो गया है। इसके अलावा, फ़ाइल डेटा प्राप्त करने के लिए, प्लेयर XMLHttpRequest को कॉल करता है, इसलिए खिलाड़ी केवल एक डोमेन से चित्रों के साथ काम करता है। लेकिन क्या यह कला के लिए बाधा है।

आगे क्या है?

~~ध्वनि के साथ gifs का आनंद लें।~~ आप एक ब्राउज़र प्लग-इन लागू कर सकते हैं जो अतिरिक्त XMLHttpRequest के बिना ऐसे gif खेलने की अनुमति देगा, और जो शायद तेजी से काम करेगा। अगर किसी को इसी तरह की समस्या का सामना करना पड़ा है, तो मैं एक संकेत के लिए आभारी रहूंगा कि किस दिशा में देखने के लिए प्लग-इन लिखने के लिए कुछ प्रकार की फ़ाइलों को संसाधित करना होगा ।

सूत्रों का कहना है

GIF89a विशिष्टता
पीसीएम साउंडफाइल प्रारूप है
jsgif: जावास्क्रिप्ट में एक GIF प्लेयर