v1.6.0 — peaks سمت سرور با ffmpeg (اختیاری)

ادامه کار کارایی نسخه ۱.۵.۰. اگر سرور ffmpeg نداشته باشد، هیچ چیز تغییر نمی‌کند و افزونه دقیقاً مثل نسخه قبل کار می‌کند.

چه چیزی اضافه شد

تنها راه جلوگیری از دانلود کامل فایل توسط WaveSurfer، دادن peaks از پیش محاسبه‌شده به آن است. حالا این مقادیر یک بار با ffmpeg تولید و در post meta کش می‌شوند. با وجود peaks، موج فوراً رسم می‌شود و فایل صوتی فقط هنگام زدن play استریم می‌شود.

هر سه حالتِ «ffmpeg نیست»، «فایل یک attachment محلی نیست» و «تولید هنوز در صف است» به روش عادی (decode در مرورگر) برمی‌گردند.

تشخیص ffmpeg

if (! function_exists('shell_exec')) return false;
$disabled = array_map('trim', explode(',', (string) ini_get('disable_functions')));
return ! in_array('shell_exec', $disabled, true);

ابتدا disable_functions بررسی می‌شود — اکثر هاست‌های اشتراکی shell_exec را می‌بندند و صدا زدنش warning تولید می‌کند. سپس ffmpeg -version اجرا و خروجی تطبیق داده می‌شود.

نتیجه یک روز در transient کش می‌شود، چون اجرای این بررسی در هر رندر از چیزی که صرفه‌جویی می‌کند گران‌تر است. یک روز به این معنی است که نصب بعدی ffmpeg بدون پاک کردن دستی چیزی تشخیص داده می‌شود.

با فیلتر elin_audio_ffmpeg_path می‌توان مسیر دقیق باینری را داد و بررسی را کاملاً دور زد.

نکات پیاده‌سازی

• تولید در کرون، نه در رندر — با wp_schedule_single_event، تا اولین بازدیدکننده هزینه decode کل اپیزود را پرداخت نکند. رندر اول fallback می‌کند و بارهای بعد peaks آماده است. شکست با مارکر failed ثبت می‌شود تا هر رندر دوباره تلاش نشود.
• حفظ علامت — مانند exportPeaks() خود WaveSurfer، در هر باکت بلندترین سمپل همراه با علامتش نگه داشته می‌شود؛ در غیر این صورت موج در نیمه بالایی تا می‌خورد.
• مدت زمان از تعداد سمپل (samples / rate) به‌جای فراخوانی دوم ffprobe.
• یک باگ که تست گرفت: filesize() کش می‌شود و چون wp_tempnam() فایل را خالی می‌سازد و بعد ffmpeg رویش می‌نویسد، بدون clearstatcache() تولید peaks همیشه شکست می‌خورد.

اندازه‌گیری

هر دو مسیر در یک صفحه، هم‌زمان، روی فایل ۲.۸ مگابایتی:

پلیر	peaks	موج رسم شد؟	دانلود
با peaks	دارد	✓	۰ کیلوبایت
بدون peaks	ندارد	✓	۲۸۱۳ کیلوبایت

حجم داده: ۱۰۰۰ مقدار، حدود ۷.۲ کیلوبایت JSON که داخل HTML چاپ می‌شود (با gzip حدود ۲ تا ۳ کیلوبایت). درخواست شبکه اضافه‌ای ندارد.

تست

php tests/peaks-test.php

ده بررسی روی منطق باکت‌بندی: حفظ علامت، لبه تبدیل -32768، بایت فرد اضافه در انتها، و رد کردن ورودی کوتاه.

محدودیت‌ها

• خود اجرای ffmpeg روی ماشین توسعه تست نشده (نصب نبود). منطق استخراج با PCM واقعی تست شده است، اما مسیر shell را روی سرور خودتان بررسی کنید.
• اگر DISABLE_WP_CRON فعال و کرون واقعی تنظیم نشده باشد، تولید هرگز اجرا نمی‌شود و افزونه برای همیشه به روش عادی کار می‌کند — بدون خطا.

نصب

