Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
04 Sep
2021

Music Player

by Shubham Batra

1582

Download Attachments

So, starting from the beginning we often use html audio , video tags for managing and playing music in our website. Which is bit complicated to use when it comes to user interface and easiness to use. Specially while working with songlist, it becomes hard for that to be managed in simple audio video html tags. So we need a better music player library to help us creating some better user interface for music player. So we will be using JPlayer for that purpose.


jPlayer- Html5 Music Player

So, jPlayer is a html5 audio and video music player library using jquery. So we can use that accorss multiples languages without much issue. So for implementing jplayer first of all you need to place these folder in your project. We will provide these files in attachment which you can download later.

So, just have a look at the opened folder on right side, these are the needed jplayer libraries which we need to add in the project. After you have added this in you project you have to link those on your page.


 
    
     <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/lib/jquery.min.js"></script>
    <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
    <script src="~/dist/add-on/jplayer.playlist.min.js"></script>
    

After you have added these libraries on your webpage, we can now add rest of the code on the page. 

<!DOCTYPE html>
<html>
<head>
    <style>
        /*.jquery_jplayer_N{
            display:none;
        }*/
    </style>
    <meta charset="utf-8" />
    <!-- Website Design By: www.happyworm.com -->
    <title>Demo : The jPlayerPlaylist Object</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="~/dist/skin/pink.flag/css/jplayer.pink.flag.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="~/lib/jquery.min.js"></script>
    <script src="~/dist/jplayer/jquery.jplayer.min.js"></script>
    <script src="~/dist/add-on/jplayer.playlist.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function () {



            var myPlaylist = new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_N",
                cssSelectorAncestor: "#jp_container_N"
            }, [
                    {
                        title: "Cro Magnon Man",
                        artist: "The Stark Palace",
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                        poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                    },
                    {
                        title: "Your face",
                        artist: "The Stark Palace2",
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                        poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                    }
                ], {
                    playlistOptions: {
                        enableRemoveControls: true
                    },
                    swfPath: "../../dist/jplayer",
                    supplied: "webmv, ogv, m4v, oga, mp3",
                    useStateClassSkin: true,
                    autoBlur: false,
                    smoothPlayBar: true,
                    keyEnabled: true,
                    audioFullScreen: true
                });

           
            // The remove commands

            $("#playlist-remove").click(function () {
                myPlaylist.remove();
            });

            $("#playlist-remove--2").click(function () {
                myPlaylist.remove(-2);
            });
            $("#playlist-remove--1").click(function () {
                myPlaylist.remove(-1);
            });
            $("#playlist-remove-0").click(function () {
                myPlaylist.remove(0);
            });
            $("#playlist-remove-1").click(function () {
                myPlaylist.remove(1);
            });
            $("#playlist-remove-2").click(function () {
                myPlaylist.remove(2);
            });

            // The shuffle commands

            $("#playlist-shuffle").click(function () {
                myPlaylist.shuffle();
            });

            $("#playlist-shuffle-false").click(function () {
                myPlaylist.shuffle(false);
            });
            $("#playlist-shuffle-true").click(function () {
                myPlaylist.shuffle(true);
            });

            // The select commands

            $("#playlist-select--2").click(function () {
                myPlaylist.select(-2);
            });
            $("#playlist-select--1").click(function () {
                myPlaylist.select(-1);
            });
            $("#playlist-select-0").click(function () {
                myPlaylist.select(0);
            });
            $("#playlist-select-1").click(function () {
                myPlaylist.select(1);
            });
            $("#playlist-select-2").click(function () {
                myPlaylist.select(2);
            });

            // The next/previous commands

            $("#playlist-next").click(function () {
                myPlaylist.next();
            });
            $("#playlist-previous").click(function () {
                myPlaylist.previous();
            });

            // The play commands

            $("#playlist-play").click(function () {
                myPlaylist.play();
            });

            $("#playlist-play--2").click(function () {
                myPlaylist.play(-2);
            });
            $("#playlist-play--1").click(function () {
                myPlaylist.play(-1);
            });
            $("#playlist-play-0").click(function () {
                myPlaylist.play(0);
            });
            $("#playlist-play-1").click(function () {
                myPlaylist.play(1);
            });
            $("#playlist-play-2").click(function () {
                myPlaylist.play(2);
            });

            // The pause command

            $("#playlist-pause").click(function () {
                myPlaylist.pause();
            });

            // Changing the playlist options

            // Option: autoPlay

            $("#playlist-option-autoPlay-true").click(function () {
                myPlaylist.option("autoPlay", true);
            });
            $("#playlist-option-autoPlay-false").click(function () {
                myPlaylist.option("autoPlay", false);
            });

            // Option: enableRemoveControls

            $("#playlist-option-enableRemoveControls-true").click(function () {
                myPlaylist.option("enableRemoveControls", true);
            });
            $("#playlist-option-enableRemoveControls-false").click(function () {
                myPlaylist.option("enableRemoveControls", false);
            });

            // Option: displayTime

            $("#playlist-option-displayTime-0").click(function () {
                myPlaylist.option("displayTime", 0);
            });
            $("#playlist-option-displayTime-fast").click(function () {
                myPlaylist.option("displayTime", "fast");
            });
            $("#playlist-option-displayTime-slow").click(function () {
                myPlaylist.option("displayTime", "slow");
            });
            $("#playlist-option-displayTime-2000").click(function () {
                myPlaylist.option("displayTime", 2000);
            });

            // Option: addTime

            $("#playlist-option-addTime-0").click(function () {
                myPlaylist.option("addTime", 0);
            });
            $("#playlist-option-addTime-fast").click(function () {
                myPlaylist.option("addTime", "fast");
            });
            $("#playlist-option-addTime-slow").click(function () {
                myPlaylist.option("addTime", "slow");
            });
            $("#playlist-option-addTime-2000").click(function () {
                myPlaylist.option("addTime", 2000);
            });

            // Option: removeTime

            $("#playlist-option-removeTime-0").click(function () {
                myPlaylist.option("removeTime", 0);
            });
            $("#playlist-option-removeTime-fast").click(function () {
                myPlaylist.option("removeTime", "fast");
            });
            $("#playlist-option-removeTime-slow").click(function () {
                myPlaylist.option("removeTime", "slow");
            });
            $("#playlist-option-removeTime-2000").click(function () {
                myPlaylist.option("removeTime", 2000);
            });

            // Option: shuffleTime

            $("#playlist-option-shuffleTime-0").click(function () {
                myPlaylist.option("shuffleTime", 0);
            });
            $("#playlist-option-shuffleTime-fast").click(function () {
                myPlaylist.option("shuffleTime", "fast");
            });
            $("#playlist-option-shuffleTime-slow").click(function () {
                myPlaylist.option("shuffleTime", "slow");
            });
            $("#playlist-option-shuffleTime-2000").click(function () {
                myPlaylist.option("shuffleTime", 2000);
            });

            // Equivalent commands

            $("#playlist-equivalent-1-a").click(function () {
                myPlaylist.add({
                    title: "Your Face",
                    artist: "The Stark Palace",
                    mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                    oga: "http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
                    poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                }, true);
            });

            $("#playlist-equivalent-1-b").click(function () {
                myPlaylist.add({
                    title: "Your Face",
                    artist: "The Stark Palace",
                    mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                    oga: "http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg",
                    poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                });
                myPlaylist.play(-1);
            });

            // AVOID COMMANDS

            $("#playlist-avoid-1").click(function () {
                myPlaylist.remove(2); // Removes the 3rd item
                myPlaylist.remove(3); // Ignored unless removeTime=0: Where it removes the 4th item, which was originally the 5th item.
            });


        });
//]]></script>
</head>
<body>
    <div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
        <div class="jp-type-playlist">
            <div id="jquery_jplayer_N" class="jp-jplayer"></div>
            <div class="jp-gui">
                <div class="jp-video-play">
                    <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                </div>
                <div class="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                    <div class="jp-details">
                        <div class="jp-title" aria-label="title">&nbsp;</div>
                    </div>
                    <div class="jp-controls-holder">
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">mute</button>
                            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                        </div>
                        <div class="jp-controls">
                            <button class="jp-previous" role="button" tabindex="0">previous</button>
                            <button class="jp-play" role="button" tabindex="0">play</button>
                            <button class="jp-stop" role="button" tabindex="0">stop</button>
                            <button class="jp-next" role="button" tabindex="0">next</button>
                        </div>
                        <div class="jp-toggles">
                            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                            <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="jp-playlist" >
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <li></li>
                </ul>
            </div>
            @*<div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>*@
        </div>
    </div>
   
</body>
</html>

Now, this is your complete webpage code which we need, have a look at this html


 <div id="jp_container_N" class="jp-video jp-video-270p" role="application" aria-label="media player">
        <div class="jp-type-playlist">
            <div id="jquery_jplayer_N" class="jp-jplayer"></div>
            <div class="jp-gui">
                <div class="jp-video-play">
                    <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
                </div>
                <div class="jp-interface">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                    <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                    <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                    <div class="jp-details">
                        <div class="jp-title" aria-label="title">&nbsp;</div>
                    </div>
                    <div class="jp-controls-holder">
                        <div class="jp-volume-controls">
                            <button class="jp-mute" role="button" tabindex="0">mute</button>
                            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                            <div class="jp-volume-bar">
                                <div class="jp-volume-bar-value"></div>
                            </div>
                        </div>
                        <div class="jp-controls">
                            <button class="jp-previous" role="button" tabindex="0">previous</button>
                            <button class="jp-play" role="button" tabindex="0">play</button>
                            <button class="jp-stop" role="button" tabindex="0">stop</button>
                            <button class="jp-next" role="button" tabindex="0">next</button>
                        </div>
                        <div class="jp-toggles">
                            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                            <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="jp-playlist" >
                <ul>
                    <!-- The method Playlist.displayPlaylist() uses this unordered list -->
                    <li></li>
                </ul>
            </div>
            @*<div class="jp-no-solution">
                <span>Update Required</span>
                To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
            </div>*@
        </div>
    </div>

