ابزار قرار دادن فایل صوتی و موزیک در وبلاگ

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

حتی اگر با کدنویسی آشنا باشین، خیلی از مواقع حال و حوصله‌ی تنظیمات تگ audio رو ندارین و این برای من خیلی پیش اومده و نیاز به یک ابزار برای راحتی انجام این کار رو به شدت احساس می‌کنم. این شد که مثل «ابزار قرار دادن ویدیو در وبلاگ» این ابزار رو هم برای قرار دادن فایل‌های صوتی از جمله موسیقی، پادکست، جلوه‌های صوتی و ... برای استفاده آزاد منتشر می‌کنم:

ابزار تولید کد فایل صوتی

سایت‌های آپلود فایل

آموزش استفاده از ابزار

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

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

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

وقتی که وارد منبع شدین کد کپی کرده رو اونجا paste می‌کنین و دوباره دکمه‌ی منبع رو فشار میدین یا کلیک می‌کنین تا وارد حالت ویرایش دیداری بشین و حالا می‌تونین پست خودتون رو به راحتی بنویسین.

تنظیمات پیشرفته

این ابزار برای افرادی که نیاز به تنظیمات خاصی از تگ صوتی دارن هم طراحی شده. تقریبا تمامی ویژگی‌های تگ صوتی HTML5 به صورت دیداری قرار داده شده که به راحتی بتونیم تگ صوتی رو با سرعت بالا تولید کنیم.

بخش‌های نشانی فایل با فرمت‌های OGG و Wav کامل مشخص هست. اگر به غیر از فایل با فرمت mp3 رو آپلود کردین، می‌تونین نشانی فایل آپلود شده با اون فرمت خاص رو هم در این کادرها وارد کنین تا اگر دوستی با مرورگری وارد وبلاگتون شد و دستگاهش کدک mp3 رو پشتیبانی نمی‌کرد بتونه از طریق فرمت ogg آهنگ مورد علاقه شما رو گوش بده. گزینه نمایش کنترل هم برای نشون دادن کنترل‌های ایستادن و نوار پخش موزیک هست که حتما فعال باید باشه تا بقیه بتونن استفاده کنن از پخش‌کننده.

پخش اتومات برای مواقعی هست که می‌خواین فایل صوتی شما برای خواننده به صورت خودکار پخش بشه، بدون این که دکمه‌ی پخش رو بزنن. البته این گزینه در مرورگرهای پیشرفته معمولا غیرفعال شده اما احتمالا کسانی که از مرورگر کروم استفاده می‌کنن هنوز براشون پخش خودکار اتفاق میوفته. برای این منظور باید این گزینه رو فعال کنین و بعد کد رو دوباره تولید کنین.

اگر می‌خواین موزیک شما بعد از اتمام پخش دوباره به صورت خودکار تکرار بشه، این گزینه رو فعال کنین.

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

تگ audio به صورت پیش‌فرض یک مقدار زیبا نیست و به دلیل زیبایی بیشتر این تگ رو با گوشه‌های خمیده، به صورت پیش‌فرض قرار دادم ولی اگر نمی‌پسندیدن می‌تونین این گزینه رو غیرفعال کنین تا به صورت عادی براتون به نمایش گذاشته بشه.

در مورد عرض آدیو هم اگر می‌خواین تگ صوتی ۱۰۰ درصد عرض پست رو به خودش اختصاص بده یا هر درصد یا واحدی که مد نظرتون هست رو در این کادر قرار بدین و کد رو دوباره تولید کنین تا به شکل مد نظرتون قرار بگیره.

برچسب‌ها
پیشنهادهای آسمانم

تا حالا۲۴ تا نظر داشتیم!

محمدرضا ...

مثل همیشه عالی :)

۲۲ آبان ۱۳۹۹
مرسی ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

wow

۲۲ آبان ۱۳۹۹
مرسی ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

تمام :) ساخت ابزار فایل صوتی توی برنامه من بود ولی ماشاء الله شما اینقدر خوب کار کردین که دیگه فکر نکنم نیازی باشه من کاری انجام بدم.

واقعا عالیه... ممنونم ازتون!

