موزیک پلیر 4

سلام

موزیک پلیر جدید لطفا تا می تونید ازش استفاده کنید >_< ایده داشته باشم تند تند موزیک پلیرهای جدید می ذارم براتون ،_،

آموزش گذاشتن موزیک پلیر رو از این‌جا می‌تونین ببینین و لطفا لینک سازنده رو برندارید 3>

<div class="flex-container" style="display: flex; flex-direction: column; max-height: 400px; overflow: hidden;max-width: 430px; margin: 0 auto;">
  <div class="top-container" style="display: flex;">
    <div class="right-box" style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #text_box_color;">
      <div class="text" style="text-align: left;">
        <div style="line-height: 10px; font-family: 'Open Sans', sans-serif;font-size: 14px;font-weight: bold; text-transform: uppercase; color: black; cursor: default;">The Noisy Freaks</div>
        <div style="line-height: 20px; color: #636367; font-family: 'Open Sans', sans-serif; font-size: 10px; font-weight: bold; cursor: default;">Premiere</div>
        <div style="font-family: 'Open Sans', sans-serif; font-size: 11px; color: black; cursor: default;line-height: 30px;">I Need You Back</div>
        <div style="color: #636367; font-family: 'Open Sans', sans-serif; font-size: 12px; cursor: default;"><a style="text-decoration: none; font-size: 8px; background-color: white; color: black; padding: 0.3vw;" href="https://magic-spirit.blog.ir/">Magic Spirit</a></div>
      </div>
    </div>
    <div class="left-box" style="flex: 1; display: flex; align-items: center; justify-content: center; position: relative;">
      <!-- Creative border inside the image -->
      <div style="position: absolute; width: calc(100% - 30px); height: calc(100% - 30px); border: 1px solid #border_color; box-sizing: border-box; border-radius: 5px;"></div>
      <img src="#your_image_link" alt="Image" style="max-width: 100%; max-height: 300px; object-fit: cover; object-position: center; border-radius: 5px;">
    </div>
  </div>
  <div class="audio-box" style="background-color: #below_box_color; padding: 9px; text-align: center; margin: 0 auto; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;">
    <audio controls style="height: 20px; opacity: 0.9;">
      <source src="#your_song_link" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </div>
</div>

text_box_color همون رنگ باکسی هست که اسم آهنگ رو توش می نویسید.

border_color رنگ حاشیه دور عکس هست.

below_box_color رنگ باکس پایینی پشت موزیک پلیر هست.

The Noisy Freaks

Premiere

新時化

Magic Spirit

 

موزیک پلیر 3

سلام

بعد از مدت ها اومدم که پست بذارم D: اگه وقت کنم کدهای قالب های جدید رو تکمیل کنم به زودی برای فروش گذاشته می شن اگه سوالی داشتید حتما بپرسید توی قالب جدید یه قسمت  New messege to everyone هست که بخونیدش بد نیس :)

از موزیک پلیر جدید لذت ببرید و اینکه لینک سازنده رو لطفا برندارید D: ممنون که مثل همیشه به Magic Spirit سر می زنید و حمایتش می کنید.

آموزش گذاشتن موزیک پلیر رو از این‌جا می‌تونین ببینین.

	  <div class="music-player" style="display: flex; max-width: 300px; margin: 0 auto; max-height: 450px;">
	    <div class="first-flex" style="background-color: #f1f1f1; padding: 10px;">
	      <img class="aud-img" src="#YourImage" style="max-width: 270px; z-index: 1; height: auto; display: block; margin: 0 auto;">
	      <div id="musicplayer" style="-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease; transition: all 0.7s ease; text-align: center;">
	        <div class="audioplayer" style="border-radius: 5000px; opacity: 1; transition: 0.6s; 
					direction: ltr;">
	          <audio controls style="display:inline-block; height: 30px; margin-top: 11px; color: white;">
	            <source src="#YourSong" type="audio/mpeg">
	            Your browser does not support the audio element.
	          </audio>
	          <!--play-->
	        </div>
	      </div>
	      <div class="second-flex" style="background-color: #b3b3b3;padding: 10px; display: flex; flex-direction: column; text-align: center; max-height: 150px">
	        <div class="song-name" style="font-size: 18px; margin-bottom: 3px; border-top: 1px solid #666666; color:#000;">
	          Song Name
	        </div>
	        <div class="song-singer" style="font-size: 11px; border-bottom: 1px solid #666666; color: #000;">
	          Artist
	        </div>
	        <a href="https://magic-spirit.blog.ir/" style="text-decoration: none; color: #000; letter-spacing: 2px; font-size: 9px; margin-top: 2px;">Magic Spirit</a>
	      </div>
	    </div>
	  </div>

Genshin Impact

Genshin Artist

Magic Spirit

بعضی ها یا دکمه PLAY موزیک پلیر 2 مشکل داشتن برای همین کد رو تغییر دادم می تونید از کد جدید بدون مشکل استفاده کنید.

موزیک پلیر 2

سلام!

داشتم قالب درست می‌کردم یهو نمی‌دونم چیشد وسطش به این رسیدم. D: امیدوارم دوستش داشته باشین و لذتش رو ببرین. همچنین منتظر قالب‌های جدید باشین. 3>

آموزش گذاشتن این موزیک پلیر دقیقا مثل همون قبلیه‌ست که از این‌جا می‌تونین ببینین.

کد موزیک پلیر:

<div class="container" style="display: flex; max-width: 330px;background-color: #fafafa; direction: ltr; margin: 0 auto; flex: 1 1 0;">
  <div class="img" style="background-image: url(#YOUR IMAGE);background-size: cover; background-position: center; width: 100%; outline: 4px solid white; outline-offset: -13px; ">
  </div>
  <div class="audio-info" style="width: 100%;">
    <div class="audinfo" style="position: relative;top: 50%;transform: translateY(-50%);font-family: opsans;font-size: 9px;text-transform: uppercase; letter-spacing: 1px; direction: ltr;  padding: 1em;">
      <div class="aud-track" style="font-family: bebas; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px;">TrackName</div>
      Album<br>
      By Artist<br><br>
      <a href="http://magic-spirit.blog.ir/" target="_blank" style="font-family: bebas; font-size: 8px; text-decoration: none; color: gray; letter-spacing: 2px; margin-bottom: 5px;">Magic Spirit</a>
      <div class="audp">
        <audio controls style="display:inline-block;height: 30px; margin-top: 11px;width:100px; opacity: 0.8; margin-left: 15px;">
          <source src="#YOUT MUSIC" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  </div>
</div>

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

 

TrackName

Album
By Artist

Magic Spirit

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

سلام!

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

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

کدهایی که توی ویدیو استفاده شده (لینک آهنگتون رو جای 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