We have to use this html in same way, because jplayer uses specific classes for it's working. So make sure we don't change anything in the html above and use the same. That will help us getting our music player ready.

    var myPlaylist = new jPlayerPlaylist({
                jPlayer: "#jquery_jplayer_N",
                cssSelectorAncestor: "#jp_container_N"
            }, [
                    {
                        title: "Cro Magnon Man",
                        artist: "The Stark Palace",
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                        poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                    },
                    {
                        title: "Your face",
                        artist: "The Stark Palace2",
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                        poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                    }
                ], {
                    playlistOptions: {
                        enableRemoveControls: true
                    },
                    swfPath: "../../dist/jplayer",
                    supplied: "webmv, ogv, m4v, oga, mp3",
                    useStateClassSkin: true,
                    autoBlur: false,
                    smoothPlayBar: true,
                    keyEnabled: true,
                    audioFullScreen: true
                });

So , this is the method we use of initializing our jPlayer. Remember we can change the song list from 

[
                    {
                        title: "Cro Magnon Man",
                        artist: "The Stark Palace",
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                        poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                    },
                    {
                        title: "Your face",
                        artist: "The Stark Palace2",
                        mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                        poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
                    }
                ]

So, this array is used as the playlist with all the songs and their paths. So you can change that or create that dynamically to get your jPlayer-music player ready with dynamic songs. Finally , we will see this output

So this is how it will look, Now you can enjoy music player with great interface accross your website, supporting multiple songs list. For the code sample you can download the attachments

  • |
  • JPlayer , Html5 Audio Video Player , Music Player

Comments

Tags

