Show an empty jplayer in a block

Fyi, I've started the sound_management module for use cases like this: https://www.drupal.org/project/sound_management

This seems more a support request than a feature request.

jPlayer Audio Playlist

page.tpl.php

if (drupal_get_path_alias($_GET["q"]) == 'music/bachata_salsa') {
drupal_add_js('sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js', array('preprocess' => TRUE));
drupal_add_js('profiles/standard/libraries/player/jplayer/jquery.jplayer.min.js', array('preprocess' => TRUE));         
}

{Page| Block | View} - insert inside of body (php-format, ace editor)

<style type="text/css">
.demo-container {
	border: 1px solid #009BE3;
	padding:0 20px;
	font-family: "Myriad Pro Regular","Trebuchet MS";
}

.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo-container a:active {
	color: #009BE3;
}

.demo-container ul {
	list-style-type:none;
	padding:0;
	margin:1em 0;
	width:100%;
	overflow:hidden;
}

.demo-container ul span {
	color: #A0A600;
}

.demo-container li {
	float:left;
	margin-right:1em;
}

.demo-container p span.track-name {
	color: #CC0090;
}
@media only screen and (max-device-width : 480px) {
.volume-group {display:none;}
.demo-container .track.track-default {
	font-size: 1.3rem;
}
.demo-container .track {
	font-size: 1.2rem;
}
.demo-container li.audio-track {
	margin-right: 0.1em;
}
.demo-container li.indention {
	margin-right: 0.1em;
}
.demo-container .jp-volume-bar {
	width: inherit;
  height: inherit;
  display: block;
}
}
</style>

<div id="jquery_jplayer"></div>
		<div id="jp_container" class="demo-container b-lazy">
			<ul>
				<li><span>Select a track : </span></li>

$node_type = "music"; 

$result = db_query("SELECT nid FROM node WHERE type = :nodeType ", array(':nodeType'=>$node_type)); 

$nids = array();
foreach ($result as $obj) {  
  $nids[] = $obj->nid;
}
  $length = count($nids);
  $keys = array_keys($nids);
shuffle($keys);
$shuffledItems = array_map(function ($key) use ($nids) {
    return $nids[$key];
}, $keys);
 $tags = 'field_tags';

$tag_bachata='бачата';
$tag_salsa='сальса';
//$converted_bachata = utf8_encode($tag_bachata);
//$converted_salsa = utf8_encode($tag_salsa);

for ($i = 0; $i < $length-1; $i++) {
  $node[$i] = node_load($shuffledItems[$i]);
  
  $node_tags[$i] = field_get_items('node', $node[$i], $tags);
  $length_tags[$i] = count($node_tags[$i]);
  for ($j = 0; $j < $length_tags[$i]; $j++) {
   $term = taxonomy_term_load($node_tags[$i][$j][tid]);
   $name[$i][$j] = $term->name;
  }
}
  
