ورود ثبت نام
فیلم آموزش فایل صوتی
» طراحی سایت » آموزش HTML » پخش فایل صوتی در HTML با تگ audio – آموزش به صورت فیلم
17299 بازدید

پخش فایل صوتی در HTML با تگ audio – آموزش به صورت فیلم

برای قرار دادن صدا یا آهنگ در در صفحات وب یا وبلاگ قبلا تگ خاصی نداشتیم ولی در html 5 برای بارگذاری فایل صوتی از تگ Audio استفاده می کنیم این تگ یه نوع تگ فرزند دار است و شناسه یا صفت های خاص خودش را دارد که در ادامه با آن ها آشنا خواهیم شد .

فیلم مربوط به تگ audio برای قرار دادن صدا در html  را در ادامه می توانید مشاهده بکنید :

تگ Audio و شناسه های آن برای پخش فایل صوتی

در تگ audio از تگ Source استفاده می کنیم و این تگ شناسه ای به نام Src دار که مخفف همان سورس است و آدرس فایل صوتی را در آن قرار می دهیم .

شناسه Controls :

این شناسه کنترل های پیش فرض مرورگر را برای پخش فایل صوتی فعال می کند . مانند stop و کم و زیاد کردن صدا و …

شناسه autoplay :

اگر از این شناسه استفاده کنید به محض بارگذاری صفحه html یا سایت ، اون فایل صوتی به صورت خودکار پخش می شود .

شناسه Loop :

این شناسه باعث می شود اگر فایل صوتی تمام شد دوباره پخش شود .

حالا اگه مرورگر کاربر از تگ audio پشتیبانی نکنه چیکار باید بکنیم ؟؟؟؟؟؟؟؟؟؟    برای رفع این مشکل همانطور که در سورس کد می بینید بعد از تگ Source یه متن رو می نویسیم تا در صورت کار نکردن تگ به کاربر اطلاع بده که مرورگر اون این تگ رو ساپورت نمی کند .

سورس کد HTML برای پخش فایل صوتی  :

<html>
	<head>
		<title>Web30ty</title>
	</head>
	<body>
		<audio controls autoplay loop >
			<source src="music.mp3" type="audio/mp3" />
			
			مرورگر شما این تگ را ساپورت نمی کند . 
		</audio>
	</body>
</html>

فقط دقت کنید به جای music.mp3 آدرس فایل خودتون رو فرار بدید و در قسمت Type هم نوع و فرمت فایل صوتی را مشخص می کنیم و اگر از فرمت های دیگری استفاده کردید حتما در قسمت type هم نوع آن را مشخص کنید در ضمن از فرمت های دیگر همان فایل می توانید به صورت همزمان استفاده کنید .

