صوت در HTML
جلسهٔ video پخش تصویر متحرک را یاد داد. صوت همخانوادهٔ فقطصداست: پادکست، یادداشت صوتی، مقدمهٔ درس، صدای کوتاه رابط، و افکت. عنصر audio است. با controls شروع کنید تا کاربر خودش پخش کند — همان ادب video — اما بدون poster، تصویر روی صفحه، یا جعبهٔ رزروشدهٔ ویدیو. یک نوار کنترل باریک فایل را از پوشهٔ media میگیرد و چیدمان را آرامتر از کلیپ کامل نگه میدارد.
audio چه میکند؟
audio از مرورگر میخواهد فایل صدا را بگیرد و یک پخشکنندهٔ جمعوجور نشان دهد. میتوانید با src یک فایل بگذارید، یا چند فرزند <source> فهرست کنید تا مرورگر فرمت قابلفهم را برگزیند. بوم تصویری مثل video نیست؛ وقتی controls باشد معمولاً یک نوار کنترل باریک میبینید. تایملاین، قطع صدا و حجم هنوز مهماند چون صدا میتواند اتاق ساکت را مثل ویدیوی بلند قطع کند. پخشکننده را ابزاری بدانید که بازدیدکننده کنترل میکند، نه پسزمینهای که خودش شروع شود.
پاسخ مستقیم
<audio controls src="sound.mp3"> بنویسید یا چند <source> برای فرمتهایی مثل MP3 و Ogg تودرتو کنید. متن کوتاه پشتیبان (و اختیاری پیوند دانلود) داخل عنصر بگذارید. فایل فشرده و مناسب وب را ترجیح دهید. پخش خودکار غافلگیرکننده با صدا را کنار بگذارید. اگر کلیپ با گفتار درس میدهد، رونوشت یا یادداشت واضح کنار پخشکننده برنامهریزی کنید تا بدون شنیدن هم درس کار کند.
فرمتهایی که مبتدی میبیند
همهٔ مرورگرها یک کدک را ترجیح نمیدهند. معمولاً با MP3 شروع میکنید چون پرکاربرد است، بعد Ogg را بهعنوان نامزد دوم اضافه میکنید. WAV برای ویرایش روی رایانه خوب است اما اغلب برای تنها نسخهٔ وب خیلی بزرگ است. جدول زیر نقشهٔ شروع عملی است — نه دانشنامهٔ کامل کدک.
📊 انواع رایج صوت
| Type hint | Typical file | Beginner note |
|---|---|---|
| audio/mpeg | .mp3 | فرمت شروع پرکاربرد |
| audio/ogg | .ogg | source دوم مفید برای پوشش بیشتر |
| audio/wav | .wav | اغلب بزرگ؛ وقتی میتوانید برای وب فشرده کنید |
صوت ساده با controls
یک MP3 کوتاه بهعلاوهٔ controls برای بسیاری از صفحات تمرین کافی است. فایل را زیر پوشهای پیشبینیپذیر مثل media/ بگذارید، نام را خوانا نگه دارید، و مسیر را مثل URL تصویر بررسی کنید. اگر نوار ظاهر شد ولی پخش کار نکرد، ابزار توسعهدهنده را باز کنید یا URL فایل را مستقیم امتحان کنید — مسیر خراب مثل بقیهٔ داراییها بیصدا شکست میخورد.
Simple audio
html<audio controls src="media/hello.mp3">
Your browser does not support audio.
</audio>خواندن نمونهٔ ساده
controlsپخش، مکث، جستوجو در تایملاین و اغلب حجم را در UI مرورگر نشان میدهدsrcبه فایل صدا نسبت به صفحه اشاره میکند (اینجا زیرmedia/)- متن داخل، پشتیبان است وقتی عنصر پخش نمیشود یا عامل قدیمی رسانه را نادیده میگیرد
- اینجا
posterنیست — آن مالvideoاست - برای نوار سادهٔ صوت معمولاً مثل video به
widthنیاز ندارید
چند source و پیوند دانلود
فهرست کردن Ogg و MP3 با مقدارهای MIME در type شانس پیدا کردن نامزد قابلپخش را بالا میبرد. ترتیب مهم است: مرورگر تا پیدا کردن چیزی که بتواند دیکد کند در فهرست جلو میرود. پیوند دانلود وقتی پخش شکست میخورد یا بازدیدکننده میخواهد ذخیره کند کمک میکند. هنگام خروجی دو فرمت، همان محتوای درس را در هر فایل نگه دارید — گفتار متفاوت در هر source تست را گیج میکند.
Multiple audio sources
html<audio controls>
<source src="media/hello.ogg" type="audio/ogg">
<source src="media/hello.mp3" type="audio/mpeg">
Download <a href="media/hello.mp3">hello.mp3</a>
</audio>خواندن نمونهٔ چندمنبعی
- sourceها بهترتیب امتحان میشوند تا مرورگر یکی قابلپخش پیدا کند
typeکمک میکند فرمتهای پشتیبانینشده سریع رد شوند بدون دانلود همهٔ نامزدها- پیوند دانلود محتوای پشتیبان انسانی داخل
audioاست - نام فایل و پوشه را دقیق نگه دارید — غلط املایی در
srcمثل «پخشکنندهٔ خراب» بهنظر میرسد - برای دموی خیلی کوچک هنوز میتوانید تک
srcبمانید؛ چندمنبع ارتقای استحکام است
احترام به گوش و پهنای باند
پخش خودکار صدا بدون اقدام روشن کاربر اغلب مسدود میشود و وقتی کار کند معمولاً بیادب است. نبود controls بازدیدکننده را بدون راه محترمانهٔ مکث گیر میاندازد. WAV چنددقیقهای فشردهنشده میتواند دیتای موبایل را هدر دهد وقتی MP3 فشرده همان ایده را میآموزد. صوت وباندازه را مثل ویدیوی وباندازه خروجی بگیرید: سکوت را کوتاه کنید، بیتریت معقول بگذارید، و مستر استودیو را تنها فایل عمومی نکنید. موسیقی پسزمینه در محصول بعدی تصمیم طراحی جدا با رضایت و مسیر قطع صداست — نه پیشفرض صفحهٔ درس مبتدی.
رونوشت وقتی گفتار درس میدهد
اگر کلیپ مفهوم را با کلمات توضیح میدهد، رونوشت یا یادداشت واضح روی صفحه برنامهریزی کنید. audio مثل img ویژگی alt ندارد. دسترسپذیری گفتار یعنی جایگزین متنی، عنوان واضح کنار پخشکننده، و کنترل کاربر — نه تصویر poster. حتی یک پاراگراف کوتاه که نکتهٔ گفتاری را بازمیگوید به کسانی که الان نمیتوانند بشنوند، موتورهای جستوجو، و خودتان وقتی شش ماه بعد فراموش میکنید کمک میکند.
صوت در برابر video در برابر embed
- فایل صدای خودمیزبان →
audio - کلیپ خودمیزبان با تصویر →
video - صفحهٔ پخشکننده از سایت دیگر → اغلب
iframe(جلسهٔ بعدی برای embedهایی مثل YouTube)
پادکست را فقط چون در video کنترل دیدید داخلvideoنگذارید. MP3 محلی را وقتیaudioکافی است در iframe نپیچید. عنصر را با نوع رسانه جور کنید تا مرورگر، ابزار کمکی، و انتظار CSS صادق بمانند.
تمرین در ویرایشگر
- یک
.mp3کوتاه زیرmedia/بگذارید (ده تا سی ثانیه برای تمرین کافی است). - با
audio controlsو مسیر نسبی درست جاسازی کنید. - با UI مرورگر پخش، مکث، جستوجو و تنظیم حجم کنید.
- اختیاری: نوع دوم
source(مثلاً Ogg) و پیوند دانلود اضافه کنید. - اگر کلیپ حرف میزند، یک جمله رونوشت یا یادداشت درس کنار پخشکننده بنویسید.
- مطمئن شوید صفحه حتی بدون فشردن play هنوز معنا دارد.
اشتباهات آسان
- پخش خودکار صدا بدون اقدام روشن کاربر
- نبود
controlsتا بازدیدکننده محترمانه مکث نکند - پیوند به WAV بزرگ فشردهنشده وقتی MP3 کافی است
- انتظار
posterرویaudio(عادت video است) - فراموش کردن متن پشتیبان یا مسیر دانلود وقتی فرمت شکست میخورد
- قاطی کردن embedهای
iframeشبیه YouTube با فایلهایaudioخودمیزبان - گذاشتن گفتار متفاوت در هر
sourceهنگام تست «پشتیبانی فرمت» - مسیر خراب
media/و مقصر دانستن مرورگر
خلاصه
audioفایل صدایی را که خودتان میزبانی میکنید جاسازی میکند- با
controlsبازدیدکننده پخش، مکث و جستوجو میکند - چند فرمت
sourceبا راهنمایtypeپشتیبانی را بهتر میکند - فایل فشرده و پخش شروعشده توسط کاربر را ترجیح دهید
- وقتی محتوای گفتاری درس را حمل میکند رونوشت یا یادداشت بگذارید
- صوت برای صدا، video برای تصویر+صدا، iframe برای پخشکنندهٔ خارجی
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کردهاید
📝 دستورالعملها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- میتوانید آزمون را هر چند بار که میخواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده میشود