for ($i = 0; $i < $length-1; $i++) {
 for ($j = 0; $j < $length_tags[$i]; $j++) {
   $tag_match_bachata = strcmp($tag_bachata, $name[$i][$j]);
   $tag_match_salsa = strcmp($tag_salsa, $name[$i][$j]);
   if ($tag_match_bachata === 0 || $tag_match_salsa === 0) {
     echo '<li class="audio-track"><a href="';
  $field_name = 'field_audio';
  $invoked_audio[$i] = field_get_items('node', $node[$i], $field_name);
  
  if ($format = 'url') {
   print $audio_url[$i] = file_create_url($invoked_audio[$i][0]['uri']);
  } else {
   print $audio_url[$i]  = $invoked_audio[$i][0][$format];
  }
  echo '"class="track">';
  print $audio_title[$i] = $node[$i]->title;
  echo '</a></li>';
  echo '<li class="indention"> | </li>';
   }
  
 }
}
  
  //LAST ITEM
   $node[$length-1] = node_load($shuffledItems[$length-1]);
   $node_tags[$length-1] = field_get_items('node', $node[$length-1], $tags);
  $length_tags[$length-1] = count($node_tags[$length-1]);
  for ($j = 0; $j < $length_tags[$length-1]; $j++) {
   $term = taxonomy_term_load($node_tags[$length-1][$j][tid]);
   $name[$length-1][$j] = $term->name;
   $tag_match_bachata = strcmp($tag_bachata, $name[$length-1][$j]);
   $tag_match_salsa = strcmp($tag_salsa, $name[$length-1][$j]);
   if ($tag_match_bachata === 0 || $tag_match_salsa === 0) {
    //last item
  echo '<li class="audio-track"><a href="';
  $field_name = 'field_audio';
  $invoked_audio[$length-1] = field_get_items('node', $node[$length-1], $field_name);
  if ($format = 'url') {
   print $audio_url[$length-1] = file_create_url($invoked_audio[$length-1][0]['uri']);
  } else {
   print $audio_url[$length-1]  = $invoked_audio[$length-1][0][$format];
  }
  echo '"class="track track-default">';
  print $audio_title[$length-1] = $node[$length-1]->title;
  echo '</a></li>';
   }
  }

</ul>
			<p>
				<span class="play-state"></span> :
				<span class="track-name">nothing</span>
				at <span class="extra-play-info"></span>
				of <span class="jp-duration"></span>, which is
				<span class="jp-current-time"></span>
			</p>
			<ul>
				<li><a class="jp-play" href="#">Play</a></li>
				<li><a class="jp-pause" href="#">Pause</a></li>
				<li><a class="jp-stop" href="#">Stop</a></li>
			</ul>
			<ul class="volume-group">
				<li>volume :</li>
				<li><a class="jp-mute" href="#">Mute</a></li>
				<li><a class="jp-unmute" href="#">Unmute</a></li>
				<li> <a class="jp-volume-bar" href="#">|&lt;----------&gt;|</a></li>
				<li><a class="jp-volume-max" href="#">Max</a></li>
			</ul>
		</div>

<script type="text/javascript">
$(document).ready(function(){

	// Local copy of jQuery selectors, for performance.
	var	my_jPlayer = $("#jquery_jplayer"),
		my_trackName = $("#jp_container .track-name"),
		my_playState = $("#jp_container .play-state"),
		my_extraPlayInfo = $("#jp_container .extra-play-info");

	// Some options
	var	opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
		opt_auto_play = true, // If true, when a track is selected, it will auto-play.
		opt_text_playing = "Now playing", // Text when playing
		opt_text_selected = "Track selected"; // Text when not playing

	// A flag to capture the first track
	var first_track = true;

	// Change the time format
	$.jPlayer.timeFormat.padMin = false;
	$.jPlayer.timeFormat.padSec = false;
	$.jPlayer.timeFormat.sepMin = " min ";
	$.jPlayer.timeFormat.sepSec = " sec";

	// Initialize the play state text
	my_playState.text(opt_text_selected);

	// Instance jPlayer
	my_jPlayer.jPlayer({
		ready: function () {
			$("#jp_container .track-default").click();
		},
		timeupdate: function(event) {
			my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
		},
		play: function(event) {
			my_playState.text(opt_text_playing);
		},
		pause: function(event) {
			my_playState.text(opt_text_selected);
		},
		ended: function(event) {
			my_playState.text(opt_text_selected);
		},
		swfPath: "/profiles/standard/libraries/player/jplayer",
		cssSelectorAncestor: "#jp_container",
		supplied: "mp3",
		wmode: "window"
	});

	// Create click handlers for the different tracks
	$("#jp_container .track").click(function(e) {
		my_trackName.text($(this).text());
		my_jPlayer.jPlayer("setMedia", {
			mp3: $(this).attr("href")
		});
		if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
			my_jPlayer.jPlayer("play");
		}
		first_track = false;
		$(this).blur();
		return false;
	});

});
</script>

The result can be seen here... 😊😊😊