۲۲ آبان ۱۳۹۹
خب شاید اولین دید برای ساخت یک ابزار کمک به همه باشه ... اما حتما ابزار رو بسازین ... این یک تجربه‌ی کدنویسی فوق‌العاده هست ... چالش‌های جالبی داره و همینطور خواننده‌های وبلاگتون ازش استفاده می‌کنن ... خیلی از خواننده‌های شما خواننده وبلاگ من نیستن ... و به درد خیلی‌های دیگه می‌تونه بخوره ... پس حتما به کارتون ادامه بدین ... و سعی نکنین کارها رو مقایسه کنین توی این مرحله ... سعی کنین از کاری که می‌کنین لذت ببرین ... برای بهبود و پیشرفت خوبه که مقایسه کنین ...

+ مرسی ... خواهش می‌کنم 😊🌷🌹
۲۲ آبان ۱۳۹۹

عه چقدر خوب، اتفاقاً برای همین روزایی که در پیش داریم همچین پلیری می‌خواستم و مرسی که معرفی کردی :)

۲۲ آبان ۱۳۹۹
واقعا ابزار پر کابردیه توی محیط وبلاگ ... خودم خیلی ازش استفاده می‌کنم جاهای مختلف ... 😁
+ خواهش می‌کنم ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

خیلی عالی و مفید. :)))))

۲۲ آبان ۱۳۹۹
مرسی ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

بسیار عالی .. به قدری حرفه ای و کامل همه چی رو توضیح میدین آدم دلش نمیاد نخونه 

 

ممنونم :))

۲۲ آبان ۱۳۹۹
مرسی ... خوشحالم که از خوندن پست لذت بردین ... 😊🌷🌹
خواهش می‌کنم ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

سلام... خیلی ممنون مفید بود واقعا🌷...فقط دوتا سوال برام پیش اومد ممنون میشم جواب بدید 🙏

1. این ابزار میشه دانلود کرد؟ یا فقط تو همین صفحه می تونیم استفاده کنیم؟

2.من از ابزار شما برای یکی از پستایی که قبلا گذاشته بودم استفاده کردم منتهی نتونستم اون آهنگ قبلی رو که گذاشته بودم پاک کنم😅..راهی هست برای این قضیه؟

۲۲ آبان ۱۳۹۹
سلام ... وقتتون بخیر ...
خواهش می‌کنم ... مرسی ... 😊🌷🌹 ... حتما ...

۱. ابزار قابل دانلود هست ... تنها کافیه این صفحه از وبلاگم رو با مرورگرتون ذخیره کنین (مثلا برای مرورگر فایرفاکس وقتی روی صفحه راست کلیک می‌کنین گزینه‌ای با عنوان save page as داره) ... و هر بار که می‌خواین استفاده کنین از جایی که ذخیره کردین دوباره فایل html رو فراخونی کنین ... ولی در حالت عادی همیشه اینجا هست ...

۲. خب برای پاک کردن تگ‌های آدیو و ویدیو می‌تونین به قسمت منبع پستتون برین و کلمه‌ی audio یا video رو پیدا کنین توی کد منبع پست ... و از آغاز تگ تا پایانش رو حذف کنین ... چرا که ویرایشگر دیداری بیان قابلیت حذفش رو نداره ...
۲۲ آبان ۱۳۹۹

بسیار عالی...

موفق باشید

۲۲ آبان ۱۳۹۹
مرسی ... سلامت باشین ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

نه خب پروژه های دیگه ای هم هستش که روشون کار کرد :) نمیدونم از کدوم روش برای قرار دادن اطلاعات توی کد اصلی استفاده کردین ولی بنظرم استفاده از Regular Expression برای پیدا کردن رشته مورد نظرمون تو کد اصلی و جایگذاری مقدار پیش فرض با داده کاربر کار تمیز تری هستش. تجربه تقریبا مشابهی رو در "ابزار اسلایدر ساز تمام css" دارم. هدف من حل کردن مشکلات کاربران بلاگ بود که شما این مشکل رو به خوبی حل کردین و چون طراحی واقعا قشنگی هم تو ساخت ابزار دارین یک جورایی اتلاف وقت هست اگر حتی تلاش کنم یک ابزار کپی مال شما بسازم :) بخاطر همین تو قسمت لینک های روزانه یک لینک به این مطلب گذاشتم تا خواننده هام اگر خواستن از این ابزار استفاده کنن. باز ممنون از لطفتون... هدفم این نبود که بگم "منم بلدم" یا "شما ایده منو دزدیدین" بلکه بالعکس واقعا خوشحالم که فردی هست که نیاز های وبلاگ نویسان رو درک کنه و کاری براشون انجام بده!

