ویب آڈیو API کے ساتھ شروعات کریں

مواد

• HTML آڈیو
• ویب آڈیو API
• ویب آڈیو API کا استعمال کیسے کریں
• 01. آڈیو سیاق و سباق کا آغاز کریں
• 02. آڈیو گراف کو مربوط کریں
• 03. لوڈنگ آوازیں
• 04. آوازیں بجانا
• 05. یہ سب ایک ساتھ رکھنا
• ویب آڈیو API تجزیہ نوڈ
• ویب آڈیو API پر مزید معلومات حاصل کریں

تیزی سے ، ویب ڈیزائنرز بجلی کی آواز کو ایک ویب ڈیزائن کے آلے کے طور پر تلاش کررہے ہیں (اس بارے میں مزید جانیں کہ یہاں صوتی ڈیزائن UX کو کس طرح تبدیل کررہا ہے)۔ HTML آڈیو اور ویب آڈیو API کے درمیان ، اپنے پروجیکٹس میں آواز شامل کرنا آسان ہے۔ آڈیو> عنصر آپ کو اپنی سائٹ پر پلگ ان فری آڈیو شامل کرنے کی اجازت دیتا ہے ، لیکن یہ ابھی تک محدود ہے۔

زیادہ سے زیادہ صوتی کنٹرول کیلئے ، ویب آڈیو API آپ کو آوازیں پیدا کرنے ، موجودہ آوازیں چلانے (اپنی آواز فائلوں کو کلاؤڈ اسٹوریج میں محفوظ رکھنے) ، اثرات پیدا کرنے اور بہت کچھ کرنے کی اجازت دیتا ہے۔ اس آرٹیکل میں ہم ایک قریب سے جائزہ لیں گے کہ ان میں سے ہر ایک کس طرح کا کام کرتا ہے ، اور اس کی وضاحت کریں گے کہ انھیں اپنے پروجیکٹس میں آواز شامل کرنے کے لئے کس طرح استعمال کیا جائے۔

مزید حیرت انگیز APIs کو دریافت کرنے کے ل Java ، بہترین جاوا اسکرپٹ API ، HTML HTML اور Google APIs پر ہمارے گائڈز پر ایک نظر ڈالیں۔ یا ، اگر آپ ایک آسان عمل چاہتے ہیں تو ، ویب سائٹ بلڈر کے آلے اور کامل ویب ہوسٹنگ فراہم کنندہ کا استعمال کریں۔

HTML آڈیو

HTML آڈیو> ٹیگ کی مدد سے آپ ویب سائٹ اور ایپس پر میوزک ایمبیڈ کرسکتے ہیں۔ کی طرح ویڈیو> ٹیگ ، آپ کسی سورس فائل ، کنٹرول اور کئی دیگر اختیارات کی وضاحت کرسکتے ہیں۔ اس کی مدد سے آپ آسانی سے کم سے کم کوڈ کے ساتھ اپنے صفحے پر آڈیو آسانی سے شامل کرسکتے ہیں۔ اس کے بعد آپ مزید کنٹرول دینے کیلئے جاوا اسکرپٹ کے ذریعے عنصر کو نشانہ بناسکتے ہیں۔ یہ ایم پی 3 ، ڈبلیو اے وی ، او جی جی اور دیگر فارمیٹس کی حمایت کرتا ہے ، جس میں ایم پی 3 جدید براؤزرز اور ڈیوائسز میں عالمی سطح پر معاون ہے۔

آئیے استعمال کرنے کی ایک سادہ سی مثال پر ایک نظر ڈالتے ہیں آڈیو> ٹیگ

آڈیو آٹوپلے = "آٹوپلے" کنٹرولز "" کنٹرول "> سورس src =" music.ogg "/> سورس src =" میوزک. ایم پی 3 "/> / آڈیو>

اس عنصر سے متعلق کچھ آسان خصوصیات میں شامل ہیں:

• آٹو پلے - آڈیو تیار ہونے کے بعد اسے چلانے کی اجازت دیں
• کنٹرولز - صفحے پر آڈیو فائل کے لئے کنٹرول شامل کیے جائیں گے
• لوپ - اگر اس میں شامل کیا گیا ہے تو ، آڈیو ختم ہوجائے گا اور ایک بار اس کے ختم ہونے کے بعد دوبارہ چل پائے گا
• پری لوڈ - جب ممکن ہو تو آڈیو کو دوبارہ لوڈ کریں تاکہ یہ چلانے کے لئے تیار ہو

تاہم ، اس کی کچھ حدود بھی ہیں۔ آوازوں کی تعداد کی ایک حد ہے جو بیک وقت بجائی جاسکتی ہے ، وقت کا کوئی قطعی کنٹرول نہیں ، اصل وقتی اثرات کو لاگو کرنا ممکن نہیں ہے ، اور آوازوں کا تجزیہ کرنے کا کوئی طریقہ موجود نہیں ہے۔ یہ وہ جگہ ہے جہاں ویب آڈیو API چل سکتا ہے۔

