Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Responsive JPlayer implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link type="text/css" href="/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="/js/jplayer.playlist.min.js"></script>
<style>
/* https://www.svnlabs.com/blogs/jplayer-playbackrate-audio-speed-control-for-podcast-player/ */
#jp-speed {
font-size: 3vw;
font-style: oblique;
text-align: center;
cursor: pointer;
margin: 0 0 10px 0;
}
#jp-thumbnail {
width: 50px;
margin: 3px 0px 2px 0px;
border: 2px solid skyblue;
border-radius: 10px;
}
#jp_container_1 {
width: 100%;
overflow: hidden;
}
.jp-interface {
display: flex;
align-items: center;
flex-direction: row;
}
.jp-controls {
padding: 3px !important;
display: flex;
flex-direction: column;
align-items: center;
margin: 3% !important;
width: auto !important;
min-width: 34px;
}
.jp-controls button {
margin: 0;
}
.jp-controls-wrp {
display: flex;
align-items: center;
}
.jp-previous,
.jp-next {
display: none !important;
}
.jp-progress-wrp {
display: flex;
flex-direction: column;
max-width: 70% !important;
width: 70% !important;
margin-right: 3px
}
.jp-progress {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
}
.jp-pushdown {
height: 16px;
}
.jp-time-holder {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
}
.jp-controls-wrp2 {
margin: 2%;
display: flex;
flex-direction: column;
align-items: center
}
.jp-pushdown2 {
height: 20px;
}
.jp-volume-controls {
margin: 2%;
width: 70px !important;
position: relative !important;
top: auto !important;
left: auto !important;
display: flex !important;
align-items: center;
}
.jp-volume-max,
.jp-mute,
.jp-volume-bar {
position: relative !important;
top: auto !important;
left: auto !important;
}
.jp-volume-max {
margin-left: 5px
}
.jp-toggles {
position: relative !important;
top: auto !important;
left: auto !important;
}
@media only screen and (min-width: 460px) {
#jp-speed {
font-size: 14px;
}
}
@media only screen and (min-width: 620px) {
.jp-previous,
.jp-next {
display: block!important;
}
#jp_container_1 {
width: 90vw;
margin: 0 auto;
}
#jp-thumbnail {
margin: 10px 0px -4px 0px;
width: 80px;
}
.jp-interface {
height: 120px !important;
}
.jp-controls {
width: 160px !important;
transform: scale(1.4);
margin: 14px;
}
.jp-volume-controls {
width: 80px !important;
transform: scale(1.4);
margin: 14px;
}
.jp-progress {
transform: scaleY(1.2);
}
.jp-playlist {
font-size: 2.3vw;
}
.jp-current-time,
.jp-duration {
font-size: 1.8vw;
}
}
@media only screen and (min-width: 1120px) {
#jp_container_1 {
width: 1024px;
}
.jp-playlist {
font-size: 22px;
}
.jp-interface {
height: 140px !important;
}
#jp-thumbnail {
margin: 10px 0px -4px 0px;
width: 90px;
}
.jp-progress-wrp {
max-width: 80% !important;
width: 80% !important
}
.jp-controls {
width: 180px !important;
transform: scale(1.7);
}
.jp-volume-controls {
width: 90px !important;
transform: scale(1.7);
padding: 0 12px;
}
.jp-current-time,
.jp-duration {
font-size: 16px;
}
#jp-speed {
font-size: 1.6vw;
}
}
@media only screen and (min-width: 1600px) {
#jp_container_1 {
width: 1480px;
}
.jp-current-time,
.jp-duration {
font-size: 22px;
}
.jp-playlist {
font-size: 34px;
}
#jp-speed {
font-size: 25px;
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [{
title: "Cro Magnon Man",
artist: "The Stark Palace",
mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
}, {
title: "Dancing Queen",
m4a: "./DancingQueen.m4a",
}], {
playlistOptions: {
autoPlay: true,
enableRemoveControls: false
},
swfPath: "/js",
supplied: "mp3, m4a",
smoothPlayBar: true,
keyEnabled: true,
useStateClassSkin: true,
//we cancel the recognition of mobiles by adding '1',
// so that volume controls are always shown
noVolume: {
ipad: /1ipad/,
iphone: /1iphone/,
ipod: /1ipod/,
android_pad: /1android(?!.*?mobile)/,
android_phone: /1android.*?mobile/,
blackberry: /1blackberry/,
windows_ce: /1windows ce/,
iemobile: /1iemobile/,
webos: /1webos/,
playbook: /1playbook/
},
solution: 'html',
audioFullScreen: false
});
$('#btnStart').on('click', function() {
myPlaylist.setPlaylist([{
title: "Dancing Queen",
artist: "ABBA",
m4a: "./DancingQueen.m4a",
}, {
title: "Head Over Heels",
artist: "ABBA",
m4a: "./HeadOverHeels.m4a",
}, {
title: "Chiquitita",
artist: "ABBA",
m4a: "./Chiquitita.m4a",
}, {
title: "Super Trouper",
artist: "ABBA",
m4a: "./SuperTouper.m4a",
}]);
});
}); /*ready*/
var currentSpeedIdx = 0;
var speeds = [1, 1.1, 1.2, 1.3, 1.4];
function jpSpeedControl() {
currentSpeedIdx = currentSpeedIdx + 1 < speeds.length ? currentSpeedIdx + 1 : 0;
jQuery("#jquery_jplayer_1").jPlayer("option", "playbackRate", speeds[currentSpeedIdx]);
jQuery("#jp-speed").html('x' + speeds[currentSpeedIdx]);
}
</script>
</head>
<body>
<p>
<button id="btnStart">Click me to set a new playlist</button>
</p>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<div class="jp-controls">
<div class="jp-controls-wrp">
<button class="jp-previous" role="button" tabindex="0">previous</button>
<button class="jp-play" role="button" tabindex="0">play</button>
<button class="jp-next" role="button" tabindex="0">next</button>
</div>
<button class="jp-stop" role="button" tabindex="0">stop</button>
</div>
<div class="jp-progress-wrp">
<div id="jp-speed" title="Speed" onclick="jpSpeedControl();">x1</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
</div>
</div>
<div class="jp-controls-wrp2">
<img id="jp-thumbnail" src="default-icon.png">
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0">mute</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
</div>
<div class="jp-toggles">
<!-- we hide shuffle and repeat buttons.
enabling them requires some tweaking for responsiveness.
<button class="jp-repeat" role="button" tabindex="0">repeat</button>
<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
-->
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li>&nbsp;</li>
</ul>
</div>
</div>
</div>
</body>
</html>
@ishahak
Copy link
Author

ishahak commented Aug 3, 2019

Here we demonstrate how to change jPlayer into responsiveness.

The other files were:
/skin/blue.monday/css/jplayer.blue.monday.min.css
/skin/blue.monday/image/jplayer.blue.monday.jpg
/skin/blue.monday/image/jplayer.blue.monday.seeking.gif
/js/jquery-2.2.4.min.js
/js/jquery.jplayer.min.js
/js/jplayer.playlist.min.js
/default-icon.png

jp2

jp1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment