liujunchi
/
osmd-extended


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>OpenSheetMusicDisplay as an embedded iframe</title>
    <meta name="description" content="A showcase for OpenSheetMusicDisplay.">
    <meta name="author" content="OpenSheetMusicDisplay contributors">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.js"
        type="text/javascript"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.css" media="all" rel="stylesheet" />
    <link rel="icon" href="./favicon.ico?" type="image/x-icon" />
</head>

<body>
    <br>
    <div style="text-align: center;width: 60%;margin:0 auto">
        <h1 class="ui centered header" id="header">
            <img src="./favicon.ico?" class="ui image">

        </h1>
        <h2>
            OpenSheetMusicDisplay as an embedded iframe
        </h2>
    </div>
    <div style="padding: 40px;margin:0 auto">
        <h3>
            Use parameters:
        </h3>
        <p>
            <table class="ui table celled ">
                <tr>
                    <th>Parameter</th>
                    <th>Values</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
                <tr>
                    <td><b>embedded</b></td>
                    <td></td>
                    <td></td>
                    <td>Activates the embedded mode: controls are hidden (unless other parameters specified)
                    </td>
                </tr>
                <tr>
                    <td>showControls</td>
                    <td>"0" and "1"</td>
                    <td>"0" = OFF</td>
                    <td>If active, the controls of OSMD are shown like usually.</td>
                </tr>
                <tr>
                    <td>showZoomControl</td>
                    <td>"0" and "1"</td>
                    <td>"0" = OFF</td>
                    <td>If showControls == 0 and showZoomControl == 1, a small zoomControl widget will be displayed to safe space
                    </td>
                </tr>
                <tr>
                    <td>showHeader</td>
                    <td>"0" and "1"</td>
                    <td>"0" = OFF</td>
                    <td>If activated, the OSMD title will be rendered on top of the sheet</td>
                </tr>
                <tr>
                    <td>zoom</td>
                    <td>floating number between 0.1 and 5.0</td>
                    <td>1.0</td>
                    <td>If given, the OSMD zoom level will be set at loading time</td>
                </tr>
                <tr>
                    <td>overflow</td>
                    <td>"hidden" , "auto", "scroll", "visible"</td>
                    <td>"auto"</td>
                    <td>If given, this attribute will refresh the state of the css attribute overflow to control the
                        scrollbar.
                    </td>
                </tr>
                <tr>
                    <td>openUrl</td>
                    <td>valid URL pointing to a valid musicxml file</td>
                    <td>"auto"</td>
                    <td>If given, this attribute open the given musicxml file and display it.<br>
                        Note that you need to add <i>&endUrl</i> after the URL.
                        <p>
                            <h5>Important:</h5>
                            For now, the resources must be hosted on the same server, otherwise it will be blocked by
                            <a href="https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing">CORS policy</a>.
                        </p>
                        <p>
                            <h5>Examples:</h5>
                            <a
                                href="http://localhost:8000/?embedded&openUrl=http://localhost:8000/BrookeWestSample.musicxml&endUrl">
                                http://localhost:8000/?embedded&openUrl=http://localhost:8000/BrookeWestSample.musicxml&endUrl</a>
                                <br>
                            <a
                                href="http://localhost:8000/?embedded&openUrl=https://wpmedia.musicxml.com/wp-content/uploads/2017/12/MahlFaGe4Sample.mxl&endUrl">http://localhost:8000/?embedded&openUrl=https://wpmedia.musicxml.com/wp-content/uploads/2017/12/MahlFaGe4Sample.mxl&endUrl</a>

                        </p>
                    </td>
                </tr>
            </table>
    </div>
    <div>
        <center>
            <h4>Example: http://localhost:8000/?embedded&showZoomControl=1&zoom=0.5</h4>
            <iframe src="http://localhost:8000/?embedded&showZoomControl=1&zoom=0.5" width="800" height="1500"
                frameborder="1"></iframe>
        </center>
    </div>


</body>

</html>