Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>elitePlayer - Freework Audio player for JasperJones88</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
- <style type="text/css">
- * {
- box-sizing: border-box;
- }
- div {
- display: block;
- overflow: hidden;
- }
- body {
- margin: 0px;
- }
- iframe {
- width: 100%;
- height: 100%;
- outline: none;
- border: none;
- z-index: 1;
- }
- .eliteAlert {
- width: 800px;
- font-family: Arial;
- position: fixed;
- top: 20px;
- left: 20px;
- background-color: white;
- padding: 20px;
- z-index: 2;
- }
- .eliteAlert > .alertTitle {
- font-weight: bold;
- font-size: 20px;
- margin-bottom: 5px;
- }
- .eliteAlert > .alertDesc {
- font-size: 16px;
- }
- .elitePlayer {
- width: 400px;
- position: fixed;
- bottom: 0px;
- right: 50px;
- font-family: Arial;
- background-color: white;
- border-radius: 10px 10px 0px 0px;
- box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
- }
- .elitePlayer > .playerHeader {
- width: 100%;
- background-color: #EA1D22;
- color: white;
- padding: 15px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .elitePlayer > .playerHeader > .headerTitle {
- font-size: 16px;
- float: left;
- margin-right: 10px;
- }
- .elitePlayer > .playerHeader > .headerAction {
- font-size: 14px;
- float: right;
- height: 40px;
- width: 40px;
- border-radius: 10px;
- cursor: pointer;
- text-align: center;
- transition: background-color .25s ease-in-out;
- }
- .elitePlayer > .playerHeader > .headerAction > i {
- line-height: 40px;
- }
- .elitePlayer > .playerHeader > .headerAction:hover {
- background-color: #AF0F13;
- transition: background-color .25s ease-in-out;
- }
- .elitePlayer > .playerBody {
- width: 100%;
- color: white;
- padding: 15px;
- background-color: #AF0F13;
- display: none;
- align-items: center;
- justify-content: space-between;
- }
- .elitePlayer > .playerBody.bodyHidden {
- display: none!important;
- }
- .elitePlayer > .playerBody > .bodyData {
- color: white;
- }
- .elitePlayer > .playerBody > .bodyTime {
- text-align: right;
- float: left;
- }
- .elitePlayer > .playerBody > .bodyTime > div:nth-child(1) {
- font-size: 18px;
- }
- .elitePlayer > .playerBody > .bodyTime > div:nth-child(2) {
- font-size: 14px;
- color: #FFFFFF80;
- }
- .elitePlayer > .playerBody > .bodyData > .dataPlaying {
- width: 100%;
- font-size: 12px;
- color: #FFFFFF80;
- }
- .elitePlayer > .playerBody > .bodyData > .dataTitle {
- width: 100%;
- font-size: 18px;
- margin-top: 5px;
- }
- .elitePlayer > .playerBody > .bodyData > .dataEpisode {
- width: 100%;
- font-size: 14px;
- opacity: 0.8;
- }
- .elitePlayer > .playerBody > .bodyData > .dataDescription {
- width: 100%;
- font-size: 14px;
- margin-top: 5px;
- }
- .elitePlayer > .playerBody > .bodyData > .dataAuthor {
- width: 100%;
- font-size: 14px;
- }
- .elitePlayer > .playerBody > .bodyData > .dataAuthor > span {
- font-weight: bold;
- }
- .elitePlayer > .playerActions {
- color: white;
- background-color: #6D0E10;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .elitePlayer > .playerActions > .actionItem {
- width: 50px;
- height: 50px;
- float: left;
- text-align: center;
- background-color: #6D0E10;
- cursor: pointer;
- transition: background-color .25s ease-in-out;
- }
- .elitePlayer > .playerActions > .actionItem > i {
- line-height: 50px;
- font-size: 18px;
- }
- .elitePlayer > .playerActions > .actionItem.mainItem > i {
- line-height: 50px;
- font-size: 24px;
- }
- .elitePlayer > .playerActions > .actionGrid > .gridItem:hover,
- .elitePlayer > .playerActions > .actionItem:hover {
- background-color: #5F090B;
- transition: background-color .25s ease-in-out;
- }
- .elitePlayer > .playerList {
- width: 100%;
- min-height: 150px;
- position: relative;
- }
- .elitePlayer > .playerList > .listItem {
- width: 100%;
- padding: 20px;
- cursor: pointer;
- display: flex;
- align-items: center;
- position: relative;
- justify-content: space-between;
- border-bottom: 1px solid #F3F4F5;
- transition: background-color .25s ease-in-out, color .25s ease-in-out;
- }
- .elitePlayer > .playerList > .listItem > .itemProgress {
- position: absolute;
- bottom: 0px;
- left: 0px;
- width: 40%;
- height: 2px;
- background-color: #003858;
- display: none;
- }
- .elitePlayer > .playerList > .listItem:last-child {
- border-bottom: none;
- }
- .elitePlayer > .playerList > .listItem.itemPlaying,
- .elitePlayer > .playerList > .listItem:hover {
- background-color: #F7F8FA;
- color: #EA1D22;
- transition: background-color .25s ease-in-out, color .25s ease-in-out;
- }
- .elitePlayer > .playerList > .listItem > .itemMeta {
- float: left;
- width: calc(100% - 120px);
- }
- .elitePlayer > .playerList > .listItem > .itemMeta > .metaTitle {
- font-size: 16px;
- }
- .elitePlayer > .playerList > .listItem > .itemMeta > .metaAuthor {
- font-size: 14px;
- opacity: 0.8;
- }
- .elitePlayer > .playerList > .listItem > .itemDuration {
- float: left;
- width: 70px;
- text-align: center;
- }
- .elitePlayer > .playerList > .listItem > .itemAction {
- float: left;
- width: 35px;
- height: 35px;
- margin-left: 15px;
- text-align: center;
- }
- .elitePlayer > .playerList > .listItem > .itemAction.actionHidden {
- opacity: 0;
- }
- .elitePlayer > .playerList > .listItem:hover > .itemAction {
- opacity: 1;
- }
- .elitePlayer > .playerList > .listItem > .itemAction > i {
- line-height: 35px;
- font-size: 14px;
- }
- .elitePlayer > .playerList > .listItem.itemPlaying > .itemAction > i:nth-child(1) {
- display: none;
- }
- .elitePlayer > .playerList > .listItem:not(.itemPlaying) > .itemAction > i:nth-child(2) {
- display: none;
- }
- .elitePlayer > .playerList > .listOverlay {
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 2;
- background-color: #FFFFFFBF;
- }
- .elitePlayer > .playerList > .listOverlay > .overlayLoader {
- width: 80px;
- height: 80px;
- border-radius: 50%;
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- margin: auto;
- border: 10px solid #EA1D2280;
- border-top-color: #EA1D22;
- -webkit-animation: loaderRotate 1s linear infinite;
- -moz-animation: loaderRotate 1s linear infinite;
- animation: loaderRotate 1s linear infinite;
- }
- @-moz-keyframes loaderRotate {
- 100% {
- -moz-transform: rotate(360deg);
- }
- }
- @-webkit-keyframes loaderRotate {
- 100% {
- -webkit-transform: rotate(360deg);
- }
- }
- @keyframes loaderRotate {
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <div class="eliteAlert">
- <div class="alertTitle">
- Notice the iFrame in Background
- </div>
- <div class="alertDesc">
- The player itself is oustanding. In background we've got an 100%/100% iFrame containing the index.php file (landing page) from <a href="http://elitecode.biz" target="_BLANK">http://elitecode.biz</a>. If there would be more content so far on <a href="http://elitecode.biz" target="_BLANK">eliteCode.biz</a> you could move around on the page and listen to any music (as far as I complete the player tomorrow asap.)
- <br /><br />
- Cheers, eliteCode :)
- </div>
- </div>
- <iframe src="../../index.php"></iframe>
- <div class="elitePlayer">
- <div class="playerHeader">
- <div class="headerTitle" data-location="eliteplayer.title">
- Podcast is loading..
- </div>
- <div class="headerAction" data-event="eliteplayer.toggle.position" data-state="1">
- <i class="fa fa-chevron-down"></i>
- </div>
- </div>
- <div class="playerActions">
- <div class="actionItem">
- <i class="fa fa-step-backward"></i>
- </div>
- <div class="actionItem mainItem" data-location="eliteplayer.button.play" data-event="eliteplayer.toggle" data-state="paused">
- <i class="fa fa-play"></i>
- </div>
- <div class="actionItem">
- <i class="fa fa-step-forward"></i>
- </div>
- </div>
- <div class="playerBody" data-location="eliteplayer.body">
- <div class="bodyData">
- <div class="dataPlaying">
- Playing currently
- </div>
- <div class="dataTitle">
- Loading..
- </div>
- <div class="dataEpisode">
- Loading..
- </div>
- <div class="dataDescription">
- Loading..
- </div>
- </div>
- <div class="bodyTime">
- <div>
- 0:00
- </div>
- <div>
- 0:00
- </div>
- </div>
- </div>
- <div class="playerList" data-location="eliteplayer.playlist">
- <div class="listOverlay">
- <div class="overlayLoader"></div>
- </div>
- </div>
- </div>
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- var eliteDom = {};
- eliteDom.getLocation = function(elementLocation) {
- return $("[data-location=\"" + elementLocation + "\"]");
- };
- eliteDom.castEvent = function(elementEvent, elementIdentifier, elementCallback) {
- $("body").on(elementEvent, "[data-event=\"" + elementIdentifier + "\"]", elementCallback);
- };
- var elitePlayer = {};
- elitePlayer.playList = {};
- elitePlayer.playerTitle = "";
- elitePlayer.playerTitleElement = eliteDom.getLocation("eliteplayer.title");
- elitePlayer.playlistElement = eliteDom.getLocation("eliteplayer.playlist");
- elitePlayer.playerBodyElement = eliteDom.getLocation("eliteplayer.body");
- elitePlayer.buttonPlayElement = eliteDom.getLocation("eliteplayer.button.play");
- elitePlayer.audioPlayingCurrently = "-1";
- elitePlayer.audioObject;
- elitePlayer.audioPlay = function(audioLocation) {
- if(audioLocation == "CURRENT")
- audioLocation = elitePlayer.audioPlayingCurrently;
- if(elitePlayer.audioPlayingCurrently == "-1" || elitePlayer.audioPlayingCurrently != audioLocation) {
- if(elitePlayer.audioPlayingCurrently != audioLocation && typeof elitePlayer.audioObject != "undefined")
- elitePlayer.audioObject.pause();
- elitePlayer.audioObject = new Audio();
- elitePlayer.audioObject.src = audioLocation;
- elitePlayer.audioObject.volume = 0.2;
- }
- elitePlayer.audioObject.play();
- elitePlayer.audioPlayerSetMeta(audioLocation);
- $(eliteDom.getLocation("eliteplayer.playlist.item." + elitePlayer.audioPlayingCurrently)).removeClass("itemPlaying");
- elitePlayer.audioPlayingCurrently = audioLocation;
- $(eliteDom.getLocation("eliteplayer.playlist.item." + audioLocation)).addClass("itemPlaying");
- $("i", elitePlayer.buttonPlayElement).attr("class", "fa fa-pause");
- $(elitePlayer.buttonPlayElement).data("state", "playing");
- };
- elitePlayer.audioStop = function(audioLocation) {
- if(audioLocation == "CURRENT")
- audioLocation = elitePlayer.audioPlayingCurrently;
- elitePlayer.audioObject.pause();
- $(eliteDom.getLocation("eliteplayer.playlist.item." + audioLocation)).removeClass("itemPlaying");
- };
- elitePlayer.audioPlayerSetMeta = function(audioLocation) {
- var audioMeta = elitePlayer.playList[audioLocation];
- $(".bodyData > .dataTitle", elitePlayer.playerBodyElement).text(audioMeta.audioTitle);
- $(".bodyData > .dataEpisode", elitePlayer.playerBodyElement).text(audioMeta.audioEpisode);
- $(".bodyData > .dataDescription", elitePlayer.playerBodyElement).text(audioMeta.audioDescription);
- $(elitePlayer.audioObject).on("loadedmetadata", function() {
- $(".bodyTime > div:nth-child(2)", elitePlayer.playerBodyElement).text(elitePlayer.convertSecondsToTime(Math.round(elitePlayer.audioObject.duration)));
- });
- $(elitePlayer.audioObject).on("timeupdate", function() {
- $(".bodyTime > div:nth-child(1)", elitePlayer.playerBodyElement).text(elitePlayer.convertSecondsToTime(Math.round(elitePlayer.audioObject.currentTime)));
- });
- if($(elitePlayer.playerBodyElement).css("display") == "none")
- $(elitePlayer.playerBodyElement).stop().css("display", "flex").hide().fadeIn(150);
- };
- elitePlayer.audioAdd = function(audioTitle, audioEpisode, audioDescription, audioLocation) {
- elitePlayer.playList[audioLocation] = {
- "audioTitle": audioTitle,
- "audioEpisode": audioEpisode,
- "audioDescription": audioDescription,
- "audioLocation": audioLocation
- };
- };
- elitePlayer.audioRemove = function(audioLocation) {
- delete elitePlayer.playList[audioLocation];
- };
- elitePlayer.convertSecondsToTime = function(givenSeconds) {
- var requiredHours = ~~(givenSeconds / 3600);
- var requiredMinutes = ~~((givenSeconds % 3600) / 60);
- var requiredSeconds = givenSeconds % 60;
- var convertedTime = "";
- if (requiredHours > 0) {
- convertedTime += "" + requiredHours + ":" + (requiredMinutes < 10 ? "0" : "");
- }
- convertedTime += "" + requiredMinutes + ":" + (requiredSeconds < 10 ? "0" : "");
- convertedTime += "" + requiredSeconds;
- return convertedTime;
- };
- elitePlayer.initializePlayer = function() {
- $.each(elitePlayer.playList, function(audioLocation, audioMeta) {
- var audioEpisode = audioMeta.audioEpisode;
- var audioTitle = audioMeta.audioTitle;
- var audioDescription = audioMeta.audioDescription;
- var audioLocation = audioMeta.audioLocation;
- var audioDuration = "Loading..";
- $(elitePlayer.playlistElement).append("<div data-event=\"eliteplayer.play\" data-audio-location=\"" + audioLocation + "\" data-location=\"eliteplayer.playlist.item." + audioLocation + "\" class=\"listItem\"><div class=\"itemMeta\"><div class=\"metaTitle\">" + audioTitle + "</div><div class=\"metaAuthor\">" + audioEpisode + "</div></div><div class=\"itemDuration\">" + audioDuration + "</div><div class=\"itemAction\"><i class=\"fa fa-play\"></i><i class=\"fa fa-pause\"></i></div><div class=\"itemProgress\"></div></div>");
- var audioObject = new Audio();
- $(audioObject).on("loadedmetadata", function() {
- audioDuration = audioObject.duration;
- $(".itemDuration", eliteDom.getLocation("eliteplayer.playlist.item." + audioLocation)).text(elitePlayer.convertSecondsToTime(Math.round(audioDuration)));
- });
- audioObject.src = audioLocation;
- });
- $(".listOverlay", elitePlayer.playlistElement).stop().fadeOut(150);
- var audioLocationFirst = Object.keys(elitePlayer.playList)[0];
- $(elitePlayer.buttonPlayElement).data("audio-location", audioLocationFirst);
- $(elitePlayer.playerTitleElement).text(elitePlayer.playerTitle);
- };
- eliteDom.castEvent("click", "eliteplayer.play", function(eventCallback) {
- var audioLocation = $(this).data("audio-location");
- elitePlayer.audioPlay(audioLocation);
- });
- eliteDom.castEvent("click", "eliteplayer.toggle", function(eventCallback) {
- var dataAudioLocation = $(this).data("audio-location");
- var dataState = $(this).data("state");
- switch(dataState) {
- case "paused": {
- $(this).data("state", "playing");
- $("i", this).attr("class", "fa fa-pause");
- if(typeof elitePlayer.audioObject != "undefined")
- elitePlayer.audioPlay("CURRENT");
- else
- elitePlayer.audioPlay(dataAudioLocation);
- } break;
- case "playing": {
- $(this).data("state", "paused");
- $("i", this).attr("class", "fa fa-play");
- if(typeof elitePlayer.audioObject != "undefined")
- elitePlayer.audioStop("CURRENT");
- else
- elitePlayer.audioStop(dataAudioLocation);
- } break;
- }
- });
- eliteDom.castEvent("click", "eliteplayer.toggle.position", function(eventCallback) {
- var currentState = $(this).data("state");
- var elitePlayer = $(".elitePlayer");
- var requiredHeight = $(".playerHeader", elitePlayer).outerHeight() + $(".playerActions", elitePlayer).outerHeight();
- if(eliteDom.getLocation("eliteplayer.body").css("display") == "flex")
- requiredHeight += eliteDom.getLocation("eliteplayer.body").outerHeight();
- switch(currentState) {
- case 0: {
- $(elitePlayer).css("bottom", "0px");
- $(this).data("state", 1);
- $("i", this).attr("class", "fa fa-chevron-down");
- $(eliteDom.getLocation("eliteplayer.body")).removeClass("bodyHidden");
- } break;
- case 1: {
- $(elitePlayer).css("bottom", '-' + ($(elitePlayer).height() - requiredHeight) + "px");
- $(this).data("state", 0);
- $("i", this).attr("class", "fa fa-chevron-up");
- $(eliteDom.getLocation("eliteplayer.body")).addClass("bodyHidden");
- } break;
- }
- });
- // Change your title here
- elitePlayer.playerTitle = "elitePlayer - Podcast MP3 player";
- // Add songs to the playlist here
- elitePlayer.audioAdd("Dota", "Episode 1", "Any description may come here", "http://elitecode.biz/_freework/_eliteplayer/_music/basshunter_dota.mp3");
- elitePlayer.audioAdd("Gabber", "Episode 2", "Any description may come here", "http://elitecode.biz/_freework/_eliteplayer/_music/scooter_gabber.mp3");
- elitePlayer.initializePlayer();
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement