Jump to content
piano0011

music fonts required

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Beautiful... appreciate it a lot!!

I have been learning some chinese from this site and they have a nice whiteboard background... is that possible to do?

Edited by requinix
gigantic iframe is gigantic

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
2 hours ago, ginerjm said:

but once you have the ability to produce a blank staff line adding the notes wouldn't be much more work.

ROFL.

Go on then, I have given you the blank staff lines.

It's a whole project in its own right.

Share this post


Link to post
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 ....

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

You would have to put the whiteboard in a background layer then precisely position your images over the top. Not the easiest of tasks.

Have a look at the software available.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

 

.

What is the best way to display a count down timer for tests? Should i do this in php or Javascript and how would i do this? 

I also found this whiteboard picture

images?q=tbn:ANd9GcRDSfMu6xbpy7KeJwpXL_3H12muL_sj--O6P_sqZ-HCLU9anB5D4Q

Edited by piano0011

Share this post


Link to post
Share on other sites

I forgot to mention that with the keyboard.svg file, can i import this in movie maker or other editting programs?

Share this post


Link to post
Share on other sites

This is strange because I thought that you can edit svg files with svg editor but I can't even open the file.. says there is an error...

Share this post


Link to post
Share on other sites

Quite possible - I just created them manually.

I'll have a look at what I need to add.

Share this post


Link to post
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>

 

Share this post


Link to post
Share on other sites

I still can't get it to open with svg edit, unless there are other better programs out there? I will try to find out if there are at the meantime...

Share this post


Link to post
Share on other sites

what SVG application are you using? Do you have a link to it?

 

EDIT: I had a look at SVG Edit (if that is what you are using). I couldn't get it to open or save, and it wasn't a lot of fun to use either.

Edited by Barand

Share this post


Link to post
Share on other sites

Here's a list of SVG editors.  If you don't know which one to try first, I would suggest Inkscape, which has been around a long time and is used by a lot of people.

  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks, Gizmola. Inkscape looks good, and it opens my hand-crafted files. Much better than the online versons.

  • Like 1

Share this post


Link to post
Share on other sites

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.


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