Jump to content

music fonts required


piano0011

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

  • Replies 56
  • Created
  • Last Reply

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

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"

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

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

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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.