ایچ تی ایم ایل آؤند

روش‌های مختلفی برای پخش صدا در HTML وجود دارد.

مشکلات، مشکلات و راه‌حل‌ها

پخش صدا در HTML آسان نیست!

شما نیاز به مهارت‌های زیادی دارید تا اطمینان حاصل کنید که فایل‌های صوتی شما در تمام مرورگرها (اینترنت اکسپلورر، کروم، فایرفاکس، سافاری، اپرا) و تمام سخت‌افزارها (کامپیوتر، مک، آی‌پاد، آیفون) پخش شوند.

در این فصل، CodeW3C.com مشکلات و راه‌حل‌های آن‌ها را برای شما جمع‌بندی کرده است.

پلگ ان استعمال کریں

براوزر پلگ ان ایک چھوٹی کمپیوٹر پروگرام ہیں جو براوزر کی معیاری کا استعمال بڑھاتے ہیں۔

پلگ ان کا استعمال بہت سے مقصدوں کیلئے ہوتا ہے: موسیقی پلے، نقشے دکھانے، بینک کا کھاتا تو معائنہ کرنا، انٹرپوٹ کا کنٹرول کرنا وغیرہ۔

<object> یا <embed> علامت استعمال کریں تاکہ پلگ ان کو ویب پیج میں شامل کیا جائے۔

یہ علامات مواد (عموماً غیر HTML مواد) کا کنٹینر کا تعریف کرتی ہیں، ان کی نوعیت کے مطابق، وہ براوزر کے ذریعے یا باہری پلگ ان کے ذریعے دکھائی جاتی ہیں یا نکالائی جاتی ہیں۔

<embed> علامت استعمال کریں

<embed> علامت باہری (غیر HTML) مواد کا کنٹینر کا تعریف کرتی ہے (یہ ایک HTML5 علامت ہے، جو HTML4 میں غیر معتبر ہے، لیکن تمام براوزروں میں موثر ہوتی ہے)۔

درج ذیل کوڈ تیپ میں ویب پیج میں ایم پی3 فائل کو شامل کریں:

مثال

<embed height="100" width="100" src="song.mp3" />

خودتان امتحان کنید

سوال:

  • <embed> علامت HTML 4 میں نا معتبر ہے، پیج HTML 4 کے مطابق نہیں پاس ہوتا۔
  • مختلف براوزروں کا آواز فارمٹ کا مددگاری مختلف ہوتا ہے۔
  • اگر براوزر اس فائل فارمٹ کو نہیں مددگار کرتا تو بغیر پلگ ان کی صورت میں اس آواز کو نا قابل پلے نہیں ہوتی ہے۔
  • اگر یوزر کا کمپیوٹر پر ان پلگ ان کا نصب نہیں ہوا تو آواز نا قابل پلے نہیں ہوتی ہے۔
  • اگر یہ فائل کو دوسرے فارمٹ میں تبدیل کیا جائے تو بھی تمام براوزروں میں نا قابل پلے نہیں ہوتا۔

نوٹ:<!DOCTYPE html> (HTML5) استعمال کرکے معائنات کے مسئلے حل کریں۔

<object> علامت استعمال کریں

<object tag> علامت بھی باہری (غیر HTML) مواد کا کنٹینر کا تعریف کر سکتا ہے۔

درج ذیل کوڈ تیپ میں ویب پیج میں ایم پی3 فائل کو شامل کریں:

مثال

<object height="100" width="100" data="song.mp3"></object>

خودتان امتحان کنید

سوال:

  • مختلف براوزروں کا آواز فارمٹ کا مددگاری مختلف ہوتا ہے۔
  • اگر براوزر اس فائل فارمٹ کو نہیں مددگار کرتا تو بغیر پلگ ان کی صورت میں اس آواز کو نا قابل پلے نہیں ہوتی ہے۔
  • اگر یوزر کا کمپیوٹر پر ان پلگ ان کا نصب نہیں ہوا تو آواز نا قابل پلے نہیں ہوتی ہے۔
  • اگر یہ فائل کو دوسرے فارمٹ میں تبدیل کیا جائے تو بھی تمام براوزروں میں نا قابل پلے نہیں ہوتا۔

HTML5 <audio> علامت استعمال کریں

<audio> علامت ایک HTML5 علامت ہے، جو HTML 4 میں غیر معتبر ہے، لیکن تمام براوزروں میں موثر ہوتی ہے۔

مثال

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
آپ کا براوزر اس آواز فارمٹ کو نہیں مددگار کرتا۔
</audio>

خودتان امتحان کنید

مذکورہ مثال میں ایک mp3 فائل استعمال کیا گیا ہے، اس لئے یہ Internet Explorer، Chrome اور Safari میں موثر ہوتا ہے۔

یہ آواز Firefox اور Opera میں بھی اسی طرح کام کرنے کے لئے ایک ogg کی نوعیت کا فائل شامل کیا گیا ہے، اگر ناکام رہتا تو خطا پیغام دکھایا جائے گا۔

