این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش نحوه قرار دادن فایل های صوتی در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه قرار دادن فایل های صوتی در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
فایل های صوتی در HTML
در این بخش میخواهیم با نحوه قرار دادن فایل های صوتی ( صدا یا آهنگ ) در یک صفحه ی وب و یا بطور کلی در HTML آشنا شویم، لطفا در ادامه و تا پایان با من همراه باشید.
دوستان محترم بهتر است بدانید که تنها ۳ فرمت MP3 و WAV و Ogg در HTML5 پشتیبانی می شوند، لذا شما برای قرار دادن یک آهنگ و.. درون یک صفحه وب باید فایل شما یکی از ۳ فرمت MP3 و WAV و Ogg را داشته باشد در غیراینصورت فایل شما برای کاربر پخش نخواهد شد.
Free-Learn
پشتیبانی مرورگرها از تگ <audio> در HTML5
در جدول زیر میتوانید مشاهده نمایید که انواع مرورگرهای اینترنتی به ترتیب از فرمت های MP3 و WAV و Ogg پشتیبانی می کنند یا خیر.
| نام مرورگر | MP3 | Wav | Ogg |
|---|---|---|---|
| Edge | بله | بله | بله |
| Chrome | بله | بله | بله |
| Firefox | بله | بله | بله |
| Safari | بله | بله | خیر |
| Opera | بله | بله | بله |
طبق جدول بالا همانطور که مشاهده مینمایید تنها فرمتی که بدون مشکل توسط تمامی مرورگرها پشتیبانی می شود فرمت MP3 می باشد، لذا شماهم سعی کنید همیشه از فایل های صوتی با این فرمت استفاده نمایید.
یعنی اگه فایل آهنگ شما فقط MP3 باشه بازم هیچ مشکلی نداره و میتونه اجرا بشه، اینجوری نیست که بگیم باید حتما ۳ فرمت Mp3 و Wav و Ogg رو داشته باشیم.
Free-Learn
جدول نوع رسانه صوتی در HTML
| فرمت فایل | نوع رسانه |
| MP3 | audio/mpeg |
| WAV | audio/wav |
| Ogg | audio/ogg |
Free-Learn
نحوه قرار دادن فایل های صوتی در HTML
برای قرار دادن فایل های صوتی در یک صفحه ی وب و بطور کلی در HTML ما باید از تگ <audio> استفاده نماییم، لطفا به شکل کلی این تگ در HTML توجه نمایید :
|
1 2 3 |
<audio controls> <source src="آدرس فایل" type="نوع رسانه صوتی"> </audio> |
که با استفاده از صفت src ما باید آدرس دقیق فایل صوتی مان را مشخص نماییم و همچنین توسط صفت type باید مشخص شود که فایل صوتی ما از چه نوعی است ( طبق جدول نوع رسانه صوتی که کمی بالاتر هس )
همونطور که گفتم فقط فرمت mp3 کافیه اون دوتای دیگه رو نمیخواد، ( اگه این فرمت هارو هم داشتید خب اشکال نداره اضافه کنید ولی درکل نیاز نیست )
برای مثال الان من یک آهنگ گذاشتم اینجا : ( برشی از ترک Rising از آلبوم Rain OF Love ، اثر مرحوم ناصر چشم آذر )
Free-Learn
نحوه استفاده از تگ <audio>
خیلی راحت ، کافیه از تگ audio استفاده کنیم و آدرس مسیر فایل + نوع رسانه ای آهنگ مون رو مشخص کنیم.
|
1 2 3 4 5 6 7 |
<body> <audio controls> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
Free-Learn
پخش خودکار صدا در HTML
در ادامه آموزش نحوه قرار دادن فایل های صوتی در HTML ، با استفاده از صفت autoplay درون تگ <audio> ، میتونیم کاری کنیم که آهنگ بطور خودکار به محض لود شدن صفحه پخش شود.
در برخی از مرورگرهای مدرن ( مثلا موزیلا فایرفاکس و گوگل کروم ) ممکن است از پخش خودکار صدا جلوگیری کنند، اینجوری دیگه آهنگ خودکار پخش نمیشه، ولی خب شما میتونید خودتون تعیین کنید که آیا اجازه بده برای پخش خودکار یا خیر. (آموزش فعالسازی پخش خودکار در مرورگرها)
|
1 2 3 |
<audio controls autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> |
Free-Learn
تکرار پخش صدا در HTML
با قرار دادن صفت loop درون تگ <audio> میتوان حالت تکرار رو فعال کرد و در اینصورت به محض اتمام آهنگ ،دوباره همان آهنگ بطور خودکار پخش خواهد شد.
|
1 2 3 |
<audio controls loop> <source src="files/demo.mp3" type="audio/mpeg"> </audio> |
Free-Learn
قطع صدای فایل صوتی در HTML
با قرار دادن صفت muted درون تگ <audio> میتوان بطور پیش فرض صدای آهنگ را قطع کرد، یعنی با کلیک بروی دکمه پخش هیچ صدایی از آهنگ پخش نخواهد شد بلکه باید بصورت دستی صدای آهنگ را تنظیم نمایید.
|
1 2 3 |
<audio controls muted> <source src="files/demo.mp3" type="audio/mpeg"> </audio> |
Free-Learn
غیرفعالسازی پیش بارگذاری صدا در HTML
اگر تا به الان متوجه شده باشید وقتی یک فایل صوتی درون یک صفحه ی وب قرار داشته باشد، بطور خودکار و همزمان با بارگذاری صفحه ، فایل هم بارگذاری میشه.
حال برای اینکه این امکان را غیرفعال نماییم باید از مقدار none درون صفت preload استفاده نماییم.
اگر از صفت autoplay استفاده کرده باشید صفت preload دیگر عمل نخواهد کرد.
|
1 2 3 |
<audio controls preload="none"> <source src="files/demo.mp3" type="audio/mpeg"> </audio> |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : مخفی کردن پلیر در صفحه ( یعنی آهنگ خودکار خودش پلی میشه ولی خوده پلیر مخفیه )
|
1 2 3 4 5 6 7 |
<body> <audio autoplay> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
