ginerjm Posted July 10, 2018 Share Posted July 10, 2018 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 More sharing options...
Barand Posted July 10, 2018 Share Posted July 10, 2018 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'>𝄞</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'>𝄢</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 Link to comment Share on other sites More sharing options...
piano0011 Posted July 10, 2018 Author Share Posted July 10, 2018 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? Link to comment Share on other sites More sharing options...
piano0011 Posted July 10, 2018 Author Share Posted July 10, 2018 I have tried to find some images on google but not sure if there are better ones. Link to comment Share on other sites More sharing options...
Barand Posted July 10, 2018 Share Posted July 10, 2018 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 More sharing options...
Barand Posted July 10, 2018 Share Posted July 10, 2018 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. Link to comment Share on other sites More sharing options...
dalecosp Posted July 10, 2018 Share Posted July 10, 2018 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); } Link to comment Share on other sites More sharing options...
dalecosp Posted July 10, 2018 Share Posted July 10, 2018 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 More sharing options...
piano0011 Posted July 10, 2018 Author Share Posted July 10, 2018 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 Link to comment Share on other sites More sharing options...
Barand Posted July 10, 2018 Share Posted July 10, 2018 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. Link to comment Share on other sites More sharing options...
Barand Posted July 10, 2018 Share Posted July 10, 2018 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> Link to comment Share on other sites More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 Thanks! Appreciate it! Link to comment Share on other sites More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 . 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 Link to comment Share on other sites More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 I forgot to mention that with the keyboard.svg file, can i import this in movie maker or other editting programs? Link to comment Share on other sites More sharing options...
Barand Posted July 11, 2018 Share Posted July 11, 2018 Never tried it. Link to comment Share on other sites More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 Can i use any of the php timer that i have seen on youtube? Link to comment Share on other sites More sharing options...
Barand Posted July 11, 2018 Share Posted July 11, 2018 My crystal ball's batteries are flat so cannot answer that. Link to comment Share on other sites More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 No worries. . I will try to find a simple count down timer Link to comment Share on other sites More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 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... Link to comment Share on other sites More sharing options...
Barand Posted July 11, 2018 Share Posted July 11, 2018 Quite possible - I just created them manually. I'll have a look at what I need to add. Link to comment Share on other sites More sharing options...
Barand Posted July 11, 2018 Share Posted July 11, 2018 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'>𝄞</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'>𝄢</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 More sharing options...
piano0011 Posted July 11, 2018 Author Share Posted July 11, 2018 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... Link to comment Share on other sites More sharing options...
Barand Posted July 11, 2018 Share Posted July 11, 2018 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. Link to comment Share on other sites More sharing options...
gizmola Posted July 11, 2018 Share Posted July 11, 2018 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. Link to comment Share on other sites More sharing options...
Barand Posted July 11, 2018 Share Posted July 11, 2018 Thanks, Gizmola. Inkscape looks good, and it opens my hand-crafted files. Much better than the online versons. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.