music fonts required

[ginerjm]

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.

[Barand]

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

 

[piano0011]

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 July 10, 2018 by requinix
gigantic iframe is gigantic

[piano0011]

I have tried to find some images on google but not sure if there are better ones.

[Barand]

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 July 10, 2018 by Barand

[Barand]

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.

[dalecosp]

http://music-theory.com/fonts.html  Petrucci, Marl, Tufa.  Petrucci was in the first versions of Sibelius back in the 1990's.

You could download these and put them in a folder on your site; then, in CSS:
 

@font-face {
    font-family: Petrucci;
    src: url(fonts/pe.ttf);
}

[dalecosp]

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

[piano0011]

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 July 10, 2018 by piano0011

[Barand]

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.

[Barand]

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>

[piano0011]

Thanks! Appreciate it!

[piano0011]

 

.

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

Edited July 11, 2018 by piano0011

[piano0011]

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

[Barand]

Never tried it.

[piano0011]

Can i use any of the php timer that i have seen on youtube? 

[Barand]

My crystal ball's batteries are flat so cannot answer that.

[piano0011]

No worries. . I will try to find a simple count down timer

[piano0011]

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

[Barand]

Quite possible - I just created them manually.

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

[Barand]

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>

 

[piano0011]

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

[Barand]

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 July 11, 2018 by Barand

[gizmola]

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.

[Barand]

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