سوال:

  • <audio> علامت HTML 4 میں نا معتبر ہے، آپ کا پیج HTML 4 کے مطابق نہیں پاس ہوتا۔
  • آپ کو آواز فائل کو مختلف فارمٹ میں تبدیل کرنا پڑتا ہے۔
  • <audio> علامت کا قدیم ناواقع نہیں کام کرتا۔

نوٹ:<!DOCTYPE html> (HTML5) استعمال کرکے معائنات کے مسئلے حل کریں۔

بہترین HTML حل کا سلسلہ

مثال

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

خودتان امتحان کنید

بالآخر کا مثال دو مختلف آواز فرمتوں کا استعمال کرتا ہے۔ HTML5 <audio> علامت آواز کو mp3 یا ogg فرمت میں پلای کوشش کرتا ہے۔ اگر کامیاب نہیں ہوتا تو کد <embed> علامت کوشش کرتا ہے۔

سوال:

  • آپ کو آواز کو مختلف فرمت میں تبدیل کرنا پڑتا ہے۔
  • <audio> علامت HTML 4 اور XHTML میں معائنات نہیں کرسکتا۔
  • <embed> علامت HTML 4 اور XHTML میں معائنات نہیں کرسکتا۔
  • <embed> علامت کی معلومات نہیں دکھائی جاتی ہیں۔

نوٹ:<!DOCTYPE html> (HTML5) استعمال کرکے معائنات کے مسئلے حل کریں۔

ویب سائٹ میں آواز اضافہ کرنے کا سادا طریقہ

ویب سائٹ میں آواز اضافہ کرنے کا سادا طریقہ کیا ہوتا ہے؟

یاهو کا میڈیا پلیر ان میں سے ایک بھی ہے۔

یاهو میڈیا پلیر استعمال کرنا ایک مختلف طریقہ ہے۔ آپ صرف یاهو کو گانوں کی پلائی کا کام دیں اور یہ تمام کرلے گا۔

یہ mp3 اور دیگر کئی فرمتوں کو پلای کر سکتا ہے۔ صرف ایک سادا کد استعمال کریں تو اس کو ویب سائٹ میں شامل کریں جو آپ کی HTML ویب سائٹ کو بہتر پلیریس بنادیتا ہے۔

یاهو میڈیا پلیر

مثال

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

خودتان امتحان کنید

یاهو پلیر استعمال کرنا مجانی ہے۔ اس کا استعمال کریں تو اس کا اسکریپٹ آپ کی ویب سائٹ کی پیچھ میں داخل کریں:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

بعد ازاں صرف یہ کریں کہ آپ اپنے HTML میں MP3 فائل کا لنک باندھائیں، جاوا اسکریپٹ خودکار طور پر ہر گانے کے لئے پلیر بٹن بنائے گا:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

یاهو میڈیا پلیر آپ کے استعمال کنندگان کو ایک چھوٹا پلیر بٹن فراہم کرتا ہے، نہ کہ پورا پلیر۔ لیکن جب آپ اس بٹن پر کلیک کرتے ہیں تو پورا پلیر آجائے گا۔

لطفاً توجه داشته باشید که این پخش‌کننده همیشه در پایین پنجره قرار دارد. کافی است روی آن کلیک کنید تا آن را بیرون بکشید.

از لینک‌های اضافی استفاده کنید

این کد نیمه‌کامل نشان‌دهنده لینک به فایل mp3 است. اگر کاربر روی این لینک کلیک کند، مرورگر

مثال

<a href="song.mp3">صدا را پخش کنید</a>

خودتان امتحان کنید

صدای درونی

وقتی شما صدایی را در صفحه وب خود شامل می‌کنید یا آن را به عنوان بخشی از صفحه وب، آن را صدای درونی می‌نامند.

اگر قصد دارید از صدای درونی در برنامه‌های وب خود استفاده کنید، باید توجه داشته باشید که بسیاری از افراد صدای درونی را آزاردهنده می‌دانند. همچنین توجه داشته باشید که ممکن است کاربران گزینه‌های صدای درونی در مرورگر خود را غیرفعال کرده باشند.

بهترین توصیه ما این است که فقط در مکان‌هایی که کاربر می‌خواهد صدای درونی را بشنود، آن‌ها را شامل شوند. یک مثال مثبت این است که، در مکان‌هایی که کاربر نیاز دارد صدای ضبط شده را بشنود و روی یک لینک کلیک کند، صفحه‌ای باز می‌شود و صدای ضبط شده پخش می‌شود.

تگ‌های چندرسانه‌ای HTML 4.01

تگ توضیح
<applet> منع شده است. applet درونی را تعریف می‌کنند.
<embed> در HTML4 منع شده است، در HTML5 مجاز است. اشیاء درونی را تعریف می‌کنند.
<object> اشیاء درونی را تعریف می‌کنند.
<param> پارامترهای اشیاء را تعریف می‌کنند.

تگ‌های چندرسانه‌ای HTML 5

تگ توضیح
<audio> تگ‌ها صدای را تعریف می‌کنند، مانند موسیقی یا جریان‌های صوتی دیگر.
<embed> تگ‌ها محتوای پیچیده مانند افزونه‌ها را تعریف می‌کنند.