صوت HTML

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

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

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

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

در این فصل، 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 استفاده می‌کند، بنابراین در اینترنت اکسپلورر، کروم و سافاری معتبر است.

برای اینکه این صدا در مرورگرهای 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 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">پخش صدای</a>

به طور شخصی امتحان کنید

صدا درج شده

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

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

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

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

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

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

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