html یک صفحه Audio Visualizer برای پورتفولیو

سلام من برای پورتفولیوم به یک نمونه کار برنامه نویسی احتیاج دارم که میتونه مرتبط به کارم که کتاب صوتی هست باشه. چیزی که میخوام یه صفحه ی خیلی ساده و مینیمال سفید و مشکی هست که یک دقیقه از فایل کتاب صوتی توش پلی بشه و audio visualizer به شکل ویو صدا دایره ای به صدا واکنش بده وسطش هم عکس کاور کتاب بیاد به همراه اسم و مشخصات کتاب به انگلیسی پایینش. عکس و هر طراحی گرافیکی که لازمه بگید خودم میفرستم براتون. از جی پی تی هم یه سری کد گرفتم چون اول میخواستم خودم انجام بدم ولی نتونستم اگه اون کدها و توضیحات کمک میکنه میفرستم براتون. تو این عکسی که میفرستم خیلی ساده کشیدم چیزی که مد نظرم هست رو. جزئیات دقیق پروژه: با استفاده از JavaScript و کتابخانه p5.js ساخته شود. هدف: نمایش واکنش تصویری (میله‌ها یا خطوط متحرک) به صدای یک فایل صوتی. فایل صوتی انتخابی: یک دقیقه از کتاب صوتی “The Journey to the East” نوشته‌ی Hermann Hesse با صدای Reza Omrani. در بالای صفحه باید متن زیر به انگلیسی نمایش داده شود: "The Journey to the East — Audiobook Excerpt" "Author: Hermann Hesse | Narrator: Reza Omrani" "One-minute excerpt for educational portfolio use" پایین صفحه یک Visualizer نمایشی از صدا اجرا شود. هنگام کلیک روی صفحه یا دکمه‌ی “Play / Pause”، پخش و توقف صدا کنترل شود. طراحی صفحه ساده، مینیمال و تاریک (Dark Background). خروجی باید در مرورگر به‌صورت لوکال با Live Server یا localhost اجرا شود (فایل‌ها شامل index.html، sketch.js و فایل صوتی). پروژه برای پورتفولیو دانشگاهی است، پس ظاهر کار باید مرتب و حرفه‌ای باشد ولی نیازی به جلوه‌های پیچیده ندارد. خروجی مورد انتظار: پوشه‌ی پروژه شامل index.html, sketch.js, فایل صوتی, و در صورت نیاز CSS امکان اجرای پروژه در مرورگر با صدای کتاب و نمایش واکنش تصویری در نهایت یک ویدیوی کوتاه (30 تا 60 ثانیه) از اجرای پروژه برای پورتفولیو ممنون میشم هزینه انجام این پروژه رو اعلام کنید.