How to set Date and time format in IIS Manager
IIS Manager
IIS
Internet Information Services (IIS) Manager
Internet Information Services (IIS)
Internet Information Services
Error Handling In AspNet Core
Exception Handling Asp Net Core
Exception Handling
Exception Handling Asp Net
Aspnet
Creating Log Files in MVC
Error Handling in MVC
Exception Handling in AspNet
Handling Exceptions and Creating Error Logs in Asp net Mvc using base controller
net
Code2Tonight
Stopping Browser Reload On Save
Repository Pattern with ADONet in MVC
Repository Pattern With ASPNET MVC And AdoNet
MVC Crud Operation
Jquery Full Calender Integrated With ASPNET
Full Calendar
Jquery Calendar
Slick Slider
Slick Slider Example
responsive carousels
Entity Framework
MVC
Intergrate SummerNote Text Editor into AspNet MVC
Web Config
Auto Redirection
Redirection from Http to https
AspNet
Url Rewriting
Implement Stripe Payment Gateway In ASPNET Core
Stripe Payment Gateway
C#
AspNet Core
StripeNet
Postgre
PgAdmin4
PostgreSql
A Non Fatal Error Occured During Cluster Initialisation In Postgre SQL
Microsoft Outlook
Outlook Appointments
Microsoft Exchange Service
Send Email With HTML Template And PDF Using ASPNet C#
Send Email
Email with html template
email with pdf attachment
email with html and pdf
Microsoft Outlook Contacts
Outlook
Microsoft Exhchange Service
JSON
Convert string with dot notation to JSON
HTTP Error 5025 ANCM Out Of Process Startup Failure
Internet Information Service
Net core
Payumoney Integration With AspNet MVC
Prism js
Highlighting Syntax
Syntax Highlighting
code stylings
c#
Jquery AJax
Ajax
Jquery
Implement Stripe Payment Gateway In ASPNET
Using Checkout in an ASPNET Web Forms application
Stripe Payment
Stripe Payment Integration
Stripe Integeration
How to upload Image file using AJAX andjQuery
upload Image file using AJAX and jquery
Ajax call
file upload using ajax
file uploading using ajax and jquery
ConfigurationBuilder does not contain a definition for SetBasePath
Reading app json file in dot net core
Appsetting jso
Dot Net Core
Globalization and localization in ASPNET Core
Asp Net Core with Resource file resx
How to get the resx file strings in asp net core
Culture in Net core
Localisation in AspNet Core
Url Encryption in AspNet MVC
Url Encryption in C#
Url Encryption
Custom Helpers
Slick Slider with single slide
Slick
Vue js
Child Components
How to reload vue js child components
Net Core
Visual Studio
Net core 31
Razor
Zoom sdk
Zoom c# wrapper Inegration
zoom Integration in c#
Zoom Integration
Zoom window sdk
vue js toggle button
vue js
toggle buttons
vuejs
vue js toggle switch
SignalR
VueJs
SignalR in Net Core
Chat App in Vue js
Chat App using SignalR
AspNet Chat app
JPlayer
Html5 Audio Video Player
Music Player
QR Code Generator
QR Code
Jquery QR Code
AspNet MVC
Google Maps
Google map api
Places API
Google map Places API in AspNet
Jquery Autocomplete
Autocomplete
Jquery UI Autocomplete
ExcelDataReader
Import data from excel in AspNet
Card Number Formatting
Amex Card Format
Card Format
FCM
Cloud Messaging
Android Notifications
FCM Notifications for IOS
IOS Notifications
Angular js
apply css on child components in Angular js
Angular Mentions
Google Sign In
Google Login
Google Oauth Api
Social Login
Aspnet Mvc
Google + Api
Create and publish a package using Visual Studio (NET Framework
Windows)
Create and publish a nuget package
create your own nuget package
Image compress
Image optimization
compress Image
optimize Image
WebForm
AspNet Web Pages
Batch Script
Database backup
Powershell
ASpNet
Sql Server Backup
AspNet core 31
Aspnet core 21
HttpCookies in AspNet Core
LinkedIn Authentication
Login using LinkedIN
Social Login in AspNet
LinkedIn Authentication in AspNet MVC
LinkedIn Login in aspnet MVC
Shuffle List in c#
C#Net
Google Login in AspNet MVC
GoogleAuthentication Nuget package
Password Encryption
RFC Encryption
Encryption and Decryption
Encryption in AspNet
Base 64 Encryption
Base 64 Decryption
Swagger UI
Swashbuckle
SwashbuckleAspNetCore
Rest API
Postman
Api Testing
SSRS
SSRS Report
ASPNET MVC
ASPNET MVC SSRS Report
ssrs report
XlWorkbook
ClosedXml
Excel Export
Blazor
Syncfusion
SFGrid
Syncfusion SFgrid
Net
Net core 60
DataTable to List
Extension Methods
Microsoft Access Database Engine
Ace Ole Db 120
MicrosoftACEOLEDB120
OLE DB
Aspnet MVC
Ace OLE DB

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Kurukshetra
  • [email protected]

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2022 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Json Beautifier