ویب آڈیو API

ویب آڈیو API ویب پر آڈیو کو کنٹرول کرنے کے لئے ایک طاقتور نظام ہے۔ اس کا استعمال آڈیو ذرائع کو قابل بنانے ، تاثرات شامل کرنے ، آڈیو ویوژیئلیشنز بنانے اور مزید بہت کچھ کرنے کے لئے کیا جاسکتا ہے۔

یہ API آڈیو سیاق و سباق کے اندر کارروائیوں کا انتظام کرتی ہے۔ آڈیو آپریشن آڈیو نوڈس کے ساتھ انجام پائے جاتے ہیں ، جو آڈیو روٹنگ گراف کی تشکیل کے لئے آپس میں منسلک ہوتے ہیں۔ ایک ہی آڈیو سیاق و سباق میں متعدد ذرائع کی تائید ہوتی ہے۔ یہ ماڈیولر ڈیزائن انتہائی لچکدار ہے ، جس سے پیچیدہ آڈیو ڈیزائن کی تخلیق کی اجازت ملتی ہے۔

آڈیو نوڈس کو ان پٹ اور آؤٹ پٹس کے ذریعہ زنجیروں اور سادہ جالوں میں جوڑا جاتا ہے۔ وہ عام طور پر ایک یا زیادہ وسائل سے شروع کرتے ہیں۔ نوڈ آؤٹ پٹس کو دوسروں کے آدانوں سے جوڑا جاسکتا ہے جو آڈیو اسٹریمز کی زنجیروں یا جالوں کو تیار کرتے ہیں۔ گین نوڈ کا استعمال کرتے ہوئے آڈیو کو تیز تر یا پرسکون بنانے کے ل A ایک عام اثر ہے۔

ایک بار جب آواز متاثر ہوجائے اور آؤٹ پٹ کے ل ready تیار ہوجائے تو ، اسے آڈیوکونسٹٹ ڈسٹسٹینشن کے ان پٹ سے منسلک کیا جاسکتا ہے ، جو آواز اسپیکرز کو بھیجتا ہے۔ نوٹ کریں کہ یہ آخری کنکشن صرف اس صورت میں ضروری ہے جب آپ کو آڈیو سننے کی ضرورت ہو۔

ویب آڈیو کے لئے ایک عام بہاؤ کچھ اس طرح نظر آتا ہے:

• آڈیو سیاق و سباق بنائیں
• سیاق و سباق کے اندر ذرائع بنائیں (جیسے۔ آڈیو>، آسکیلیٹر ، نہریں)
• اثرات نوڈس بنائیں (جیسے ریورب ، فلانجر ، پینر ، کمپریشن)
• آڈیو کے ل a منزل منتخب کریں (جیسے مقررین)
• وسائل کو اثرات سے اور اثرات کو منزل سے مربوط کریں

ویب آڈیو API کا استعمال کیسے کریں

آئیے اس پر ایک نظر ڈالتے ہیں کہ آپ کسی پروجیکٹ میں ویب آڈیو API کو کس طرح استعمال کرسکتے ہیں۔ اس مثال میں آپ API استعمال کرتے ہوئے ایک صوتی فائل لوڈ اور چلائیں گے۔

01. آڈیو سیاق و سباق کا آغاز کریں

شروع کرنے کے لئے ہمیں اپنا آڈیو تناظر ، اپنی آوازوں کے لئے ایک آڈیو کینوس سیٹ اپ کرنے کی ضرورت ہے۔ یہ طریقہ زیادہ سے زیادہ کراس براؤزر کی معاونت اور فیل بیک کو یقینی بناتا ہے اگر API کے تعاون نہ کیا گیا ہو۔

ونڈو.ویبکیٹ آڈیوکونٹیکسٹ کو آزمائیں۔ AudioCtx = نیا AudioContext ()؛ کیچ (ای) {الرٹ (‘اس براؤزر میں ویب آڈیو API تعاون یافتہ نہیں ہے’)؛ }

ایک ہی آڈیو سیاق و سباق ایک سے زیادہ صوتی آدانوں اور پیچیدہ آڈیو گراف کی حمایت کرتا ہے ، لہذا آپ کو تیار کردہ ہر آڈیو ایپلی کیشن کے لئے آپ کو صرف ایک کی ضرورت ہے۔

02. آڈیو گراف کو مربوط کریں

