پخش کننده صوتی در HTML5
دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه آخرین بروز رسانی: 04 آذر 1399پخش کننده صوتی در HTML5 که از تگ audio
برای جاسازی و پخش فایلهای صوتی در صفحات وب استفاده میکند. این تگ به شما امکان میدهد بدون نیاز به افزونههای اضافی، یک پخش کننده صوتی ساده و کاربردی را در وب سایت خود ایجاد کنید.
راهنمای گام به گام ایجاد پخش کننده صوتی HTML5
در این مقاله، نحوه ایجاد یک پخش کننده صوتی ساده HTML5 را به صورت گام به گام شرح خواهیم داد. با کمی تمرین و خلاقیت میتوانید پخش کنندههای صوتی HTML5 جذاب و کاربردی برای وب سایت خود ایجاد کنید.
موارد مورد نیاز:
- یک ویرایشگر متن (مانند Notepad++ یا Sublime Text)
- یک مرورگر وب (مانند Chrome، Firefox یا Safari)
- یک فایل صوتی (به فرمت MP3، Ogg یا WAV)
مراحل:
- ایجاد فایل HTML:
- یک فایل HTML جدید با نام دلخواه (مثلاً
audio-player.html
) ایجاد کنید. - کد زیر را در داخل فایل HTML خود قرار دهید:
- یک فایل HTML جدید با نام دلخواه (مثلاً
HTML
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>پخش کننده صوتی HTML5</title>
</head>
<body>
<script src="script.js"></script>
</body>
</html>
- ایجاد فایل JavaScript:
- یک فایل JavaScript جدید با نام
script.js
ایجاد کنید. - کد زیر را در داخل فایل JavaScript خود قرار دهید:
- یک فایل JavaScript جدید با نام
JavaScript
const audio = document.querySelector('audio');
audio.src = 'audio/myfile.mp3'; // مسیر فایل صوتی خود را اینجا وارد کنید
audio.controls = true; // دکمه های کنترل را نمایش می دهد
audio.addEventListener('loadedmetadata', function() {
console.log('فایل صوتی بارگذاری شد!');
});
audio.addEventListener('play', function() {
console.log('پخش آغاز شد!');
});
audio.addEventListener('pause', function() {
console.log('پخش متوقف شد!');
});
audio.addEventListener('ended', function() {
console.log('پخش به پایان رسید!');
});
- آزمایش پخش کننده:
- فایل HTML و JavaScript خود را در یک پوشه ذخیره کنید.
- فایل
audio-player.html
را در مرورگر وب خود باز کنید. - باید پخش کننده صوتی را با دکمه های کنترل مشاهده کنید.
- بر روی دکمه “Play” کلیک کنید تا پخش آغاز شود.
- میتوانید با استفاده از دکمههای دیگر، پخش را متوقف کنید، به عقب یا جلو بروید و یا صدا را تنظیم کنید.
نکات:
- میتوانید مسیر فایل صوتی را در کد
audio.src
به آدرس فایل صوتی خود در کامپیوترتان تغییر دهید. - میتوانید با استفاده از CSS به ظاهر پخش کننده صوتی خود مانند رنگ، حاشیه و اندازه استایل دهید.
- میتوانید از JavaScript برای کنترل بیشتر بر پخش کننده صوتی مانند شروع خودکار پخش، حلقه پخش و پاسخ به کلیک کاربر استفاده کنید.
در حالی که سایر ویژگیها کمتر مورد استفاده قرار میگیرند، اما خوب است که در صورت نیاز به تنظیم نوع رفتار خاص برای پخش کننده صوتی HTML5 خود، با آنها آشنا باشید.
Definition | Attribute |
باعث می شود صدا به طور خودکار شروع به پخش کند | autoplay |
باعث می شود که صدا پس از پایان دوباره شروع به پخش کند | loop |
پخش کننده را به طور پیش فرض بی صدا می کند | muted |
به مرورگر دستور می دهد که چه مواردی را از قبل بارگیری کند – کل پرونده (خودکار) ، فراداده آن (فراداده) یا اصلاً هیچ چیز (هیچکدام) | preload |
نکات مهم پخش کننده صوتی HTML5
- متن موجود بین تگهای
<audio>
را محتوای برگشتی مینامند. اگر نتواند صدا را پخش کند، مرورگر آن را نمایش میدهد. در اینجا میتوانید پیامی به کاربر یا پیوند مستقیم به پرونده اضافه کنید. -
<audio>
یک عنصر درون خطی است. با این حال ، همیشه برای طراحی مناسب نیست. میتوانید با استفاده از CSS آن را مسدود کنید.
پشتیبانی مرورگرها
از اکثر مرورگرها مانند : chrome، ie ، Firefox ، Safari، Opera، Edge پشتیبانی می کند.
این مقاله چقدر براتون مفید بود؟