آموزش و یادگیری تگ audio در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، با تگ <audio> آشنا مي‌شويم. اين تگ براي پخش فايل‌هاي صوتي در صفحات وب به کار مي‌رود و از HTML5 معرفي شده است. با استفاده از <audio> مي‌توانيد موسيقي، پادکست، افکت صوتي يا هر فايل صوتي ديگري را در سايت خود قرار دهيد.

تگ audio در HTML چيست؟

تگ <audio> يک تگ معنايي و چندرسانه‌اي در HTML5 است که امکان پخش صدا را به کاربران مي‌دهد. اين تگ مي‌تواند با ويژگي‌هايي مانند controls براي نمايش کنترل‌هاي پخش، autoplay براي شروع خودکار صدا و loop براي تکرار مداوم فايل صوتي همراه شود.

مثال ساده از تگ audio

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  مرورگر شما از تگ audio پشتيباني نمي‌کند.
</audio>

در اين مثال، مرورگر يک پلير صوتي ساده نمايش مي‌دهد و کاربر مي‌تواند صدا را پخش، مکث يا تغيير حجم دهد.

ويژگي‌هاي پرکاربرد تگ audio

<audio controls autoplay loop muted>
  <source src="song.ogg" type="audio/ogg">
</audio>

• controls: نمايش کنترل‌هاي پخش (پخش، مکث، حجم و ...)
• autoplay: پخش خودکار فايل هنگام بارگذاري صفحه
• loop: تکرار مداوم فايل صوتي
• muted: بي‌صدا کردن فايل به‌صورت پيش‌فرض

چند منبع صوتي در يک تگ audio

براي سازگاري با مرورگرهاي مختلف، مي‌توانيد چند منبع صوتي با فرمت‌هاي مختلف تعريف کنيد:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  مرورگر شما از تگ audio پشتيباني نمي‌کند.
</audio>

صفات مهم تگ audio

نکات حرفه‌اي در استفاده از audio

• هميشه از ويژگي <source> با چند فرمت مختلف براي سازگاري با مرورگرهاي متفاوت استفاده کنيد.
• استفاده از controls تجربه کاربري بهتري ايجاد مي‌کند.
• در صورت استفاده از autoplay بهتر است muted نيز فعال باشد تا مرورگرها اجازه پخش خودکار بدهند.
• براي دسترسي بهتر، هميشه متن جايگزين داخل تگ <audio> بنويسيد.

استايل‌دهي پلير صوتي

audio {
  width: 100%;
  max-width: 400px;
  outline: none;
}

با اين استايل پلير صوتي به صورت واکنش‌گرا نمايش داده مي‌شود و ظاهر مدرن‌تري خواهد داشت.

براي يادگيري تگ‌هاي صوتي و تصويري ديگر مانند <video> و <source>، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.