صوت HTML

روش‌های بسیاری برای پخش صدا در HTML وجود دارد.

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

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

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

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

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

پلاگین مرورگر یک برنامه کامپیوتری کوچک است که به عنوان یک گسترش برای ویژگی‌های استاندارد مرورگر عمل می‌کند.

پلاگین‌ها کاربردهای زیادی دارند: پخش موسیقی، نمایش نقشه‌ها، تأیید حساب بانکی، کنترل ورودی و غیره.

می‌توان از برچسب‌های <object> و <embed> برای اضافه کردن برنامه‌های افزودنی به صفحه HTML استفاده کرد.

این برچسب‌ها قالب‌هایی برای منابع (معمولاً منابع غیر HTML) هستند، که بسته به نوع آن‌ها، یا توسط مرورگر نمایش داده می‌شوند یا توسط برنامه‌های افزودنی (پلاگین) نمایش داده می‌شوند.

از برچسب <embed> استفاده کنید

برچسب <embed> یک قالب برای محتوای خارجی (غیر HTML) تعریف می‌کند. (این یک برچسب HTML5 است که در HTML4 غیرقابل استفاده است، اما در همه مرورگرها کار می‌کند).

این کد کوچک می‌تواند فایل MP3 را در داخل صفحه وب نمایش دهد:

مثال

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

آزمایش کنید

سوال:

  • برچسب <embed> در HTML 4 معتبر نیست. صفحه شما نمی‌تواند با HTML 4 تایید شود.
  • مرورگرهای مختلف از فرمت‌های صوتی مختلفی پشتیبانی می‌کنند.
  • اگر مرورگر از فرمت فایل پشتیبانی نکند و برنامه‌ای برای پخش آن وجود نداشته باشد، نمی‌توان صدا را پخش کرد.
  • اگر کاربر برنامه‌ای را که نیاز به نصب دارد، نصب نکرده باشد، نمی‌تواند صدا را پخش کند.
  • اگر این فایل به فرمت دیگری تبدیل شود، همچنان نمی‌توان در همه مرورگرها پخش شود.

توجه:برای حل مشکلات تأیید، از <!DOCTYPE html> (HTML5) استفاده کنید.

از عنصر <object> استفاده کنید

برچسب <object> نیز می‌تواند به عنوان یک قالب برای محتوای خارجی (غیر HTML) تعریف شود.

این کد کوچک می‌تواند فایل MP3 را در داخل صفحه وب نمایش دهد:

مثال

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

آزمایش کنید

سوال:

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

از عنصر <audio> HTML5 استفاده کنید

عنصر <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>

آزمایش کنید

مثال‌های بالا از دو فرمت مختلف صدا استفاده می‌کنند. عنصر <audio> HTML5 سعی می‌کند صدا را با فرمت mp3 یا ogg پخش کند. اگر این کار انجام نشد، کد به طور خودکار به عنصر <embed> بازمی‌گردد.

سوال:

  • باید صدا را به فرمت‌های مختلف تبدیل کنید.
  • عنصر <audio> نمی‌تواند در HTML 4 و XHTML تأیید شود.
  • عنصر <embed> نمی‌تواند در HTML 4 و XHTML تأیید شود.
  • عنصر <embed> نمی‌تواند به عنوان پیام خطا نمایش داده شود.

توجه:برای حل مشکلات تأیید، از <!DOCTYPE html> (HTML5) استفاده کنید.

ساده‌ترین روش برای اضافه کردن صدا به وب‌سایت

ساده‌ترین روش برای اضافه کردن صدا به وب‌سایت چیست؟

پخش‌کننده‌ی رسانه‌ای یاهو قطعاً یکی از آنهاست.

استفاده از پخش‌کننده‌ی رسانه‌ای یاهو یک روش متفاوت است. شما باید به یاهو اجازه دهید تا کار پخش آهنگ‌ها را انجام دهد.

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

پخش‌کننده‌ی رسانه‌ای یاهو

مثال

<a href="song.mp3">پخش صدا</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

آزمایش کنید

استفاده از پخش‌کننده‌ی رسانه‌ای یاهو رایگان است. برای استفاده از آن، باید این کد جاوااسکریپت را در پایین صفحه‌ی وب خود قرار دهید:

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

سپس کافی است که لینک فایل MP3 را به HTML خود متصل کنید، جاوااسکریپت به طور خودکار برای هر آهنگ یک دکمه‌ی پخش ایجاد می‌کند:

<a href="song1.mp3">پخش آهنگ 1</a>
<a href="song2.mp3">پخش آهنگ 2</a>
...
...
...

پخش‌کننده‌ی رسانه‌ای یاهو یک دکمه‌ی کوچک برای کاربران شما ارائه می‌دهد، نه پخش‌کننده‌ی کامل. اما وقتی روی آن کلیک می‌کنید، پخش‌کننده‌ی کامل باز می‌شود.

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

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

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

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

مثال

<a href="song.mp3">Play the sound</a>

آزمایش کنید

صدا درون‌صفحه‌ای

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

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

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

برچسب‌های چندرسانه‌ای HTML 4.01

برچسب توضیح
<applet> منسوخ شده. applet درج شده را تعریف می‌کند.
<embed> در HTML 4.01 منسوخ شده، در HTML 5 مجاز است. شیء درج شده را تعریف می‌کند.
<object> شیء درج شده را تعریف می‌کند.
<param> پارامترهای شیء را تعریف می‌کند.

برچسب‌های چندرسانه‌ای HTML 5

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