Licks | Search | Timeline | Feedback

Licks on your web page

This page will help you to post licks on your own page. Here are a few examples of how they might look. Click on the examples to access the playback feature and transposing options.

lick 4/4 g#8 | A7 a c# e g bb c16 bb a8 g | Dm7 f d a g f d a b~ | Dm7 b4 r r2 |

walking bass 4/4 | Cm7 c4 g+ [ eb+8 d c ] g e | F7 f4 f+ eb8 c cb bb~ | Bbmaj bb4 bb- c d | Ebmaj eb g bb g# | Am7-5 a eb+ c c# | D7 d f#- a ab | Gm7 g r r2 |

guitar tabs unaccompanied | Fmaj Dm7 | Gm7 C7 | Fm7 | Bb7 | { c+8:3 a+~:1 | a4 s4 s2 | s2 (g-8:4 db+ f bb) c+:1 (e--:4 bb+ d a+) g+:1 | s4 s8 eb-:4 [c:5 cb bb] ab:6 e | bb+4 s4 s2 } { | f8:4 c+:3 (e:2 a) f-:4 d:5 f:4 (c+:3 f) d-:5 | g-:6 f+:4 (bb:3 d) f:4 s2 | f8:4 bb:3 (eb:2 ab) s8 s2 | r8 (ab-4:4 d g) s8 s2 }

piano solo | D7 | G7 | C | C7 | { | r8 c#+ e c# d c a a# | b d f a g f d d# | e c f d# e c b bb~ | bb1 | } { | d4 (f# a c) a- (f#+ a c) | g- (f+ g b) d (f g b) | c (e g c) g- (e+ g c) | e c d e }

To enable rendering of licks, paste the line below into the head tag on your web page.

<script src=""></script>

Now any div with the class bopland will be replaced with the lick corresponding to the code it contains. E.g. the following code

<div class="bopland">
    4/4 | Am7-5 d4 [ c8 g eb ] d c f e
        | D7 eb g bb g# a f# eb c#
        | Gm7 d4 r r2 |

will be replaced with the lick below.

lick 4/4 | Am7-5 d4 [ c8 g eb ] d c f e | D7 eb g bb g# a f# eb c# | Gm7 d4 r r2 |

Each lick contains a "Source Code" tab to make it easy to copy it to your web page. If you want a particular lick to appear on your page click on the lick image with the left mouse button. The options menu will appear. Go to the "Source Code" tab and copy the text in it. All you have to do now is paste it on your web within a div tag with the class "bopland".

Types and patterns

Each lick should be prefixed with a type and a pattern telling the compiler which syntax to use and what type of lick it is. Type defines staves with clef, while pattern is used to enable filtering of licks by their purpose like "walking line" or "voicings" after the lick is saved. Valid types and patterns are listed below.

  • treble clef
  • bass clef (or bass)
  • piano
  • guitar
  • guitar tabs
  • solo (or lick)
  • comping
  • voicings
  • walking line
  • unaccompanied

A valid prefix is obtained by joining type and pattern together, e.g. treble clef solo, bass clef walking line, guitar voicings etc. This can be used to move a lick from one clef to another. Take the following lick as an example.

treble clef solo 4/4 | Am7 b+8 c g# b a g e c | G7 b a ab b a e g gb | F7 f a b c~ c f [ eb c bb ] | E7 g# a f e~ e4 r |

Its source code starts with treble clef solo where treble clef is a type and solo is a pattern. To make it appear in bass clef, one should replace treble clef solo with bass clef solo:

bass clef solo 4/4 | Am7 b+8 c g# b a g e c | G7 b a ab b a e g gb | F7 f a b c~ c f [ eb c bb ] | E7 g# a f e~ e4 r |

There are also some aliases available to save typing:

Alias Full prefix
treble clef solo
lick treble clef solo
solo treble clef solo
voicings treble clef voicings
bass [pattern] bass clef [pattern]
walking bass bass clef walking line
guitar bass guitar walking line

Tempo and swing

Playback tempo can be controlled by putting tempo N after lick prefix, where N is an integer number standing for number of quarters per minute. The following lick is played pretty fast - check the Source code tab:

tempo 360 4/4 | Dm7-5 bb8 g ab c g f eb c# | G7 d f ab f# g b d f | Cm7 ab f# g eb+ r2 |

All licks are swung by default. If you want to change the amount of swing - put swing N after the lick prefix, where N is integer number denoting amount of swing per cent. The default value is 20. The two licks below are played with swing 0 and 99 respectively.

swing 0 3/4 | Am7 c8 e b+ a g f | D7 f# a d- db c a# | G7 b d a+ g d b | Cmaj e4 r2 |
swing 99 3/4 | Am7 c8 e b+ a g f | D7 f# a d- db c a# | G7 b d a+ g d b | Cmaj e4 r2 |

Options available

There are a couple of options for render.js script one can use to adjust the appearance.

Param Default Description
lang en Language code corresponding to the interface language.
width 630 Width of lick images in pixels.

If, for example, you want all the licks to appear smaller on your page, pass the width parameter to render.js script:

<script src=""></script>

© 2011 The project | Credits