116 lines
7.3 KiB
HTML
116 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<!-- saved from url=(0048)http://cdgmagic.sourceforge.net/html5_cdgplayer/ -->
|
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
|
|
|
|
<meta name="description" content="Possibly the first and only HTML5/JavaScript CD+G player, showing example content created with free, open source CD+Graphics Magic.">
|
|
|
|
<title>CD+Graphics Magic :: HTML5 CD+G Player</title>
|
|
|
|
<style type="text/css">
|
|
body { background-color:#eeeeee; font-family:arial,sans-serif; width:80%; margin-left:auto; margin-right:auto; }
|
|
.header_box { background-color:#007777; text-align:center; font-size:24px; font-weight:bold; padding:0.25em;
|
|
white-space:nowrap; border-color:#111111; border-style:solid; border-width:1px; }
|
|
.left_navigation { height:100%; float:left; width:150px; background-color:#007777; text-align:center;
|
|
white-space:nowrap; border-color:#111111; border-style:solid; border-width:1px; }
|
|
.left_navigation a { font-size:80%; color:#ffffff; font-weight:bold; display:block; padding:0.5em; margin:0.2em;
|
|
border-color:#005555; border-style:solid; border-width:2px; background-color:#009999; }
|
|
.left_navigation a:hover { color:#ff8800; background-color:#333333; }
|
|
.left_navigation a:active { color:#aaaaaa; }
|
|
.right_content { clear:right; background-color:#dddddd; text-align:left; margin-left:152px; font-size:0.8em;
|
|
padding:1em; color:#111111; border-color:#111111; border-style:solid; border-width:1px; }
|
|
.footer { text-align:center; }
|
|
.footer img { border:0em; }
|
|
</style>
|
|
|
|
<script src="./HTML5-CDGPlayer_files/cdgmagic_cdgplayer.js"></script>
|
|
<script src="./HTML5-CDGPlayer_files/cdgmagic_cdgdecoder_lowresource.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function Start_CDGPlayer()
|
|
{
|
|
CDG_Player_init( "cdg_audio", "cdg_canvas", "cdg_border", "cdg_status" );
|
|
};
|
|
|
|
var zoom_mode = 0;
|
|
function toggle_2x_mode()
|
|
{
|
|
zoom_mode = (~zoom_mode) & 0x01;
|
|
var brdr = document.getElementById("cdg_border");
|
|
var cnvs = document.getElementById("cdg_canvas");
|
|
var audi = document.getElementById("cdg_audio");
|
|
brdr.style.width = (zoom_mode) ? 648 + "px" : 324 + "px";
|
|
cnvs.style.width = (zoom_mode) ? 576 + "px" : 288 + "px";
|
|
brdr.style.height = (zoom_mode) ? 432 + "px" : 216 + "px";
|
|
cnvs.style.height = (zoom_mode) ? 384 + "px" : 192 + "px";
|
|
cnvs.style.padding= (zoom_mode) ? 24 + "px" : 12 + "px";
|
|
audi.style.width = (zoom_mode) ? 648 + "px" : 324 + "px";
|
|
};
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body onload="Start_CDGPlayer()">
|
|
|
|
<div class="header_box"><span style="color:#ff8800">CD+G</span><span style="color:#ffffff">raphics Magic :: HTML5 CD+G Player</span></div>
|
|
|
|
<div class="left_navigation">
|
|
<a href="http://cdgmagic.sourceforge.net/" class="navigation_link">Home</a>
|
|
<br>
|
|
<a href="http://www.sourceforge.net/projects/cdgmagic/" title="CD+Graphics Magic Project Page on SourceForge.">Project Page</a>
|
|
<a href="http://www.sourceforge.net/projects/cdgmagic/files/" title="Download CD+Graphics Magic, files hosted by SourceForge.">Download Files</a>
|
|
<br>
|
|
<a href="http://cdgmagic.sourceforge.net/screenshots/" title="Fullsize screenshots showing various options.">Screenshots</a>
|
|
<a href="./HTML5-CDGPlayer_files/HTML5-CDGPlayer.htm" title="Example content, playable directly in compatible browsers.">HTML5 CD+G Player<br>(Example Content)</a>
|
|
<!--<br>
|
|
<a href="/tutorials/" title="Tutorials for program usage, including general CD+G format information.">Tutorials</a>-->
|
|
</div><!--end left_navigation-->
|
|
|
|
<div class="right_content">
|
|
Full and Split Page Cut/Fade modes are planned features still in development.
|
|
<br>All other modes are demonstrated exactly as implemented in Experimental 001b.<br><br><br>
|
|
<center><!-- <center> is probably evil, but at least it WORKS... TODO: Determine the proper margin-fu to banish said evil.-->
|
|
<!-- Note: The audio player is above media display because some default interfaces have controls that extend past the top of the player. -->
|
|
<audio id="cdg_audio" style="width:324px">
|
|
To use the JavaScript Subcode Graphics Player,<br>you must use an HTML5 audio/canvas compatible browser. [audio]
|
|
</audio>
|
|
|
|
<div id="cdg_border" style="width:324px; height:216px; background-color:#000000;" ondblclick="toggle_2x_mode();">
|
|
<canvas id="cdg_canvas" width="288" height="192" style="padding:12px"><!--style="image-rendering: optimizeSpeed"-->
|
|
To use the JavaScript Subcode Graphics Player,<br>you must use an HTML5 audio/canvas compatible browser. [canvas]
|
|
</canvas>
|
|
</div>
|
|
|
|
<div id="cdg_status" style="width:320px; padding:2px; margin:4px; text-align:left; font-family:arial; font-size:1.0em/*0.8em*/; color:#00dddd; background-color:#444444">
|
|
Please select a file to play...
|
|
</div>
|
|
|
|
<select onchange="set_file_prefix(this.value)" size="1" style="width:324px; margin:0px; color:#00dddd; background-color:#444444">
|
|
<option value="">--select one--</option>
|
|
<!--NOTE: the file is split on the colon for the mp3 and the cdg-->
|
|
<option value="SC-SBI-REMIX - Billy Idol - Rebel Yell:SC-SBI-REMIX - Billy Idol - Rebel Yell">SC-SBI-REMIX - Billy Idol - Rebel Yell</option>
|
|
</select>
|
|
</center>
|
|
<br><br>This JavaScript based player should work in most HTML5 compatible browsers supporting both the <canvas> and <audio> (note: "Sample Project" 01-04 are silent) tags, including many mobile and embedded devices.
|
|
<br>Double-click "screen area" to toggle 2x zoom mode (which may consume large amounts of CPU time on certain hardware/software configurations).
|
|
<br><br>It is, like the main application, licensed under the terms of the <a href="http://www.gnu.org/licenses/old-licenses/gpl-2.0.html">GNU GPL v2</a> (or later).
|
|
<br>(However, please do not hotlink the script from this site... COPY IT TO YOUR WEB SERVER!)
|
|
<br><br>Sync and timing accuracy, unfortunately, varies with that of the underlying browser implementation.
|
|
<br>Perfectly smooth scrolling is not implemented in this version for performance reasons, although block based scrolls work correctly.
|
|
<br><br>
|
|
<a href="http://www.jonathancoulton.com/songdetails/Flickr">"Flickr"</a> by <a href="http://www.jonathancoulton.com/">Jonathan Coulton</a> used under <a href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Attribution-NonCommercial 3.0 Unported</a> license.
|
|
<br><br>
|
|
<a href="http://ccmixter.org/files/Loveshadow/26157">"Heart on Redial"</a> by <a href="http://ccmixter.org/people/Loveshadow">Loveshadow</a> used under <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported</a> license.
|
|
<br>
|
|
<a href="http://cdgmagic.sourceforge.net/html5_cdgplayer/loveshadow_heartonredial_credits.html">Loveshadow - Heart on Redial Complete Music and Images Credits and Licenses Table</a>
|
|
</div><!--end right_content-->
|
|
|
|
<div class="footer">
|
|
<br><a href="http://sourceforge.net/projects/cdgmagic"><img src="./HTML5-CDGPlayer_files/sflogo.php" width="80" height="15" alt="Get CD+Graphics Magic at SourceForge.net. Fast, secure and Free Open Source software downloads"></a>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body></html> |