فیلم آموزش پخش فایل های صوتی را از اینجا دانلود بکنید .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. فرشاد گفت:

    سلام.
    ممنون بخاطر این مقالۀ خیلی عالی.

  2. متین گفت:

    با سلام.تشکر از اموزش عالی بود
    فقط اینکه ی سوال اگر بخوام چند تا اهنگ پشت سر هم بخونه باید چیکار کنم؟
    منظورم اینکه یک اهنگ تموم بشه خودش بره اهنگ بعدی؟
    ممنون میشم راهنمایی کنید؟
    با تشکر

  3. محمد امین گفت:

    با سلام و خسته نباشید
    چگونه میشه کدی قرار داد تا فایل آهگ را در نوشته فراخوانی کنه و در گرید وبسایت به نمایش بگذارد.
    من سایتم وردپرسی است و کد پخش آهنگ در نوشته هایم می باشد چه کدی می شود نوشت تا فایل صوت من در نوشته را فراخوانی کنه و در صفحه اصلی وبسایت که گرید ساخته ام به نمایش بگذارد.
    با تشکر

  4. معصومه گفت:

    چطوری مثله سایت سایت نایک موزیک وقتی پلی را میزنی لیست پخش و دانلود بیاد زیر صفحه؟ میشه کدشو بزارید؟

  5. شهاب گفت:

    سلام جناب مهندس وقت بخیر
    برای مواقعی که چند تا فایل صوتی داریم در یک صفحه چطور میشه کنترل کرد به گونه ای که همزمان تنها فقط یه فایل صوتی پخش شه؟ چون در حالت عادی همزمان میتونی تعداد زیادی فایل صوتی پخش کنید برای همین میخوام طوری باشه که با پخش یه فایل صوتی جدید، فایلهای قبلی pause بشن

    • رضا طوماری گفت:

      سلام وقت بخیر
      برای این کار باید از جاوا اسکریپ یا جی کوئری استفاده بکنید تا بتونید بقیه صوت هارو متوقف کنید وقتی که یکی از صوت ها داره پخش میشه .

  6. zeynab گفت:

    سلام مجدد وقت بخیر مشکل بنده حل نشد من به جای شناسه hidden به Audio همان display: none دادم اما صدا وقتی صفحه بازمیشه یا رفرش می کنم پخش نمیشه من مشکلم اینه نه مخفی کردن .
    من میخوام صدا وقتی صفحه باز یا رفرش میشه صدا خودش پخش شه . از autoplay هم استفاده کردم.
    اما صدا پخش نمیشه

    • رضا طوماری گفت:

      سلام
      میتونید کدتون رو توی تلگرام بفرستید واسمون تا مشکلتون رو برطرف بکنیم .

  7. zeynab گفت:

    سلام سوال بنده اینه که میخوام اهنگی در پس زمینه پخش شه به صورت اتوماتیک اما این اتفاق نمی افته در ضمن مخفی باشه من این کد رو قرار دادم اما پخش نمیشه ادرس دهی هم درسته وقتی مخفی بودن روبر میدارم Controls نمایش میده که با دکمه پخش پخش میشه.

    • رضا طوماری گفت:

      سلام

      کافیه این کد css رو بهش اضافه بکنید :
      audio { display:none;}
      و به تگ audio هم مشخصه autoplay رو قرار بدید .

  8. فلاحزاده گفت:

    سلام وقت بخیر من طبق کدهای شما کد نویسی رو انجام دادم و فایل صوتی من داخل پوشه ای روی دسک تاپ قرار داره و ادرس نام پوشه و نام فایل رو نوشتم اما در سایتم فقط ایکن فایل صوتی قرار میده و فایل پخش نمیشه ممنون میشم راهنمایی بفرمایید

    • رضا طوماری گفت:

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

  9. احسان گفت:

    با عرض سلام و خسته نباشید .
    بنده یک فایل اچ دی ام ال دارم که طبق تعریفاتی که شما هم در سایتتون گفتید باید به صورت خودکار پخش بشه ولی تا خودم پلی نکنم پخش نمیشه من از مرورگر گوگل کروم ،اینترنت اکسپلورر و فایر فاکس استفاده میکنم .
    ممنون میشم که عدم پخش خودکار را به من بگید ومحبت کنید ضمن علت عدم پخش خودکار بگید آیا کاری میشه کرد که هر کاربری سایت رو باز میکنه آهنگ بصورت اتوماتیک براش پخش بشه یا این از دست ما خارجه؟
    با تجدید احترام
    احسان

    • رضا طوماری گفت:

      با سلام
      در تگ audio اگر مقدار autoplay رو قرار بدید فایل بصورت خودکار شروع به پخش شدن میکنه .
      اگر فیلم رو هم نگاه کنید کامل توضیح داده شده

  10. H گفت:

    سلام.ببخشید یک سوال داستم.چگونه می توان یک موزیک را طوری درسایت قرار دهیم که کسی نتواند آن را کنترل کند و آن خود به خود پخش شود.برای مثال وقتی کسی وارد سیات می شود یک آهنگ به صورت اتوماتیک پخش شود.با تشکر از سایت خوبتون

    • رضا طوماری گفت:

      با سلام
      اگر ویژگی controls رو از تگ audio بردارید قسمت کنترل در پلیر غیرفعال می شود

  11. مهدی گفت:

    سلام خسته نباشید. من کد شمارو تو قسمت هدر سایتم کپی کردم و تو قسمت music.mp3 هم لینک اهنگم رو گزاشتم. همه چیش اوکی بود فقط یه مشکلی که داشت این بود که پلیره سمت راست هدرم بود. خیلی راست بود. میخوام پلیر رو بیارمش وسط. باید چکار کنم؟

  12. behdad گفت:

    سلام دوست عزیز .من کد پخش آهنگ آنلاین رو از وبسایت شما کپی کردم و تو وبلاگم گذاشتم جواب داد .ولی متاسفانه وقتی دوباره برای ویرایش پستم اقدام کردم همه کدها پاک شدن فقط اسم سایت شما موند .آیا راهی هست که اگه دوباره خواستم پستم رو ویرایش کنم کد html که قبلا تنظیم کردم پاک نشه. ممنون

    • رضا طوماری گفت:

      سلام
      بله اون کد رو تو یه فایل txt ذخیره بکنید و بعد خواستید هر صوتی رو اضافه بکنید کافیه که آدرس آهنگ یا صوت رو داخل src قرار بدید .

  13. علی گفت:

    سلام ببخشید من یه سوالی داشتم . آیا میشه که از سی شارپ فایل html فرا خوانی کرد?

  14. حسین گفت:

    سلام دوست عزیز،

    یه سوال داشتم میخواستم ببینم که اگه بخوایم فایل صوتی مـثل تلفظ سایت های دیکشنری باشه چیکار باید کرد؟

    منظورم اینه داخل همون صفحه فقط پخش شه(بعد اینکه کاربر روی کلمه کلیک کرد.)

    • رضا طوماری گفت:

      برای این کار باید از جاوا اسکریپت استفاده کنید .

    • حسین گفت:

      ممنون

      میشه یه نمونه کد یا یه لینک بهم معرفی کنید؟

    • حسین گفت:

      استفاده از جاوا اسکریپت برای پخش صوت رو تو سایت استک سرچ کردم، جوابمو پیدا کردم.

      بازم ممنون آقای طوماری