Getting Started
Template: Listen - Online Music Streaming App
Created Date: 16 May 2019
Last Update: 24 April 2024
Version: 5.0.0
Author: Kri8thm
Email: kri8thm@gmail.com

First and foremost, I want to express my gratitude for choosing to purchase this template and for your continued loyalty as my customer. You're truly appreciated!
You are entitled to receive complimentary lifetime updates for this product, along with exceptional support directly from the author.

Introduction

Basic tips and quick guide that will help you to edit this template.

To effectively use this template, a basic understanding of HTML, CSS and Javascript is necessary. Please conduct a quick Google search or visit W3Schools for any related queries, as addressing topic-specific issues is given top priority.

Template Features
  • Built with latest Bootstrap
  • SASS
  • CSS3 Animation
  • AJAX page loading
  • W3C validated HTML5 & CSS3 coding
  • 10 color skins options for Header, Sidebar & Player
  • Light and Dark version
  • RTL support
  • Analytical dashboard
  • Error page
  • Working audio player
  • Browser media API support
  • Fully responsive
  • Modern design
  • Clean coded
  • Google fonts
  • Cross-browser compatible
  • SEO optimized
  • Mobile first CSS
  • Easy to customize
  • Well documented
  • And more...
Requirements

To customize this template, you will require the following software:

  1. You will need code editing software such as VS Code, Sublime Text, or Notepad.
  2. You will also need a web browser for testing purposes, such as Google Chrome or Mozilla Firefox.
  3. You will also need an FTP tool to upload files to the server, such as FileZilla.
Download Template

Upon purchasing this template, you can access and download it through your account.

Step 1: Simply log in and click on the Download link to obtain the template.

Step 2: Upon reaching the download page, you will find a list of the items you have purchased.
Click on Download button > Click on All files & documentation

What's Included

Once you download the template, you will receive All files and documentation in a ZIP file. In the root folder of the ZIP file, you can view the contents to see what you will receive.

Installation

The template is constructed using an advanced development toolset including Gulp, Node.js, and SCSS, which automates arduous or time-consuming tasks within your development process.

Install Node.js

Ensure that Node.js is installed on your system. You can download and install it from the official Node.js website.
Recommend Node 18 latest version.

Install Gulp CLI

Once Node.js is installed, you'll need to set up Gulp on your system. Open Terminal/CMD in you system and execute the following command in your Terminal/CMD:

Copy 
npm install gulp-cli -g
Install dependencies

Navigate to the tools/ folder in your Terminal/CMD and execute the command: npm install. This will install the necessary dependencies for this template, including build tools such as SASS Compiler and Autoprefixer.

Copy 
npm install
Start development server

After installing dependencies, start the development server by running gulp serve command. This will launch the application locally, typically on port 3000 by default.

Copy 
gulp serve

OR use npm command.

Copy 
npm run serve

Once the development server is running, you can start customizing the template according to your needs. Modify HTML pages, stylesheets (using SCSS), and integrate any additional functionality as required.

Template Structure

Please review the common structure of this template.

File Structure

Below is the folder structure for this project. You can explore the project using these folders:

theme/
├── src/
|   ├── audio/
|   ├── images/
|   ├── js/
|   ├── scss/
|   ├── vendors/
|   |   ├── bootstrap/
|   |   └── remixicon/
|   ├── 404.html
|   ├── about.html
|   ├── add-event.html
|   ├── add-music.html
|   ├── album-details.html
|   └── ...
└── tools/
    ├── gulp/
    ├── gulpfile.js
    └── package.json

There are two main folders: src/, which contains all the source files, and gulp/, which houses the necessary Gulp files for building this template. Please refrain from modifying anything within the gulp/ folder.

Exercise caution when modifying the template. Incorrect editing could result in a complete breakdown of the design layout. Please note that no assistance will be available for flawed customizations.
HTML

Below is a common HTML code that serves as the basic skeleton for most HTML pages in this project:

Copy 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <!-- Meta Tag -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Seo Meta -->
        <meta name="description" content="Listen App - Online Music Streaming App Template">
        <meta name="keywords" content="music template, music app, music web app, responsive music app, music, themeforest, html music app template, css3, html5">
    
        <title>Listen App - Online Music Streaming App</title>
    
        <!-- Favicon -->
        <link href="images/logos/favicon.png" rel="icon">
    
        <!-- IOS Touch Icons -->
        <link rel="apple-touch-icon" href="images/logos/touch-icon-iphone.png">
        <link rel="apple-touch-icon" sizes="152x152" href="images/logos/touch-icon-ipad.png">
        <link rel="apple-touch-icon" sizes="180x180" href="images/logos/touch-icon-iphone-retina.png">
        <link rel="apple-touch-icon" sizes="167x167" href="images/logos/touch-icon-ipad-retina.png">
    
        <!-- Styles -->
        <link rel="stylesheet" href="css/plugins.bundle.css" type="text/css">
        <link rel="stylesheet" href="css/styles.bundle.css" type="text/css">
    
        <!-- Google fonts -->
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
        ...
    </head>
    <body>
    
        <!-- Line loader [[ Find at scss/framework/loader.scss ]] -->
        <div id="line_loader"></div>
    
        <!-- Start:: loader [[ Find at scss/framework/loader.scss ]] -->
        <div id="loader">
            <div class="loader">
                <div class="loader__eq mx-auto">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <span class="loader__text mt-2"></span>
            </div>
        </div>
        <!-- End:: loader -->
    
        <!-- Start:: wrapper [[ Find at scss/framework/wrapper.scss ]] -->
        <div id="wrapper">
        
            <!-- Start:: sidebar [[ Find at scss/framework/sidebar.scss ]] -->
            <aside id="sidebar">...</aside>
            <!-- End:: sidebar -->
        
            <!-- Start:: header [[ Find at scss/framework/header.scss ]] -->
            <header id="header">...</header>
            <!-- End:: header -->
            
            <!-- Start:: page content [[ Find at scss/framework/wrapper.scss ]] -->
            <main id="page_content">
    
                <!-- Hero [[ Find at scss/framework/hero.scss ]] -->
                <div class="hero" style="background-image: url(...);"></div>
    
                <!-- Start:: under hero [[ Find at scss/framework/hero.scss ]] -->
                <div class="under-hero container">
    
                    <!-- Start:: section [[ Find at scss/framework/section.scss ]] -->
                    <div class="section">...</div>
                    <!-- End:: section -->
    
                    <!-- Placed all section -->
                    ...
    
                </div>
                <!-- End:: under hero -->
    
                <!-- Start:: footer [[ Find at scss/framework/footer.scss ]] -->
                <footer id="footer">...</footer>
                <!-- End:: footer -->
    
            </main>
            <!-- End:: page content -->
    
        </div>
        <!-- End:: wrapper -->
    
        <!-- Start:: player [[ Find at scss/framework/player.scss ]] -->
        <div id="player">...</div>
        <!-- End:: player -->
    
        <!-- Backdrop [[ Find at scss/framework/wrapper.scss ]] -->
        <div id="backdrop"></div>
    
        <!-- Script -->
        <script src="js/plugins.bundle.js"></script>
        <script src="js/scripts.bundle.js"></script>
    
    </body>
    </html>
SCSS

The template is constructed using the SCSS compiler, allowing for easy modification within your editor. The files are located as indicated in the provided screenshot.

Bootstrap variables can be overridden in the _variables.scss file, enabling you to add or remove variables as needed.

Gulp.js

The most influential file in this template is config.json, located in the tools/gulp/ directory. The gulpfile.js utilizes this configuration file to generate bundles for styles and JavaScript, as well as to transfer assets to the dist/ directory. For specific asset paths and other configuration details, please refer to config.json.

Here's a detailed description of the keys of the config.json file:

