liujunchi
/
osmd-extended


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>OpenSheetMusicDisplay Demo</title>
    <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
    <meta name="author" content="OpenSheetMusicDisplay contributors">

    <!-- Include opensheetmusicdisplay -->
    <script src="osmd-debug.js"></script>

    <!-- Include code and styles for this demo -->
    <script src="demo.js"></script>
    <link href="demo.css" media="all" rel="stylesheet"/>
    <link rel="icon" href="./favicon.ico?" type="image/x-icon"/>
</head>
<body>
<table cellspacing="0" style="max-width:700px;">
    <tr>
        <td>
            <img src="./favicon.ico?" style="width:64px;height:64px;"/>
        </td>
        <td>
            <h1>OpenSheetMusicDisplay Demo</h1>
        </td>
    </tr>
</table>
<table cellspacing="0" style="max-width:700px;">
    <tr>
        <td valign="top">
            <select id="select"></select>
            <p> Select a sample from the list ... </p>
            <p>... or just drop your MusicXML file on this page.</p>
        </td>
        <td valign="top" halign="right">
            <p>Renderer Backend
                <select id="backend-select" value="canvas">
                    <option value="canvas">Canvas</option>>
                    <option value="svg">SVG</option>
                </select>
            <p>Cursor controls:
                <input type="button" value="show" id="show-cursor-btn"/>
                <input type="button" value="hide" id="hide-cursor-btn"/>
                <input type="button" value="next" id="next-cursor-btn"/>
                <input type="button" value="reset" id="reset-cursor-btn"/>
            </p>
            <p>
                Zoom controls:
                <input type="button" value="zoom in" id="zoom-in-btn"/>
                <input type="button" value="zoom out" id="zoom-out-btn"/>
            </p>
            <table cellspacing="0">
                <tr>
                    <td>
                        <p>Zoom factor: <span id="zoom-str">???</span>%</p>
                    </td>
                    <td>
                        <p>Current width: <span id="size-str">???</span>px</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr id="error-tr">
        <td></td>
        <td id="error-td"></td>
    </tr>
</table>
</body>
</html>