- ๐ท๐บRussia allexim
page.tpl.php
if (drupal_get_path_alias($_GET["q"]) == 'music/bachata_salsa') { drupal_add_css('profiles/standard/libraries/player/jplayer/lib/circle-player/skin/circle.player.css', array('preprocess' => TRUE)); drupal_add_js('profiles/standard/libraries/player/jplayer/jquery.jplayer.min.js', array('preprocess' => TRUE)); drupal_add_js('profiles/standard/libraries/player/jplayer/lib/circle-player/js/jquery.transform2d.js', array('preprocess' => TRUE)); drupal_add_js('profiles/standard/libraries/player/jplayer/lib/circle-player/js/jquery.grab.js', array('preprocess' => TRUE)); drupal_add_js('profiles/standard/libraries/player/jplayer/lib/circle-player/js/mod.csstransforms.min.js', array('preprocess' => TRUE)); drupal_add_js('profiles/standard/libraries/player/jplayer/lib/circle-player/js/circle.player.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>- Select a track :
$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="#">|<---------->|</a></li> <li><a class="jp-volume-max" href="#">Max</a></li> </ul> </div>:
nothing
at
of , which is
- volume :
- Mute
- Unmute
- |<---------->|
- Max
<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... ๐๐๐