Config options
Key name Type Description
config.debug boolean Toggle the debug console log on or off.
config.root string Manages the paths for project resources.
config.output string Manages the output directory path.
config.node_modules string Manages the path for Node modules.
config.compile.compressJs boolean Toggle JavaScript minification for output.
config.compile.compressCss boolean Toggle CSS minification for output.
config.compile.compressHtml boolean Toggle HTML compression for output.
config.compile.jsSourcemaps boolean Toggle JavaScript output with source maps.
config.compile.cssSourcemaps boolean Toggle CSS output with source maps.
config.assets object Define the file paths for assets to be used with Gulp watch.
Build options
build.resources.base object This object specifies the core resources to be included in the base CSS and JS demo bundles.
build.resources.files object This object specifies the resources to be included in the files copied to the dist directory.
build.plugins.global object This object specifies the required third-party resources to be included in the global CSS and JavaScript plugin bundles.
build.plugins.custom object This object specifies global third-party resources to be included in the custom CSS and JavaScript plugin bundles.
Template Settings

The template offers you the ability to modify both the template skins and text direction through the settings plugin.

If you choose not to use this feature, you can simply remove pre-install settings plugin flow below steps:

  1. Open base.js from src/js/base.js
  2. Find initSettings and remove this function
Dark Mode

By adding data-theme="dark" to the body tag, the entire template can switch to Dark mode with just one line of code modification.

Copy 
<body data-theme="dark">
    <!-- Content here -->
</body>

You can achieve this through the command line. Open Terminal/CMD in the template folder.

Copy 
gulp build --dark

OR use npm command.

Copy 
npm run build:dark
RTL(right-to-left)

By adding dir="rtl" to the html tag, the entire template can switch the text direction from LTR (left-to-right) to RTL (right-to-left).

Copy 
<html dir="rtl">
    <!-- Content here -->
</html>

You can achieve this through the command line. Open Terminal/CMD in the template folder.

Copy 
gulp build --rtl

OR use npm command.

Copy 
npm run build:rtl
Components Skins

The template offers a range of customizable skins for the Header, Sidebar, and Player, including 10 color options: blue, indigo, purple, red, orange, yellow, green, pink, violet and magenta for the primary elements of the template. These pre-defined attributes enable easy customization to match your preferred color scheme.

Copy 
<header id="header" data-header="*color">
    <!-- Content here -->
</header>

<aside id="sidebar" data-sidebar="*color">
    <!-- Content here -->
</aside>

<div id="player" data-player="*color">
    <!-- Content here -->
</div>
Javascript

You can also modify the template text direction, dark mode and component skins through Javascript code.

Copy 
$('body').settings({
    dark: true // Flag for dark mode.
    rtl: false // Flag for text direction.
    header: 'blue' // 10 color options
    sidebar: 'blue' // 10 color options
    player: 'blue' // 10 color options

    // Flag for light|dark mode based on system setting
    // (If you opt for the default dark mode, this feature will be disregarded.).
    system: true 
});
Deployment

This HTML template is static, allowing you to make edits using any code editor like VS Code. Once you've made your changes, you'll need to build the template to generate a dist folder for uploading.

To make deployable template, just open Terminal/CMD in the template folder and run this command: gulp build --prod. This will generate dist/ folder in your template directory. You can directly upload this folder to your server.

Copy 
gulp build --prod

OR use npm command.

Copy 
npm run build:prod

Open your FTP client, such as FileZilla, or directly access it through cPanel. Upload the contents of the template to your server's root directory. Once the files have finished uploading, navigate to www.yourdomain.com and enjoy :)

  1. Open FTP Client
  2. Connect server and upload template here
Extras
Change Logs

Here we are mention project change and new release of the version.

5.0.0

RTL direction

4.0.0
  1. Upgrade dependencies
  2. Changed old colors & added 2 more color options
  3. Update js code & icons
  4. Improve accessibility & UI
  5. Added animations
3.1.1
  1. Browser media session API support
  2. Fixed browser back button issue
  3. Added dark mode command
3.0.0

Redesign template

2.0.1

Fixed audio player issue

2.0.0
  1. Added new pages like plan, setting and profile
  2. Added new landing page
  3. Fixed some css issues
1.1.0

Removed page loading from app

V 1.0.0

Initial Release

Refund Policy

To request a refund, kindly review the article provided.

The article outlines cases in which refund requests will not be accepted.

Supports

If you have any queries, please do not hesitate to contact me. Click here to email me.

WhatsApp: Link here
Telegram: Link here
Made with Love.
Don't forget to rate!