کسی بھی آڈیو نوڈ کی آؤٹ پٹ کو کسی دوسرے آڈیو نوڈ کے ان پٹ کو اس کا استعمال کرکے منسلک کیا جاسکتا ہے متصل () تقریب اس مثال میں آپ ماخذ نوڈ کے آؤٹ پٹ کو گیون نوڈ میں مربوط کریں گے ، اور گینٹ نوڈ کے آؤٹ پٹ کو سیاق و سباق کی منزل سے جوڑ دیں گے۔

// ماخذ بنائیں۔ متغیرات = سیاق و سباق. کریٹ بفرسورس ()؛ // گینڈ نوڈ بنائیں۔ var فائدہ = سیاق و سباق. کریٹ گین ()؛ فلٹر کرنے کیلئے ماخذ سے جڑیں ، منزل تک فلٹر کریں۔ Source.connect (حاصل)؛ گین کوونیکٹ (سیاق و سباق)

یہ آڈیو گراف اب متحرک ہے ، مطلب جب بھی آپ کی ضرورت ہو آپ اسے تبدیل کرسکتے ہیں۔ آپ کال کرکے آڈیو نوڈس کو گراف سے منقطع کرسکتے ہیں نوڈ ڈسکونیکٹ (آؤٹ پٹ نمبر). اس ماڈیولر نقطہ نظر کی طاقت آپ کو تمام آوازوں ، یا آپ کی خواہشات کے ل gain حاصل (حجم) کو کنٹرول کرنے کی اجازت دیتی ہے۔ آپ آوازوں کو اثر کے ذریعہ روٹ کرسکتے ہیں یا بالکل نہیں ، یا کسی بھی مجموعہ میں جس کی آپ کو ضرورت ہو۔

03. لوڈنگ آوازیں

ویب آڈیو API میں آڈیو فائل لوڈ کرنے کے ل To ، ہم ایک استعمال کرسکتے ہیں XMLHttpRequest اور نتائج پر کارروائی کریں سیاق و سباق۔ ڈیکو آڈو ڈیٹا. یہ سنجیدگی سے کام کرتا ہے اور مرکزی انٹرفیس تھریڈ کو مسدود نہیں کرتا ہے۔ کوڈ کی طرح دکھائے گا یہاں ہے:

