Apple Music Style Auido Player In jQuery

A modern, Apple Music style web audio player built using jQuery, GSAP, and CSS/CSS3.

Features:

• Glassmorphism style (frosted glass).
• Dark & Light modes.
• Playlist/Singer filter.
• Playlist carousel (based on Owl Carousel 2).

How to use it:

1. Code the HTML for the music player.

<div id="app">
  <!-- HEADER -->
  <header>
    <div class="logo">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background:new 0 0 477.867 477.867;" xml:space="preserve">
        <g>
          <g>
            <path
              d="M472.184,4.347c-3.631-3.209-8.441-4.75-13.261-4.25l-307.2,34.133c-8.647,0.957-15.19,8.265-15.189,16.964V355.34    c-15.468-9.256-33.174-14.102-51.2-14.012C38.281,341.329,0,371.946,0,409.595s38.281,68.267,85.333,68.267    s85.333-30.601,85.333-68.267V151.889l273.067-30.413v199.68c-15.473-9.238-33.179-14.066-51.2-13.961    c-47.053,0-85.333,30.618-85.333,68.267c0,37.649,38.281,68.267,85.333,68.267s85.333-30.601,85.333-68.267v-358.4    C477.866,12.208,475.8,7.584,472.184,4.347z" />
          </g>
        </g>
      </svg>
    </div><!-- .logo -->

    <div class="search">
      <div class="search__icon">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
          <g>
            <g>
              <path
                d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z" />
            </g>
          </g>
          <g>
            <g>
              <path
                d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z" />
            </g>
          </g>
        </svg>
      </div>
      <input type="text" placeholder="Search for playlist, singer..." id="search__input" class="search__input">
      <div id="search__box">
      </div>
    </div><!-- .search -->

    <div class="settings">
      <div id="settings__toggle" class="settings__toggle dark-icon">
        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512">
          <path
            d="m272.066 512h-32.133c-25.989 0-47.134-21.144-47.134-47.133v-10.871c-11.049-3.53-21.784-7.986-32.097-13.323l-7.704 7.704c-18.659 18.682-48.548 18.134-66.665-.007l-22.711-22.71c-18.149-18.129-18.671-48.008.006-66.665l7.698-7.698c-5.337-10.313-9.792-21.046-13.323-32.097h-10.87c-25.988 0-47.133-21.144-47.133-47.133v-32.134c0-25.989 21.145-47.133 47.134-47.133h10.87c3.531-11.05 7.986-21.784 13.323-32.097l-7.704-7.703c-18.666-18.646-18.151-48.528.006-66.665l22.713-22.712c18.159-18.184 48.041-18.638 66.664.006l7.697 7.697c10.313-5.336 21.048-9.792 32.097-13.323v-10.87c0-25.989 21.144-47.133 47.134-47.133h32.133c25.989 0 47.133 21.144 47.133 47.133v10.871c11.049 3.53 21.784 7.986 32.097 13.323l7.704-7.704c18.659-18.682 48.548-18.134 66.665.007l22.711 22.71c18.149 18.129 18.671 48.008-.006 66.665l-7.698 7.698c5.337 10.313 9.792 21.046 13.323 32.097h10.87c25.989 0 47.134 21.144 47.134 47.133v32.134c0 25.989-21.145 47.133-47.134 47.133h-10.87c-3.531 11.05-7.986 21.784-13.323 32.097l7.704 7.704c18.666 18.646 18.151 48.528-.006 66.665l-22.713 22.712c-18.159 18.184-48.041 18.638-66.664-.006l-7.697-7.697c-10.313 5.336-21.048 9.792-32.097 13.323v10.871c0 25.987-21.144 47.131-47.134 47.131zm-106.349-102.83c14.327 8.473 29.747 14.874 45.831 19.025 6.624 1.709 11.252 7.683 11.252 14.524v22.148c0 9.447 7.687 17.133 17.134 17.133h32.133c9.447 0 17.134-7.686 17.134-17.133v-22.148c0-6.841 4.628-12.815 11.252-14.524 16.084-4.151 31.504-10.552 45.831-19.025 5.895-3.486 13.4-2.538 18.243 2.305l15.688 15.689c6.764 6.772 17.626 6.615 24.224.007l22.727-22.726c6.582-6.574 6.802-17.438.006-24.225l-15.695-15.695c-4.842-4.842-5.79-12.348-2.305-18.242 8.473-14.326 14.873-29.746 19.024-45.831 1.71-6.624 7.684-11.251 14.524-11.251h22.147c9.447 0 17.134-7.686 17.134-17.133v-32.13 4c0-9.447-7.687-17.133-17.134-17.133h-22.147c-6.841 0-12.814-4.628-14.524-11.251-4.151-16.085-10.552-31.505-19.024-45.831-3.485-5.894-2.537-13.4 2.305-18.242l15.689-15.689c6.782-6.774 6.605-17.634.006-24.225l-22.725-22.725c-6.587-6.596-17.451-6.789-24.225-.006l-15.694 15.695c-4.842 4.843-12.35 5.791-18.243 2.305-14.327-8.473-29.747-14.874-45.831-19.025-6.624-1.709-11.252-7.683-11.252-14.524v-22.15c0-9.447-7.687-17.133-17.134-17.133h-32.133c-9.447 0-17.134 7.686-17.134 17.133v22.148c0 6.841-4.628 12.815-11.252 14.524-16.084 4.151-31.504 10.552-45.831 19.025-5.896 3.485-13.401 2.537-18.243-2.305l-15.688-15.689c-6.764-6.772-17.627-6.615-24.224-.007l-22.727 22.726c-6.582 6.574-6.802 17.437-.006 24.225l15.695 15.695c4.842 4.842 5.79 12.348 2.305 18.242-8.473 14.326-14.873 29.746-19.024 45.831-1.71 6.624-7.684 11.251-14.524 11.251h-22.148c-9.447.001-17.134 7.687-17.134 17.134v32.134c0 9.447 7.687 17.133 17.134 17.133h22.147c6.841 0 12.814 4.628 14.524 11.251 4.151 16.085 10.552 31.505 19.024 45.831 3.485 5.894 2.537 13.4-2.305 18.242l-15.689 15.689c-6.782 6.774-6.605 17.634-.006 24.225l22.725 22.725c6.587 6.596 17.451 6.789 24.225.006l15.694-15.695c3.568-3.567 10.991-6.594 18.244-2.304z" />
          <path
            d="m256 367.4c-61.427 0-111.4-49.974-111.4-111.4s49.973-111.4 111.4-111.4 111.4 49.974 111.4 111.4-49.973 111.4-111.4 111.4zm0-192.8c-44.885 0-81.4 36.516-81.4 81.4s36.516 81.4 81.4 81.4 81.4-36.516 81.4-81.4-36.515-81.4-81.4-81.4z" />
        </svg>
      </div>

      <div id="settings__box" class="settings__box">
        <div class="customSwitch">
          <span>Dark Mode</span>
          <div class="warper">
            <input id="switchMode" class="switch" type="checkbox">
            <label for="switchMode"></label>
          </div>
        </div>

        <div id="reset" class="btn">
          Reset
        </div>
      </div><!-- #settings__box -->

      <div class="overlay"></div>
    </div><!-- .settings -->
  </header>
  <!-- END HEADER -->

  <!-- MAIN -->
  <section id="main">
    <div id="slidePlaylist" class="owl-carousel">
    </div>
  </section>
  <!-- END MAIN -->

  <!-- FOOTER -->
  <footer>
    <div class="time">
      <span class="time__current"></span>
      <input type="range" value="0" max="100" id="time__progress">
      <span class="time__duration"></span>
    </div><!-- .time -->

    <div class="volume">
      <div class="volume__mute btn" id="volume__mute">
        <img src="assets/images/icon/100-volume-icon.png" class="dark-icon" />
      </div>
      <input type="range" value="100" max="100" id="volume__progress" class="volume__progress">
    </div><!-- .volume -->
  </footer>
  <!-- END FOOTER -->

  <audio src="" id="audio"></audio>