فایل elin-audio-player-1.6.0.zip را دانلود کنید و از پیشخوان وردپرس، افزونه‌ها ← افزودن ← بارگذاری افزونه نصبش کنید.

نیازمندی‌ها: WordPress 5.9، PHP 7.4، Elementor 3.5.0 — ffmpeg اختیاری است.

تغییرات کامل: v1.5.0...v1.6.0

v1.5.0 — بارگذاری تنبل فایل صوتی

ریلیز کارایی. رفتار و ظاهر پلیر تغییری نکرده.

مشکل

WaveSurfer برای کشیدن موج صوتی به peak های کل فایل نیاز دارد، و در loadAudio() فقط زمانی fetchBlob را رد می‌کند که peaks از قبل به آن داده شده باشد. چون peak از پیش محاسبه‌شده‌ای وجود نداشت، کل فایل صوتی در لحظه لود صفحه دانلود و decode می‌شد — برای هر پلیر روی صفحه، چه کاربر play بزند چه نزند.

راه‌حل

• ساخت WaveSurfer به IntersectionObserver منتقل شد و ۲۰۰px قبل از رسیدن پلیر به ویوپورت اجرا می‌شود. در مرورگرهای بدون این API، مثل قبل بلافاصله ساخته می‌شود.
• مدت زمان در هدر فایل صوتی است، پس با یک <audio preload="metadata"> خوانده می‌شود و «زمان مورد نیاز : ۴۵ دقیقه» فوراً پر می‌شود، بدون انتظار برای دانلود کامل.
• عنصر .current-time که در هر tick رویداد timeupdate از نو کوئری می‌شد، کش شد.

اندازه‌گیری

دو پلیر روی یک فایل ۲.۸ مگابایتی:

	دانلود در لود صفحه
نسخه ۱.۴.۰	۲۸۱۳ + ۲۸۱۳ کیلوبایت = ۵.۶ مگابایت
نسخه ۱.۵.۰	۰ بایت — فقط دو probe ۳۰۰ بایتی

مدت زمان (03:00 و «۳ دقیقه») در هر دو نسخه بلافاصله نمایش داده می‌شود.

آنچه انجام نشد

peak های از پیش محاسبه‌شده سمت سرور، که راه‌حل نهایی است و دانلود را تا لحظه play به صفر می‌رساند. این کار به ffmpeg روی سرور و کش کردن نتیجه در post meta نیاز دارد. اگر فایل‌ها چند ده مگابایتی هستند و کاربران اسکرول می‌کنند ولی play نمی‌زنند، ارزش افزودنش را دارد.

نصب

فایل elin-audio-player-1.5.0.zip را دانلود کنید و از پیشخوان وردپرس، افزونه‌ها ← افزودن ← بارگذاری افزونه نصبش کنید.

نیازمندی‌ها: WordPress 5.9، PHP 7.4، Elementor 3.5.0

تغییرات کامل: v1.4.0...v1.5.0

v1.4.0 — آیکون SVG و کنترل‌های فاصله و گردی گوشه

چه چیزی اضافه شد

آیکون SVG — کنترل آیکون از انتخاب تصویر به کنترل ICONS المنتور تغییر کرد. حالا می‌توانید از کتابخانه آیکون انتخاب کنید یا SVG دلخواه خودتان را بارگذاری کنید. اگر چیزی انتخاب نشود، آیکون هدفون پیش‌فرض نمایش داده می‌شود.

کنترل‌های تازه در تب Style ← آیکون:

کنترل	نوع	پیش‌فرض
پس‌زمینه آیکون	Color	#61B09B
رنگ آیکون	Color	#FFFFFF
اندازه آیکون	Slider (px/em/rem)، ریسپانسیو	28px
فاصله داخلی آیکون	Dimensions، ریسپانسیو	14px
گردی گوشه آیکون	Dimensions (px/%)، ریسپانسیو	12px

گردی گوشه از Slider به Dimensions تغییر کرد تا هر گوشه جداگانه قابل تنظیم باشد.

تغییر در نحوه اندازه‌گیری آیکون