var درخواست = نیا XMLHttpRequest ()؛ درخواست.یوپن ((GET) ، یو آر ایل ، سچ)؛ گذارش. غیر ذمہ داری ٹائپ کریں = ‘آری بفر’؛ گذارش. ڈاونلوڈ = فنکشن (). سیاق و سباق۔ ڈیکوڈ آڈیو ڈاٹا (گذارش۔ قبول کریں ، فنکشن (دی بفر) {بفر = دی بفر؛ E ، ایرر)؛ . درخواست. بھیجیں ()؛

04. آوازیں بجانا

آڈیو بفر آڈیو کا صرف ایک ہی ممکنہ ذریعہ ہیں۔ آپ مائیکروفون یا لائن ان ڈیوائس یا ایک سے براہ راست ان پٹ استعمال کرسکتے ہیں آڈیو> دوسروں کے درمیان ٹیگ. ایک بار جب آپ اپنا بفر لوڈ کر لیں تو ، آپ کو ایک بنانے کی ضرورت ہوگی آڈیو بفرسورسنوڈ اس کے ل the ، سورس نوڈ کو اپنے آڈیو گراف میں مربوط کریں ، اور پھر کال کریں شروع (0) ماخذ نوڈ پر آواز روکنے کے لئے ، کال کریں بند کرو (0) ماخذ نوڈ پر

کوڈ اس طرح لگتا ہے:

فنکشن پلے ساؤنڈ (بفر) {var ماخذ = سیاق و سباق = تخلیق بفرسورس ()؛ Source.buffer = بفر؛ Source.connect (سیاق و سباق) تعین؛ Source.start (0)؛ }

05. یہ سب ایک ساتھ رکھنا

جیسا کہ آپ پچھلے کوڈ سے دیکھ سکتے ہیں ، ویب آڈیو API میں آوازیں چلانے کے ل a تھوڑا سا سیٹ اپ موجود ہے۔ لیکن ، اس ماڈیولر اپروچ کے ذریعہ آپ آڈیو پر زیادہ سے زیادہ کنٹرول حاصل کرسکتے ہیں۔ تجزیاتی نوڈ کے ذریعہ ان کے ڈیٹا کو پڑھنا ، بہت ساری آوازیں ملانا اور بہت کچھ۔ آواز کو لوڈ کرنے اور چلانے کے لئے عملی کام کی مثال یہ ہے کہ سب ایک ساتھ نظر آتے ہیں۔ بڑے منصوبوں میں بھی متعدد آوازوں کے انتظام کے ل these ان اقدامات کو خلاصہ کرنے پر غور کریں۔

var AudioCtx ، تجزیہ کار ، بفر لینتھتھ ، ڈیٹاآری؛ ونڈو.اڈٹ ایونٹ لیسٹنر (‘بوجھ’ ، ابتدائی آڈیو ، غلط)؛ تقریب initAudio () catch کیچ کی کوشش کریں (e) {الرٹ ('اس براؤزر میں ویب آڈیو API کی سہولت نہیں ہے')؛ } // آڈیو فائل کا ماخذ = آڈیو سی ٹی ایکس سی. کریٹ بفر سورس () لوڈ کریں؛ var درخواست = نیا XMLHttpRequest ()؛ درخواست.اوپن (‘جی ای ٹی’ ، ‘اثاثے / بیٹ3.mp3’ ، سچ)؛ گذارش. غیر ذمہ داری ٹائپ کریں = ‘آری بفر’؛ درخواست.onload = فنکشن () {var آڈیو ڈیٹا = گذارش۔ AudioCtx.decodeAudioData (AudioData، فنکشن (بفر) {Source.buffer = buffer؛ Source.connect (تجزیہ کار) analy تجزیہ کارکونٹ (AudioCtx.destination)؛ Source.loop = true؛ Source.start (0)؛ function، فنکشن ( e) {"آڈیو ڈیٹا کو ڈی کوڈ کرنے میں خرابی" + e.err})؛ . درخواست. بھیجیں ()؛ }

ویب آڈیو API تجزیہ نوڈ

ویب آڈیو API کی تجزیہ نوڈ آپ کو اپنے آڈیو سے وقت ، تعدد ، موج اور دیگر ڈیٹا نکالنے کے قابل بناتا ہے۔ جیسے خصوصیات کا استعمال کرتے ہوئے گیٹ بائٹ فریکوئینسی ڈیٹا اور کی ترتیب منٹ اور زیادہ سے زیادہ اعشاریہ حدود ، آپ آڈیو ڈیٹا کے مخصوص پہلوؤں پر صفر کرسکتے ہیں۔

میوزک بستر ، اثرات اور عمدہ میوزک سے پرے ، ہم صوتی استعمال کرتے ہیں۔ صارف جو کچھ دیکھتا ہے اسے پورا کرنے یا بڑھانے سے آگے بڑھ رہا ہے ، آڈیو ڈیٹا اصل میں متحرک تصاویر کو ڈرائیو کرسکتا ہے۔ میوزک ٹریک کی مجموعی سطح (حجم) کا استعمال کرنے والے سادہ اثرات آپ کے پس منظر کی نبض کو بروقت شکست دے سکتے ہیں۔ میوزیکل سکور میں سوجنوں کا استعمال کسی شبیہہ کی دھندلاپن کو تبدیل کرنے یا اس کا رنگ تبدیل کرنے کے لئے استعمال کیا جاسکتا ہے۔

ویب آڈیو API کے ذریعہ آڈیو ڈیٹا میں ٹیپ کرکے ہم تعدد اور ویوفارم ڈیٹا کو بھی تلاش کرتے ہیں۔ آپ آواز کو لامحدود مختلف حالتوں میں دیکھ سکتے ہیں۔

ویب آڈیو API پر مزید معلومات حاصل کریں

مزید معلومات حاصل کرنا چاہتے ہیں؟ یہ وہ وسائل ہیں جن کی آپ کو جانچ پڑتال کرنی چاہئے۔

MDN ویب دستاویزات- بھرپور دستاویزات اور مثالوں کے ساتھ API میں ایک گہرائی سے نگاہ۔ API کا ہر پہلو اچھی طرح سے احاطہ کرتا ہے۔

ڈبلیو 3 سی- ایک مخزن جس میں W3C ویب آڈیو API کا تازہ ترین ایڈیٹر کا مسودہ ہے۔ یہ وہ ذریعہ ہے جہاں معیارات پیش کیے جاتے ہیں۔

ویب آڈیو API کا تعارف- گریگ ہووانیسیان کے ذریعہ آوازیں پیدا کرنے کے لئے API استعمال کرنے کا ایک اچھا تعارف۔ آسکیلیٹر آڈیو ماخذ کا استعمال کرتے ہوئے میوزک کے لئے مخصوص ایپلی کیشن بنائیں۔

ویب آڈیو ہفتہ وار- ویب آڈیو API کے بارے میں خبروں ، کہانیوں اور ڈیمو کا ایک مجموعہ۔ آپ کو سیکھنے کو جاری رکھنے کے لئے وسیع عنوانات اور مثالوں کا احاطہ کرتا ہے۔

یہ مضمون اصل میں ویب ڈیزائنر میگزین کے تخلیقی شمارے 275 میں شائع ہوا تھا۔ ایشو 275 خریدیں یا سبسکرائب.