</div>

<!-- NOTIFICATIONS -->
<section id="notifications">
  <div id="notifications__box">
  </div>
</section>
<!-- END NOTIFICATIONS -->

<!-- PRELOADER -->
<section id="preloader">
  <div class="box_section">
    <div class="image_box">
      <img alt="image_preloader" src="assets/images/Apple_Music-Logo.svg" class="site_logo" />
    </div>
    <div class="img_filter"></div>
  </div>
</section>
<!-- END PRELOADER -->

2. Load the needed JavaScript and stylesheet in the document.

<!-- STYLESHEET -->
<link rel="stylesheet" href="assets/css/plugins.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<!-- SCRIPT -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script src="assets/js/app.js"></script>

3. Replace the songs in the app.js. That's it.

const playLists = [{
  title: 'Đen Vâu',
  author: 'Đen Vâu',
  date: 2020,
  thumbnail: '../assets/images/thumbnail/denvau.jpg',
  currentIndex: 0,
  isRandom: false,
  isRepeat: false,
  playedSongs: [],
  songs: [
    {
      name: 'Loving You',
      path: '../assets/songs/playlist_2/Loving You - Kimmese Den (NhacPro.net).mp3'
    },
    {
      name: 'Bài Này Chill Phết',
      path: '../assets/songs/playlist_2/Bai Nay Chill Phet - Den MIN (NhacPro.net).mp3'
    },
    {
      name: 'Trời hôm nay nhiều mây cực!',
      path: '../assets/songs/playlist_2/Troi hom nay nhieu may cuc - Den (NhacPro.net).mp3'
    },
    {
      name: 'Hai Triệu Năm',
      path: '../assets/songs/playlist_2/Hai Trieu Nam - Den Bien (NhacPro.net).mp3'
    },
    {
      name: 'Anh Đếch Cần Gì Nhiều Ngoài Em',
      path: '../assets/songs/playlist_2/Anh Dech Can Gi Nhieu Ngoai Em - Den Vu Thanh Dong (NhacPro.net).mp3'
    },
    {
      name: 'Đưa Nhau Đi Trốn',
      path: '../assets/songs/playlist_2/Dua Nhau Di Tron - Den Linh Cao (NhacPro.net).mp3'
    },
    {
      name: 'Mười Năm (Lộn Xộn 3)',
      path: '../assets/songs/playlist_2/Muoi Nam Lon Xon 3 - Den Ngoc Linh (NhacPro.net).mp3'
    },
    {
      name: 'Đố Em Biết Anh Đang Nghĩ Gì',
      path: '../assets/songs/playlist_2/Do Em Biet Anh Dang Nghi Gi - JustaTee Den Bien (NhacPro.net).mp3'
    },
    {
      name: 'Ta Cứ Đi Cùng Nhau',
      path: '../assets/songs/playlist_2/Ta Cu Di Cung Nhau - Den Linh Cao (NhacPro.net).mp3'
    },
    {
      name: 'Đi Theo Bóng Mặt Trời',
      path: '../assets/songs/playlist_2/Di Theo Bong Mat Troi - Den Giang Nguyen (NhacPro.net).mp3'
    },
    {
      name: 'Cho Tôi Lang Thang',
      path: '../assets/songs/playlist_2/Cho Toi Lang Thang - Ngot Den (NhacPro.net).mp3'
    }
  ],
},
{
  title: '3',
  author: 'Ngọt',
  date: 2019,
  thumbnail: '../assets/images/thumbnail/ngot.jpg',
  currentIndex: 0,
  isRandom: false,
  isRepeat: false,
  playedSongs: [],
  songs: [{
    name: 'MÀU (đen trắng)',
    path: '../assets/songs/playlist_1/MAU den trang - Ngot (NhacPro.net).mp3'
  },
  {
    name: 'EM CÓ CHẮC Không (?) (bài ca rebound)',
    path: '../assets/songs/playlist_1/EM CO CHAC Khong bai ca reboun... - Ngot (NhacPro.net).mp3'
  },
  {
    name: 'GIẢ VỜ',
    path: '../assets/songs/playlist_1/GIA VO - Ngot (NhacPro.net).mp3'
  },
  {
    name: '(sau đây là) DỰ BÁO THỜI TIẾT (cho các vùng vào ngày mai)',
    path: '../assets/songs/playlist_1/sau day la DU BAO THOI TIET ch... - Ngot (NhacPro.net).mp3'
  },
  {
    name: 'Chuyển KÊNH (sản phẩm này không phải là thuốc)',
    path: '../assets/songs/playlist_1/Chuyen KENH san pham nay khong... - Ngot (NhacPro.net).mp3'
  },
  {
    name: 'HẾT THỜI',
    path: '../assets/songs/playlist_1/HET THOI - Ngot (NhacPro.net).mp3'
  },
  {
    name: 'VÉ ĐI Thiên Đường (một chiều)',
    path: '../assets/songs/playlist_1/VE DI Thien Duong mot chieu - Ngot (NhacPro.net).mp3'
  },
  {
    name: '(tôi) ĐI TRÚ ĐÔNG',
    path: '../assets/songs/playlist_1/toi DI TRU DONG - Ngot (NhacPro.net).mp3'
  },
  {
    name: 'LẦN CUỐI (đi bên em xót xa người ơi)',
    path: '../assets/songs/playlist_1/LAN CUOI di ben em xot xa nguo... - Ngot (NhacPro.net).mp3'
  }
  ],
}];

let notifications = [
  {
    time: 'now',
    author: 'Phuong Nguyen',
    content: 'Hello I\'m PhuongNguyen',
  },
  {
    time: 'now',
    author: 'Phuong Nguyen',
    content: 'Have a good day !',
  },
];

---

This awesome jQuery plugin is developed by png261. For more Advanced Usages, please check the demo page or visit the official website.