quirli is a free media player for replay and rehearsal. It's main feature is fast navigation to predefined cue points in the media.

A visual overview over how quirli works.

Get started!

Examples:

  From a Youtube video  
  From an MP3 file  
  From a WAV file  
 Demo playlist  

How does it work?

  1. You enter a link to a media file or YouTube video you want to use.
  2. As the media plays, you press a button at the desired points in time to create cues. Name and edit the cues.
  3. Generate a link to quirli with your cues contained, for keeping as bookmark or to share with your frieds.
  4. Use the link to start playing from the cues.

Supported media types

Supported media types are mp3, wav, mp4, webm, ogv, ogg and youtube, given your browser can play it. The media is played using MediaelementJS.

Who can use it?

quirli is primarily aimed at musicians, singers and choir conductors who want to rehearse with playback music. You can however use it to provide access to specific parts of any media file regardless of it's content.

Troubleshooting

Media is not played at all
For certain media file types on certain browsers (e.g. mp3 on Firefox), you need to have the Macromedia Flash plugin installed, enabled and configured. This is expecially true, if you run quirli from the local filesystem. See how to configure flash for local filesystem usage.

Replayer

quirli aims to support and extend the existing Replayer desktop application for the Microsoft Windows OS.

API

Track API

quirli supports loading of a track directly by sending a specially crafted URL in the HTTP request to quir.li, like below:
http://quir.li/player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0VqTwnAuHws&title=What%20makes%20you%20beautiful&artist=The%20piano%20guys%20covering%20One%20Republic&album=Youtube&6.49=Intro&30.12=Knocking%20part&46.02=Real%20playing&51.5=Piano%20forte&93.32=Stringified&123.35=Vocals&139.38=Key%20cover%20jam&150.16=Good%20morning%20sky&173.96=Final%20chord
Location (http://quir.li/player.html)
Points to the location where the quirli player can be found. While this is usually the web address as in the example, you may also install a copy of quirli on your own server or even on a local disk.
Query delimiter (?)
Separates the location from the arguments, which also called the query part in the URL specification. The arguments are split by an ampersand & character and consist of a key, the equals operator = and the value. All arguments are optional, and their order is not relevant.
media argument (media=)
The URL to the media file to load for this track. The URL must be encoded to avoid interference with the other arguments. You may leave this out if you do not want to share the link to the media file or if the link points to a local file on your disk anyway.
title argument (title=)
The title for this track. You can set this to whatever you find suitable.
artist argument (artist=)
The artist performing this track. You can set this to whatever you find suitable.
album argument (album=)
The album or place where this track can be found. You can set this to whatever you find suitable.
cue argument(s) (nn.nn=XXX)
The cues to present, with their caption. The key is a floating point number indicating the position within the media file, in seconds from the start. You may use up to two digits after the decimal point. The value is a caption (free text, can also be empty) for the cue and can have any lenght. You can specify any number of cues. The order of the cue keys is reflected in the player view.
To be working with most browsers, a total lenght of the resulting URL of 2000 characters should not get exceeded.

Playlist API

To pre-load quirli with more than one track, you can use the playlist API. To do so, a specially crafted JSONP file with the name playlistcontent.jsonp can get delivered along with the player. Both the player (in the playlist view) and the fullsized playlist page then load the tracks from the JSONP file. Currently, the playlist can not get loaded from another location, nor via an URL query argument. This API will change later. Example:
callback_json1({
"title": "Demo playlist for various media formats",
"tracks": [
{"title":"Nice track from the Piano Guys (YouTube)","url":"player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0VqTwnAuHws&title=What%20makes%20you%20beautiful&artist=The%20piano%20guys%20covering%20One%20Republic&album=Youtube&6.49=Intro&30.12=Knocking%20part&46.02=Real%20playing&51.5=Piano%20forte&93.32=Stringified&123.35=Vocals&139.38=Key%20cover%20jam&150.16=Good%20morning%20sky&173.96=Final%20chord"},
{"title":"Dreaming with the Piano Guys (YouTube)","url":"player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjzF_y039slk&title=Over%20the%20Rainbow&artist=The%20Piano%20Guys&album=Youtube&0=Intro&7.46=Strummin'%20the%20cello&43.51=Piano%20appearance&89.11=Dreamin'%20away&164.24=Greenfield%20openair"},
{"title":"Space Shuttle Discovery Launch (YouTube)","url":"player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DxRVHylmxUk8&title=Discovery%20Launch%20Captured%20by%20Multiple%20Cameras&artist=NASATelevision&album=Youtube&0=Go%3F&30.89=Preparation&64.01=To%20the%20lauchpad&188.79=On%20the%20pad&257.75=Ignition&286.2=Lift-Off&346.73=The%20turn&447.20=Booster%20separation&510.92=Booster%20touchdown&535.14=Into%20space&629.79=Liquit%20tank%20separation&670.32=Orbiting&720.37=Farewell"},
{"title":"Beautiful song by Lidija Roos (mp3)","url":"player.html?v=0.21&media=media%2Flidija_roos-sweet_taste.mp3&title=Sweet%20taste&artist=Lidija%20Roos&album=Not%20for%20sale&0=Intro&15=Verse%201&45.5=Verse%202&75.94=Chorus&106.75=Verse%203&140.75=Chorus&172.07=Bridge&201.65=Chorus&232.65=Outro"},
{"title":"Echo trailer (mp4)","url":"player.html?media=media%2Fecho-hereweare.mp4&title=Here we are&artist=The echo conference&album=&0=We are here to&2.3=echo&31.02=Because&32.5=WE ARE&36.9=OF HIS HANDS"},
{"title":"Echo trailer (ogv)","url":"player.html?media=media%2Fecho-hereweare.ogv&title=Here we are&artist=The echo conference&album=&0=We are here to&2.3=echo&31.02=Because&32.5=WE ARE&36.9=OF HIS HANDS"},
{"title":"Echo trailer (webm)","url":"player.html?media=media%2Fecho-hereweare.webm&title=Here we are&artist=The echo conference&album=&0=We are here to&2.3=echo&31.02=Because&32.5=WE ARE&36.9=OF HIS HANDS"}
]
}
);            

Roadmap

See the Trello board for an updated roadmap. Your most wanted feature is missing? Add an issue to the GitHub repository or get in contact with the author.

Credits

Many thanks! quirli would not be possible without them!