کاشی آیکون دیگر مربع با اندازه ثابت نیست؛ از glyph + padding ساخته می‌شود تا کنترل اندازه و کنترل فاصله داخلی روی یک جعبه با هم تداخل نداشته باشند. با مقادیر پیش‌فرض نتیجه 28 + 14×2 = 56px است، یعنی دقیقاً همان اندازه نسخه قبل و ظاهر موجود تغییری نمی‌کند.

اندازه از طریق font-size کاشی اعمال می‌شود تا SVG اینلاین، آیکون‌فونت و <img> هر سه از یک کنترل پیروی کنند. برای آیکون‌فونت یک جعبه مربع 1em × 1em در نظر گرفته شده، چون عرض glyph یک فونت با ارتفاعش برابر نیست و کاشی نامربع می‌شد.

نکته هنگام به‌روزرسانی

اگر در نسخه ۱.۲ یا ۱.۳ برای ویجتی «تصویر آیکون» تنظیم کرده بودید، آن مقدار دیگر خوانده نمی‌شود و آیکون پیش‌فرض برمی‌گردد؛ از کنترل جدید دوباره انتخابش کنید. تنظیمات رنگ و گردی گوشه دست‌نخورده می‌مانند.

نصب

فایل elin-audio-player-1.4.0.zip را دانلود کنید و از پیشخوان وردپرس، افزونه‌ها ← افزودن ← بارگذاری افزونه نصبش کنید.

نیازمندی‌ها: WordPress 5.9، PHP 7.4، Elementor 3.5.0

تغییرات کامل: v1.3.0...v1.4.0

v1.3.0 — اولین ریلیز

ویجت اختصاصی المنتور برای پخش پادکست، با موج صوتی WaveSurfer، پرش ۱۵ ثانیه‌ای و اسلایدر سرعت پخش. طراحی RTL و ریسپانسیو.

نصب

فایل elin-audio-player-1.3.0.zip را دانلود کنید و از پیشخوان وردپرس، افزونه‌ها ← افزودن ← بارگذاری افزونه نصبش کنید. سپس ویجت Elin Audio Player را از دسته General در المنتور به صفحه بکشید.

نیازمندی‌ها: WordPress 5.9، PHP 7.4، Elementor 3.5.0

ویژگی‌ها

• موج صوتی با WaveSurfer.js 7 (کلیک روی موج = پرش به همان نقطه)
• پخش/توقف، جلو و عقب با مقدار قابل تنظیم
• اسلایدر سرعت پخش 0.5x تا 1.5x با UI جداگانه برای موبایل
• نمایش زمان جاری، مدت کل، و مدت زمان بر حسب دقیقه در هدر (با ارقام فارسی)
• آیکون قابل تنظیم (تصویر دلخواه یا آیکون پیش‌فرض هدفون)
• تگ عنوان قابل انتخاب بین H1–H6، div، span و p
• تب Style کامل: رنگ‌ها، تایپوگرافی، padding و گردی گوشه‌ها
• پشتیبانی از چند پلیر در یک صفحه و سازگاری با پیش‌نمایش زنده المنتور
• قابل ترجمه با text domain برابر elin-audio-player

اصلاحات نسبت به نسخه اولیه ۱.۰

• تگ </h2> بدون جفت در مارک‌آپ عنوان، و سلکتورهای CSS که به کلاس‌های موجود اشاره نمی‌کردند
• بازنویسی شدن متن «زمان مورد نیاز» به دلیل تکراری بودن کلاس total-time
• خطای PHP وقتی فایل صوتی انتخاب نشده بود
• آپشن responsive مربوط به WaveSurfer 6 که بی‌اثر بود؛ حالا با setOptions() روی resize
• پرش به زمان منفی هنگام عقب رفتن
• نامرئی شدن پله‌های سرعت پخش به دلیل تداخل specificity در CSS
• لود نشدن اسکریپت داخل پیش‌نمایش المنتور
• سرریز افقی کارت از عرض ویوپورت در موبایل
• نبود گارد فعال بودن المنتور، i18n و کنترل‌های استایل

---

Custom Elementor podcast audio player widget — WaveSurfer waveform, skip controls, playback-speed slider, RTL-first and responsive.