Hey guys,
I just purchased the following HTML 5 Music player from
http://codecanyon.net/item/musicbox-html5-music-player/full_screen_preview/122383 and it uses PHP for the heavy-lifting.
I could go the lazy way and simply manage the player independently as supplied, but I know that MODX is here for a reason. So I wanna venture in the crazy world of Snippet-Writing.
Unfortunately for the 99.99%-designer, 0.01%-programmer me, I can't seem to get passed step1.
The player has the following file structure: (with MusicBox being the head directory)
MusicBox/
...
/css/
/getid3/
/jPlayer/
/js/
/music/
/cover.php
/explorer.php
/index.php
Here's the inde.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Box by 23andWalnut.com</title>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jPlayer/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
var playListItems = [
{mp3:"music/1.mp3",ogg:"music/1.ogg"}
];
</script>
</head>
<body>
<div class="content">
<!-- We need to pass the class variable from php to js -->
<?php $class = isset($_REQUEST['type']) ? $_REQUEST['type'] : ''; ?>
<script type="text/javascript">
var musicBoxClass = '<?php echo $class; ?>';
</script>
<!-- This is just a div to hold html content when we need to parse ajax content -->
<div class="tmp"></div>
<!-- This is the main menu at the top of MusicBox -->
<div id="menu" class="clearfix">
<ul>
<li><a href="index.php?type=thumb-wall" class="continue">Thumb Wall</a></li>
<li><a href="index.php?type=list" class="continue">List</a></li>
<?php if (!(stristr("MSIE", getenv("HTTP_USER_AGENT")) || stristr("Internet Explorer", getenv("HTTP_USER_AGENT")))): ?>
<li class="fav-link-li"><a href="index.php?type=favorites" class="fav-link">My Favorites</a></li>
<?php endif; ?>
</ul>
</div>
<!-- This is the actual playlist -->
<div id="main" class="<?php echo $class; ?>">
<div id="main-inner">
<?php if ($class != 'thumb-wall'): ?>
<div class="info-thumb">
<span class="empty">♫ </span>
</div>
<?php endif; ?>
<div id="jplayer_playlist" class="jp-playlist playlist <?php echo $class; ?> clearfix">
<ol>
<li>Loading playlist....</li>
</ol>
</div>
</div>
</div>
</div>
<!-- This is the actual music player (jPlayer) -->
<div id="jquery_jplayer"></div>
<div class="jp-interface clearfix">
<div class="wrapper">
<ul class="jp-controls">
<li><a href="#" id="jplayer_previous" class="jp-previous" tabindex="1"><span
class="button-inner">◄I</span></a></li>
<li><a href="#" id="jplayer_play" class="jp-play" tabindex="1"><span class="button-inner">►</span></a>
</li>
<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1"><span class="button-inner">II</span></a>
</li>
<li><a href="#" id="jplayer_next" class="jp-next" tabindex="1"><span class="button-inner">I►</span></a>
</li>
</ul>
<div class="jp-progress">
<div id="jplayer_load_bar" class="jp-load-bar">
<div id="jplayer_play_bar" class="jp-play-bar"></div>
</div>
</div>
<div id="jplayer_volume_bar" class="jp-volume-bar">
<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</body>
</html>
<?php
require_once('getid3/getid3/getid3.php');
$file = $_REQUEST['filename'];
$getID3 = new getID3;
$getID3->option_tag_id3v2 = true; # Don't know what this does yet
$getID3->analyze($file);
$getID3->option_tags_images = true;
if (isset($getID3->info['id3v2']['APIC'][0]['data']))
{
$cover = $getID3->info['id3v2']['APIC'][0]['data'];
}
else if (isset($getID3->info['id3v2']['PIC'][0]['data']))
{
$cover = $getID3->info['id3v2']['PIC'][0]['data'];
} else
{
$cover = "no_cover";
}
if (isset($getID3->info['id3v2']['APIC'][0]['image_mime']))
{
$mimetype = $getID3->info['id3v2']['APIC'][0]['image_mime'];
} else
{
$mimetype = 'image/jpeg'; // I have tried changing this line to $mimetype = 'image/png'; and it still does not work
}
if (!is_null($cover))
{
// Send file
header("Content-Type: " . $mimetype);
if (isset($getID3->info['id3v2']['APIC'][0]['image_bytes']))
{
header("Content-Length: " . $getID3->info['id3v2']['APIC'][0]['image_bytes']);
}
echo($cover);
} ?>
And the explorer.php file
<?php
class Explorer
{
function dir_walk($dir, $types = null, $recursive = false, $baseDir = '')
{
$dir_contents = null;
//make sure the directory has a trailing slash, otherwise this function wont work!
if (substr($dir, -1) != '/')
{
$dir .= '/';
}
if ($dh = opendir($dir))
{
while (($file = readdir($dh)) !== false)
{
if ($file === '.' || $file === '..')
{
continue;
}
if (is_file($dir . $file))
{
if (is_array($types))
{
if (!in_array(strtolower(pathinfo($dir . $file, PATHINFO_EXTENSION)), $types, true))
{
continue;
}
}
$this_mp3 = $this->get_meta($dir . $file);
$dir_contents[] = $this_mp3;
//$dir_contents[] =$ThisFileInfo;
}
else if (is_dir($dir . $file))
{
$dir_contents[] = "<a href=index.php?browse=" . urlencode($dir . $file) . ">$file</a>";
if ($recursive)
{
dir_walk($dir . $file . DIRECTORY_SEPARATOR, $callback, $types, $recursive, $baseDir . $file . DIRECTORY_SEPARATOR);
}
}
}
closedir($dh);
return $dir_contents;
}
else
{
echo "Error opening directory";
return false;
}
}
function get_meta($files)
{
$ajax = false;
$mp3s = array();
require_once('getid3/getid3/getid3.php');
$getID3 = new getID3;
if (!is_array($files))
{
$files[] = $files;
}
foreach ($files as $file)
{
$ThisFileInfo = $getID3->analyze($file['mp3']);
getid3_lib::CopyTagsToComments($ThisFileInfo);
if (isset($ThisFileInfo['error'][0]))
$ThisFileInfo['comments_html']['title'][0] = 'Error processing file';
$cover = $this->cover_art($file['mp3']);
$this_mp3 = array(
'artist' => @$ThisFileInfo['comments_html']['artist'][0],
'name' => @$ThisFileInfo['comments_html']['title'][0],
'album' => @$ThisFileInfo['comments_html']['album'][0],
'play_length' => @$ThisFileInfo['playtime_string'],
'path' => @$ThisFileInfo['filename'],
'cover' => $cover,
'mp3' => isset($file['mp3']) ? $file['mp3'] : '',
'ogg' => isset($file['ogg']) ? $file['ogg'] : ''
);
$mp3s[] = $this_mp3;
}
return $mp3s;
}
function cover_art($file)
{
require_once('getid3/getid3/getid3.php');
$getID3 = new getID3;
$getID3->option_tag_id3v2 = true; # Don't know what this does yet
$getID3->analyze($file);
$getID3->option_tags_images = true;
if (isset($getID3->info['id3v2']['APIC'][0]['data']))
{
$cover = 1;
} elseif (isset($getID3->info['id3v2']['PIC'][0]['data']))
{
$cover = 1;
} else
{
$cover = 0;
}
return $cover;
}
function generate_playlist($files)
{
$playlist = ' <ul class="playlist">';
if (is_array($files))
{
$count = 0;
foreach ($files as $file)
{
$count++;
$path = $file['path'];
$title = $file['title'];
$playlist .= "<li><a href=$path class='media' rel='music/images/$count.jpg'>$title</a></li>";
}
}
$playlist .= '</ul>';
return $playlist;
}
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
$data = $_POST;
$dispatch = isset($data['dispatch']) ? $data['dispatch'] : false;
if ($dispatch)
{
$explorer = new Explorer();
$data = isset($data['data']) ? $data['data'] : null;
echo json_encode($explorer->$dispatch($data));
}
}
?>
I guess I wanna know how I should join these files in snippet.
I looked at the [[!include? &file=`/absolute/path/to/my/snippet.php`]] method suggested in the docs
http://rtfm.modx.com/display/revolution20/Snippets and I got the player to load on a test page except the playlist wasn't loading.
I'll make the entire player available to anyone who wants it. Just ask.
Thanks for any help.
