سلام

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

آموزش گذاشتن موزیک پلیر رو از این‌جا می‌تونین ببینین و لطفا لینک سازنده رو برندارید 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
新時化
 
Image