نحوه گذاشتن آهنگ در html

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

فایل های صوتی در HTML

اگر در جریان باشید میدانید که قبل از اینکه HTML5 روی کار بیاید ما برای قرار دادن یک فایل صوتی یا تصویری باید از نرم افزارهای جانبی (افزونه یا پلاگین ها) همانند فلش استفاده میکردیم ولی امروزه با وجود HTML5 کاره ما دیگه خیلی خیلی راحت شده.

دوستان محترم بهتر است بدانید که تنها ۳ فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، لذا شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب باید فایل شما یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.



پشتیبانی مرورگرها از تگ <audio> در HTML5

در جدول زیر میتوانید مشاهده نمایید که انواع مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر.

طبق جدول بالا همانطور که مشاهده مینمایید تنها فرمتی که توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد، لذا شما باید سعی کنید همیشه از فایل های صوتی با این فرمت استفاده نمایید.

جدول نوع رسانه صوتی در HTML

نحوه قرار دادن آهنگ در HTML

برای قرار دادن فایل های صوتی در یک صفحه ی وب و بطور کلی در HTML ما باید از تگ <audio> استفاده نماییم، لطفا به شکل کلی این تگ در HTML توجه نمایید.

<body>
<audio controls>
<source src="demo.mp3" type="audio/mpeg">
</audio>
</body>
امتحان کنید

که با استفاده از صفت src ما باید آدرس دقیق فایل صوتی مان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل صوتی ما از چه نوعی است (طبق جدول نوع رسانه صوتی در HTML).

پخش خودکار صدا در HTML

با استفاده از صفت autoplay درون تگ <audio> ، میتوان کاری کرد که صدا/آهنگ بطور خودکار به محض لود شدن صفحه پخش شود.

<audio controls autoplay>
<source src="demo.mp3" type="audio/mpeg">
</audio>
امتحان کنید


تکرار پخش صدا در HTML

با قرار دادن صفت loop درون تگ <audio> میتوان حالت تکرار پخش یک آهنگ/صدا را فعال کرد و در اینصورت به محض اتمام آهنگ ،دوباره همان آهنگ بطور خودکار پخش خواهد شد.

<audio controls loop>
<source src="demo.mp3" type="audio/mpeg">
</audio>
امتحان کنید


قطع صدای فایل صوتی در HTML

با قرار دادن صفت muted درون تگ <audio> میتوان بطور پیش فرض صدای آهنگ را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از آهنگ پخش نخواهد شد بلکه باید بصورت دستی صدای آهنگ را تنظیم نمایید.

<audio controls muted>
<source src="demo.mp3" type="audio/mpeg">
</audio>
امتحان کنید


منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل PDF این آموزش لطفا به سایت مراجعه نمایید.