[{"data":1,"prerenderedAt":171},["ShallowReactive",2],{"i-tabler:book-2":3,"i-tabler:world":8,"i-tabler:check":10,"i-tabler:mail":12,"i-tabler:home":14,"i-tabler:pencil":16,"i-tabler:ruler-2":18,"i-tabler:music":20,"i-tabler:folder":22,"guides:play-piano-on-a-computer-keyboard:en":24,"guides-list:en":132,"i-tabler:piano":159,"i-tabler:door":161,"i-tabler:armchair":163,"i-tabler:texture":165,"i-tabler:point-filled":167,"i-tabler:chevron-right":169},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M19 4v16H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\"\u002F>\u003Cpath d=\"M19 16H7a2 2 0 0 0-2 2M9 8h6\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m.6-3h16.8M3.6 15h16.8\"\u002F>\u003Cpath d=\"M11.5 3a17 17 0 0 0 0 18m1-18a17 17 0 0 1 0 18\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 12l5 5L20 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\u002F>\u003Cpath d=\"m3 7l9 6l9-6\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M5 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7\"\u002F>\u003Cpath d=\"M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 20h4L18.5 9.5a2.828 2.828 0 1 0-4-4L4 16zm9.5-13.5l4 4\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m17 3l4 4L7 21l-4-4zm-1 4l-1.5-1.5M13 10l-1.5-1.5M10 13l-1.5-1.5M7 16l-1.5-1.5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":21},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 17a3 3 0 1 0 6 0a3 3 0 0 0-6 0m10 0a3 3 0 1 0 6 0a3 3 0 0 0-6 0\"\u002F>\u003Cpath d=\"M9 17V4h10v13M9 8h10\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":23},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2\"\u002F>",{"title":25,"seoTitle":26,"description":27,"intro":28,"blocks":29,"faq":114},"How to play piano on a computer keyboard","Play Piano on a Computer Keyboard: Keys & Songs","Which computer keys play which piano notes, how to change octave and hold the sustain pedal, plus easy songs and chords for a laptop keyboard.","On an online piano like [JotJam's](\u002Fmusic\u002Fpiano), the middle row of letters plays the white keys and the row above plays the black keys. A plays middle C, S plays D, D plays E and so on up to the ' key; W and E are C♯ and D♯, T, Y and U are F♯, G♯ and A♯. Z and X move down and up an octave, and holding Space works like a sustain pedal.",[30,78,95,106],{"h2":31,"table":32,"after":76},"The key map",[33,36,41,46,49,53,57,61,66,71],[34,35,34,35],"Computer key","Note",[37,38,39,40],"A","C (middle C)","W","C♯ \u002F D♭",[42,43,44,45],"S","D","E","D♯ \u002F E♭",[43,44,47,48],"T","F♯ \u002F G♭",[50,50,51,52],"F","Y","G♯ \u002F A♭",[54,54,55,56],"G","U","A♯ \u002F B♭",[58,37,59,60],"H","O","C♯ (next octave)",[62,63,64,65],"J","B","P","D♯ (next octave)",[67,68,69,70],"K","C (next octave)","Z \u002F X","Octave down \u002F up",[72,73,74,75],"L ; '","D, E, F (next octave)","Space (hold)","Sustain pedal",[77],"It goes by where the keys are, not the letters printed on them. On a French AZERTY or German QWERTZ keyboard, play the keys in the same places — the piano shows your layout's letters on the keys.",{"h2":79,"p":80,"table":82},"Your first songs",[81],"Play these at the starting octave, where A is middle C. Each group is a phrase; pause between groups.",[83,86,89,92],[84,85],"Song","Keys",[87,88],"Twinkle, Twinkle, Little Star","A A G G · H H G · F F D D · S S A",[90,91],"Mary Had a Little Lamb","D S A S · D D D · S S S · D G G",[93,94],"Ode to Joy (Beethoven)","D D F G · G F D S · A A S D · D S S",{"h2":96,"list":97,"after":104},"Scales and chords",[98,99,100,101,102,103],"**C major scale**: A S D F G H J K — all white keys from C to C.","**C major chord** (C, E, G): press **A D G** together.","**F major chord** (F, A, C): **F H K**.","**G major chord** (G, B, D): **G J L**.","**A minor chord** (A, C, E): **H K ;**","Those four chords — C, Am, F, G — cover a huge number of pop songs. Try them in the order **C – G – Am – F**.",[105],"Most laptop keyboards register only a few keys at once, so very big chords can drop a note. Three-note chords usually work.",{"h2":107,"list":108},"Playing better on a laptop",[109,110,111,112,113],"**Turn on the metronome** and start slow, around 60–80 BPM.","**Hold Space** for legato — notes ring into each other like with a sustain pedal. Let go to clear them.","**Use Z and X** to move to a higher or lower octave for bass lines and high melodies.","**Wired headphones** keep the sound in time with your fingers; Bluetooth adds a delay.","**Record** when you find something you like. The take starts on your first note, and you can download it as MIDI for GarageBand, Logic or Ableton, fix wrong notes in the [editor](\u002Fmusic\u002Fedit), or export it as sheet music.",{"title":115,"items":116},"Questions",[117,120,123,126,129],{"q":118,"a":119},"Which key is middle C?","A, at the starting octave. Press Z or X to move down or up, and A plays the C of the new octave.",{"q":121,"a":122},"How do I play the black keys?","With the row above the home row: W and E for C♯ and D♯, T, Y and U for F♯, G♯ and A♯, and O and P for the next C♯ and D♯.",{"q":124,"a":125},"Is there a sustain pedal?","Yes: hold Space. On a touch screen, use the Sustain button.",{"q":127,"a":128},"Why don't all the notes of a chord play?","Many computer keyboards only report a few keys pressed at the same time. Try fewer notes, or play the chord on the screen with your fingers.",{"q":130,"a":131},"Can I use a MIDI keyboard?","Not at the moment. JotJam's piano works with touch, a mouse and your computer keyboard.",[133,137,141,145,149,153,155],{"slug":134,"title":135,"description":136},"how-to-draw-a-floor-plan-online","How to draw a floor plan online, step by step","Draw a floor plan to scale in your browser for free: measure the rooms, draw walls at exact lengths, add doors and furniture, then dimension it.",{"slug":138,"title":139,"description":140},"floor-plan-symbols","Floor plan symbols and what they mean","What floor plan symbols mean: door swings, sliding doors, windows, stairs, furniture, north arrows and section marks — with free SVG symbols.",{"slug":142,"title":143,"description":144},"furniture-sizes-for-floor-plans","Furniture sizes to use in a floor plan","Typical sizes of beds, sofas, tables, desks, wardrobes, kitchen and bathroom fittings, and the space to leave around them, in centimetres.",{"slug":146,"title":147,"description":148},"section-hatch-patterns","Section hatch patterns: what each one means","What section hatches mean — concrete, brick, earth, insulation, timber, gravel — when to use each, and how to keep a section readable. Free SVGs.",{"slug":150,"title":151,"description":152},"sketch-on-a-phone-or-tablet","How to sketch on a phone or tablet without installing an app","Draw on an iPad, Android tablet or phone right in the browser: Apple Pencil pressure, palm rest, pinch to zoom and PNG export. Free, no app.",{"slug":154,"title":25,"description":27},"play-piano-on-a-computer-keyboard",{"slug":156,"title":157,"description":158},"easy-guitar-chords-for-beginners","Easy guitar chords for beginners","The ten guitar chords to learn first, with fret numbers, the order to learn them in and easy progressions. Hear each one on a free online guitar.",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":160},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 12v-6\"\u002F>\u003Cpath d=\"M8 5v8h2V5m5 14v-6m-1-8v8h2V5\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":162},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 12v.01M3 21h18M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":164},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M5 11a2 2 0 0 1 2 2v2h10v-2a2 2 0 1 1 4 0v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2\"\u002F>\u003Cpath d=\"M5 11V6a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v5M6 19v2m12-2v2\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":166},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 3L3 6m18 12l-3 3M11 3l-8 8m13-8L3 16M21 3L3 21M21 8L8 21m13-8l-8 8\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":168},"\u003Cpath fill=\"currentColor\" d=\"M12 7a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":170},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m9 6l6 6l-6 6\"\u002F>",1792672094249]