سلام!

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

فیلم آموزشی رو تو همین پست گذاشتم احیانا اگر سوالی داشتید ازم بپرسید.

کدهایی که توی ویدیو استفاده شده (لینک آهنگتون رو جای Your music بذارید و لینک عکسی که می خواهید رو جای your picture):

<section class="music-player" style="background: white; border-radius: 15px; box-shadow: 0 15px 40px -30px #000; width: 330px; overflow: hidden; margin: 10px auto;
  direction: ltr;">
  <header class="music-player--banner" style=" background: url(#your picture);
  background-size: cover; background-position: center; height: 200px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); position: relative; z-index: 1;">
    <div class="credit" style="z-index: 999;margin-left: 10px;">
      <a href="http://magic-spirit.blog.ir/" target="_blank" style="text-decoration: none; color:#808080; font-family: Reenie Beanie; font-size: 15px;">
      MagicSpirit
      </a></div>
  </header>
  <main class="music-player--main">
    <div class="music-player--controls" style="padding:0px 10px 20px 10px;!important">
      <audio controls style="width:50px; display:inline-block;height: 30px; margin-top: 18px;">
        <source src="#Your music" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>
      <div class="song-info" style="display:inline-block; background: rgb(242, 242, 242, 0.7); padding: 4px; width: 78%">
        <div class="song-info--title" style="font-size: 18px; color:#8E8E8E; font-family:Reenie Beanie;">A Silent Voice</div>
        <div class="song-info--artist" style="font-size: 11px; color:#b3b3b3; font-family:sans-serif;">Koe no Katachi</div>
      </div>
    </div>
  </main>
</section>

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

پ.ن: اگه خواستید قالبتون رو عوض کنید این کد دومیه رو باید دوباره تو قالب بذارید. با یک بار گذاشتن این کد توی قالبتون هر چند تا پلیر که تو پست هاتون بذارید مشکلی نخواهد داشت.

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

<link href="https://fonts.googleapis.com/css?family=Reenie+Beanie" rel="stylesheet" type="text/css">

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

MagicSpirit
A Silent Voice
Koe no Katachi