۲۲ آبان ۱۳۹۹
عالیه که پروژه‌های دیگه‌ای هست ... پس خوب شد که مشکل یه نیازمندی حل شد ... 😁
+ موافقم ... با رگکس کار تمیزتر در میاد ولی این ابزارهایی که من درست کردم بسیار ساده طراحی شدن و زیاد تمیز نیستن ... 😁
+ چه جالب ... یکی از خواننده‌های بلاگ از من خواسته بود که ابزار اسلایدر ساز تمام سی اس اس بنویسم ... توی فکرش بودم ... خوب شد که یکی ساختین ...
+ مرسی که لینک کردین ... با منطقتون موافقم ... امیدوارم به درد دوستان بخوره ... خواهش می‌کنم ... 😊🌷🌹
+ خب من هم به چنین چیزی فکر نمی‌کردم ... راستش توی این فکر بودم که شاید انگیزه‌ی یک خالق اثری رو برای ساخت یک محصول منحصر به فردش گرفته باشم ... که خوشحالم اینطور نبود ...
۲۲ آبان ۱۳۹۹

مثل همیشه عالی :))، خسته نباشین😉

۲۲ آبان ۱۳۹۹
مرسی ... سلامت باشین ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

اقعا بهترین ابزار ساز بیانی😉💗

۲۲ آبان ۱۳۹۹
قربونت ... مرسی ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

سلام مجدد...بنده یک پیشنهاد دارم از شما ... چون کاربلد هستید گفتم مطرح کنم ... متاسفانه بیان که کاری نمیکنه

اگر براتون مقدور هست یک کد بنویسید که کاربران . بتونند پاسخ سایر کاربران رو بدند

منظورم این هست که هر کس نظری ارسال کرد. سایر کاربران بتونند به اون نظر پاسخ بدند ...

و اینکه آیا تغییر قالب وبلاگ میتونه توی سئو تاثیر داشته باشه؟ من قالبم رو به نقل تغییر دادم و توی سایت gtmetrix هم بررسی کردم که متاسفانه نتیجه خوب نبود!!

البته سایت gtmetrix رو بیشتر برای وردپرس استفاده میکنند

ممنون از شما

۲۲ آبان ۱۳۹۹
سلام ... وقتتون بخیر ...
خب چنین چیزی با امکان جاواسکریپت امکان‌پذیر هست اما به صورت اصولی باید بیان انجام بده و همه نمی‌تونن و نمی‌خوان امکان جاواسکریپت رو خریداری و فعال کنن ...
+ همینطوره ... می‌تونه تاثیر بذاره ... ولی در کل بیان امکانات آنچنانی‌ای برای مانور دادن نداره و باید یه جورایی کدنویس باشین تا بتونین مشکلاتتون رو حل کنین چون سیستم بیان یه نرم‌افزار انحصاری هست و فقط برنامه‌نویس‌های شرکت می‌تونن تغییرات رو ایجاد کنن ...
+ ابزار جی تی متریکس برای تست سرعت سایت هست و سرعت سایت روی تجربه‌ی کاربر تاثیر میذاره که با وجود cache و فناوری‌های دیگه تاثیر سرعت سایت برای بهینه سازی موتورهای جستجو کمتر شده ... و برای بررسی سئوی سایتتون سعی کنید از ابزارهای آنالیز سئو مثل این سایت استفاده کنین ... 

خواهش می‌کنم ... خوشحالم که تونستم راهنماییتون کنم ... 😊🌷🌹
۲۲ آبان ۱۳۹۹

سلام سلام سلام.

خیلی خوب و درست توضیح دادینعالی.دستتان درد نکنه.خدا قوت....

۲۲ آبان ۱۳۹۹
سلام ... وقتتون بخیر ...
+ مرسی ... خواهش می‌کنم ... 😊🌷🌹 ... سلامت باشین ...
۲۲ آبان ۱۳۹۹

سلام

آقا دمت گرم😄🌹 گل کاشتی عزیز😉👌

شکرا جزیلا

۲۲ آبان ۱۳۹۹
سلام ... وقتت بخیر ...
قربانت ... مرسی ... 😊🌷🌹
۲۳ آبان ۱۳۹۹

عااالی.ممنون

۲۳ آبان ۱۳۹۹
مرسی ... خواهش می‌کنم ... 😊🌷🌹
۲۳ آبان ۱۳۹۹

سلام. تشکر بابت مطالب خوبتون

ای کاش یه سایت مطمئن هم برای اپلود فایل صوتی تو این پست معرفی میکردید 🌹🙏🏻

۳ آذر ۱۳۹۹
سلام ... وقتتون بخیر ...
مرسی ... خواهش می‌کنم ... 😊🌷🌹

