Jump to content

music fonts required


piano0011
 Share

Recommended Posts

You do realize that you have been given exactly what you asked for?  A picture.  A .jpg file at the moment.

I dont' know if one can produce a piece of a music score using just css and html.  You could do it as a pdf using a package such as FPDF wherein you could write a function that produces a blank staff. Then you would proceed to overwrite that with the appropriate notes of music that you want to see placed meticulously upon it.  It would be a tedious piece of code to generate but once you have the ability to produce a blank staff line adding the notes wouldn't be much more work.

Link to comment
Share on other sites

I found it here

Or did you have something more like this in mind?

Save this code as "stave.svg"

<svg width="1000" height="200" viewBox="0 0 1000 200">
    <defs>
        <style type="text/css">
            .trebleclef {
                fill: black;
                font-size: 50pt;
            }
            .bassclef {
                fill: black;
                font-size: 40pt;
            }
            .curly {
                fill: black;
                stroke: none;
                font-size: 110pt;
                font-weight: 100;
            }
            .stave {
                stroke-width: 1px;
                stroke: gray;
                fill: none;
            }
        </style>
    </defs>
    <!-- treble -->
    <line x1='40' y1='30' x2='960' y2='30' class='stave' />
    <line x1='40' y1='38' x2='960' y2='38' class='stave' />
    <line x1='40' y1='46' x2='960' y2='46' class='stave' />
    <line x1='40' y1='54' x2='960' y2='54' class='stave' />
    <line x1='40' y1='62' x2='960' y2='62' class='stave' />
    <text x='44' y='65' class='trebleclef'>&#x1D11E;</text>
    <!-- bass -->
    <line x1='40' y1='130' x2='960' y2='130' class='stave' />
    <line x1='40' y1='138' x2='960' y2='138' class='stave' />
    <line x1='40' y1='146' x2='960' y2='146' class='stave' />
    <line x1='40' y1='154' x2='960' y2='154' class='stave' />
    <line x1='40' y1='162' x2='960' y2='162' class='stave' />
    <text x='44' y='165' class='bassclef'>&#x1D122;</text>
    <!-- stave ends -->
    <text x='-20' y='132' class='curly'>{</text>
    <path d="M 40 30 L 40 162" class='stave' />
    <path d="M 960 30 L 960 162" class='stave' />
</svg>

Then, in your html

<div><?php include 'stave.svg'?></div>
<div><?php include 'stave.svg'?></div>
<div><?php include 'stave.svg'?></div>

Which should give you

 

Capture.PNG

  • Like 2
Link to comment
Share on other sites

34 minutes ago, piano0011 said:

they have a nice whiteboard background... is that possible to do?

They are doing it...so I guess the answer must be yes.

 

Regarding drawing on the staves, there is music notation software available. How good the free ones are I do not know. Try Googling for "music notation software"

Edited by Barand
Link to comment
Share on other sites

3 hours ago, ginerjm said:

I dont' know if one can produce a piece of a music score using just css and html.  You could do it as a pdf using a package such as FPDF wherein you could write a function that produces a blank staff. Then you would proceed to overwrite that with the appropriate notes of music that you want to see placed meticulously upon it.  It would be a tedious piece of code to generate but once you have the ability to produce a blank staff line adding the notes wouldn't be much more work.


Noteflight.com


Bet they wrote a ship-load ;) of JS for that ....

Link to comment
Share on other sites

Thanks and with that white board, is it just as simple as finding an image and putting it in the background?

I also have tried searching for piano hand position but can't find a blank one, without the finger numbers

Edited by piano0011
Link to comment
Share on other sites

Similar to previous. Save this as "keyboard.svg"

<svg width='450' height='150' viewBox='0 0 300 100'>

<defs>
    <style type='text/css'>
         .ivory {
            fill: white;
            stroke: black;
            stroke-width: 1px;
         }
         .ebony {
            fill: black;
            stroke: black;
            stroke-width: 1px;
         }
    </style>
