116 lines
6.8 KiB
HTML
116 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<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>Johnson Karaoke v6.0</title>
|
|
|
|
<style type="text/css">
|
|
body { background-color:#eeeeee; font-family:arial,sans-serif; width:80%; margin-left:auto; margin-right:auto; }
|
|
/*This canvas magic makes it so it doesn't look blurry when scaled up*/
|
|
canvas {
|
|
image-rendering: optimizeSpeed; /* Older versions of FF */
|
|
image-rendering: -moz-crisp-edges; /* FF 6.0+ */
|
|
image-rendering: -webkit-optimize-contrast; /* Safari */
|
|
image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */
|
|
image-rendering: pixelated; /* Awesome future-browsers */
|
|
-ms-interpolation-mode: nearest-neighbor; /* IE */
|
|
}
|
|
.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="cdgmagic_cdgplayer.js"></script>
|
|
<script src="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");
|
|
|
|
// Works, you can change this number to 2 or 3 or whatever fits beyatch!
|
|
var scale_factor = 3;
|
|
|
|
audi.style.width = (zoom_mode) ? (324 * scale_factor) + "px" : 324 + "px";
|
|
|
|
brdr.style.width = (zoom_mode) ? (324 * scale_factor) + "px" : 324 + "px";
|
|
brdr.style.height = (zoom_mode) ? (216 * scale_factor) + "px" : 216 + "px";
|
|
|
|
cnvs.style.width = (zoom_mode) ? (288 * scale_factor) + "px" : 288 + "px";
|
|
cnvs.style.height = (zoom_mode) ? (192 * scale_factor) + "px" : 192 + "px";
|
|
cnvs.style.padding= (zoom_mode) ? (12 * scale_factor) + "px" : 12 + "px";
|
|
};
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body onload="Start_CDGPlayer()">
|
|
<div class="header_box">Johnson Karaoke v6.0</div>
|
|
<div class="left_navigation" style="display:none;">
|
|
<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">
|
|
<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="Lionel Richie - Hello:Lionel Richie - Hello">Lionel Richie - Hello</option>
|
|
<option value="Katy Perry & Juicy J - Dark Horse:Katy Perry & Juicy J - Dark Horse">Katy Perry & Juicy J - Dark Horse</option>
|
|
<option value="Lionel Richie - All Night Long:Lionel Richie - All Night Long">Lionel Richie - All Night Long</option>
|
|
<option value="Sting - Fields of Gold:Sting - Fields of Gold">Sting - Fields of Gold</option>
|
|
<option value="Foreigner - Waiting for a Girl Like You:Foreigner - Waiting for a Girl Like You">Foreigner - Waiting for a Girl Like You</option>
|
|
<option value="Police - Every Breath You Take:Police - Every Breath You Take">Police - Every Breath You Take</option>
|
|
<option value="Frankie Avalon - Beauty School Dropout:Frankie Avalon - Beauty School Dropout">Frankie Avalon - Beauty School Dropout</option>
|
|
<option value="Queensryche - Silent Lucidity:Queensryche - Silent Lucidity">Queensryche - Silent Lucidity</option>
|
|
<option value="Amy Winehouse - MONKEY MAN:Amy Winehouse - MONKEY MAN">Amy Winehouse - MONKEY MAN</option>
|
|
<option value="Coldplay - Sky Full Of Stars:Coldplay - Sky Full Of Stars">Coldplay - Sky Full Of Stars</option>
|
|
</select>
|
|
</center>
|
|
</div><!--end right_content-->
|
|
|
|
<div class="footer"></div>
|
|
</body></html>
|