+ اتفاقا سایت‌های آپلود معتبری رو بعد از ابزار با عنوان «سایت‌های آپلود فایل» لیست کردم ... می‌تونین از سایت‌ها برای آپلود فایل صوتی استفاده کنین ... 👍
۳ آذر ۱۳۹۹

مرسی خیلی ابزار مفیدیه :)

۲۳ آذر ۱۳۹۹
خواهش می‌کنم ... مرسی ... خوشحالم که به درد می‌خوره ... 😊🌹
۲۳ آذر ۱۳۹۹

سلام

من از ابزارتون استفاده کردم...

توی کامپیوتر میادش ، ولی توی موبایل نمیادش o-O

فقط یه جا خالیه...

نمیدونم چرا...

مشکل از مرورگره ؟

این پست 

 

 

۵ بهمن ۱۳۹۹
سلام، وقتتون بخیر
خوشحالم که این ابزار به دردتون خورد ...⁦😊
خب من به دستگاه‌های مختلفی امتحان کردم، مشکلی ندارن و پخش می‌کنه
احتمالا از سمت مرورگر شماست ...
۵ بهمن ۱۳۹۹

پس  مرورگره...

 

مرسی ممنون :))))

۵ بهمن ۱۳۹۹
ببخشین زری خانم ... من اشتباه بررسی کردم ...

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

کدی که شما درست کردین مشکل نداره و در حقیقت تنها مشکلی که برای شما و فاطمه خانم و دوستانی که این مشکل مشابه رو دارن ... سی اس اس قالب هاتون هست ... برای این که روی کروم این مشکل رو نداشته باشین کافیه در خط 17 سی اس اس قالبتون که به شکل زیر هست:
audio {
    max-width: 98%;
    height: inherit;
}
ویژگی ارتفاع یا height رو حذف کنین و به این شکل بشه:
audio {
    max-width: 98%;
}
۶ بهمن ۱۳۹۹

ممنون 😍😍

درست شد :)))))))))

۶ بهمن ۱۳۹۹
عالیه ... چه خوب شد که این مشکل گزارش کردین ... تا حالا بهش بر نخورده بودم ...

این باگ اکثر قالبای قدیمی بیانه ... که نسبت به نسخه‌های جدید کروم ... مشکل دارن  ... مرسی ... 😊🌹
۶ بهمن ۱۳۹۹

من کد رو داخل منبع می‌زنم. بعد توی همون قسمتی که باید متن رو بنویسیم هم هست ، دکمه‌ی انتشار رو که می‌زنم و می‌رم صفحه وبلاگ که ببینم موسیقی هست ، می‌بینم که اصلا موسیقی‌ای نیست !

مشکل از چی هست؟

۲ مهر ۱۴۰۰
من کد آماده رو روی قالبت تست کردم ... قالبت مشکلی نداره ... روی ویرایشگر بیان هم تست کردم ... فرمتش نکرد و درست نشونش داد ... و مشکل از بیان هم نیست ...
مشکل خاصی هست ... باید جزئیات بیشتری رو بررسی کنیم ...

+ راستی ببخش دیر جواب کامنت رو دادم ... وقت کمی داشتم نرسیدم ... 😊🌷🌹
۹ مهر ۱۴۰۰

خیلی کارت عالیه دمت گرم

سایتا و پلتفرم های دیگه همچین ابزار مناسب و دقیقی ندارن 

این کارت واقعا تو وبلاگم کمکم کرد عالی❤

۱۷ فروردين ۱۴۰۱
قربانت ... مرسی که یه حالی دادی بهم ... خوشحالم که به دردت خورد ... 😊😉🌹
۱۷ فروردين ۱۴۰۱

سلام عزیز

میگم میتونید یه کد قرار بدید که عکس رو تو وبلاگ نشون بشه بعد وقتی رو عکس میزنی وارد لینک مشخص شده بشه

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

اگه تونستی بذاری ممنونت میشم❤

۱۸ فروردين ۱۴۰۱
این ابزار رو قبلاً ساختم ... ابزار گالری در این پست
۱۹ فروردين ۱۴۰۱

چقد زحمت میکشین واقعا . خدا خیرتون بده . 

۲ آبان ۱۴۰۲
ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
چت درباره من تماس جعبه ابزارها آسمانی‌ساز لینک رسان موزیک‌ها 💙 برنامه وبلاگ CKEditor Quill TinyMCE Froala کانال آپارات