</defs><rect x='0' y='0' width='15' height='100' class='ivory' />
<rect x='15' y='0' width='15' height='100' class='ivory' />
<rect x='30' y='0' width='15' height='100' class='ivory' />
<rect x='45' y='0' width='15' height='100' class='ivory' />
<rect x='60' y='0' width='15' height='100' class='ivory' />
<rect x='75' y='0' width='15' height='100' class='ivory' />
<rect x='90' y='0' width='15' height='100' class='ivory' />
<rect x='105' y='0' width='15' height='100' class='ivory' />
<rect x='120' y='0' width='15' height='100' class='ivory' />
<rect x='135' y='0' width='15' height='100' class='ivory' />
<rect x='150' y='0' width='15' height='100' class='ivory' />
<rect x='165' y='0' width='15' height='100' class='ivory' />
<rect x='180' y='0' width='15' height='100' class='ivory' />
<rect x='195' y='0' width='15' height='100' class='ivory' />
<rect x='210' y='0' width='15' height='100' class='ivory' />
<rect x='225' y='0' width='15' height='100' class='ivory' />
<rect x='240' y='0' width='15' height='100' class='ivory' />
<rect x='255' y='0' width='15' height='100' class='ivory' />
<rect x='270' y='0' width='15' height='100' class='ivory' />
<rect x='285' y='0' width='15' height='100' class='ivory' />
<rect x='10' y='0' width='10' height='50' class='ebony' />
<rect x='25' y='0' width='10' height='50' class='ebony' />
<rect x='55' y='0' width='10' height='50' class='ebony' />
<rect x='70' y='0' width='10' height='50' class='ebony' />
<rect x='85' y='0' width='10' height='50' class='ebony' />
<rect x='115' y='0' width='10' height='50' class='ebony' />
<rect x='130' y='0' width='10' height='50' class='ebony' />
<rect x='160' y='0' width='10' height='50' class='ebony' />
<rect x='175' y='0' width='10' height='50' class='ebony' />
<rect x='190' y='0' width='10' height='50' class='ebony' />
<rect x='220' y='0' width='10' height='50' class='ebony' />
<rect x='235' y='0' width='10' height='50' class='ebony' />
<rect x='265' y='0' width='10' height='50' class='ebony' />
<rect x='280' y='0' width='10' height='50' class='ebony' />
<rect x='295' y='0' width='10' height='50' class='ebony' />
</svg>

Then

<div><?php include 'keyboard.svg'?></div>

Capture.PNG

  • Like 1
Link to comment
Share on other sites

Does this one work?

stave.svg

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     width="1000" height="200" 
     viewBox="0 0 1000 200">
    <defs>
        <style type="text/css">
            .trebleclef {
                fill: black;
                font-size: 50pt;
            }
            .bassclef {
                fill: black;
                font-size: 40pt;
            }
            .curly {
                fill: black;
                stroke: none;
                font-size: 110pt;
                font-weight: 100;
            }
            .stave {
                stroke-width: 1px;
                stroke: gray;
                fill: none;
            }
        </style>
    </defs>
    <!-- treble -->
    <line x1='40' y1='30' x2='960' y2='30' class='stave' />
    <line x1='40' y1='38' x2='960' y2='38' class='stave' />
    <line x1='40' y1='46' x2='960' y2='46' class='stave' />
    <line x1='40' y1='54' x2='960' y2='54' class='stave' />
    <line x1='40' y1='62' x2='960' y2='62' class='stave' />
    <text x='44' y='65' class='trebleclef'>&#x1D11E;</text>
    <!-- bass -->
    <line x1='40' y1='130' x2='960' y2='130' class='stave' />
    <line x1='40' y1='138' x2='960' y2='138' class='stave' />
    <line x1='40' y1='146' x2='960' y2='146' class='stave' />
    <line x1='40' y1='154' x2='960' y2='154' class='stave' />
    <line x1='40' y1='162' x2='960' y2='162' class='stave' />
    <text x='44' y='165' class='bassclef'>&#x1D122;</text>
    <!-- stave ends -->
    <text x='-20' y='132' class='curly'>{</text>
    <path d="M 40 30 L 40 162" class='stave' />
    <path d="M 960 30 L 960 162" class='stave' />
</svg>

 

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.