Beispiellösung zur Textannotation mit Annotator.js

"Swimming Pools" (Kendrick Lamar), annotiert mit Annotator.js

<!DOCTYPE html>
		<meta charset="utf-8">
		<meta name="author" content="Jan G. Wieners">
		<title>(Text)Annotation mit Annotator.js - Lyrics</title>

        <link rel="stylesheet" href=""
        <link rel="stylesheet" href="">
            @import url(;
            body {
                /* Permalink - use to edit and share this gradient:,adadad+100 */
                background: rgb(219,219,219); /* Old browsers */
                background: -moz-linear-gradient(top,  rgba(219,219,219,1) 0%, rgba(173,173,173,1) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top,  rgba(219,219,219,1) 0%,rgba(173,173,173,1) 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom,  rgba(219,219,219,1) 0%,rgba(173,173,173,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#adadad',GradientType=0 ); /* IE6-9 */

                font-family: 'Roboto', sans-serif;
                font-size: 1.9em;
                color: #333;

            h1 {
                font-size: 2.0em;

            p {
                margin: 25px 0 25px 0;

            #sourceinfo {
                font-size: 0.7em;

        <div class="container-fluid">

            <div class="row">

                <div class="col-md-5 col-md-offset-3" id="lyrics">
                    <h1>Swimming Pools (Drank)</h1>
                    <h2>Kendrick Lamar</h2>
                    <div id="sourceinfo">
                        (Lyrics from <a href=""></a>)

                        [Produced by T-Minus]</p>
                        Pour up (Drank), head shot (Drank)<br>
                        Sit down (Drank), stand up (Drank)<br>
                        Pass out (Drank), wake up (Drank)<br>
                        Faded (Drank), faded (Drank)</p>
                        [Verse 1]<br>
                        Now I done grew up &#39;round some people livin&#39; their life in bottles<br>
                        Granddaddy had the golden flask, backstroke every day in Chicago<br>
                        Some people like the way it feels, some people wanna kill their sorrows<br>
                        Some people wanna fit in with the popular, that was my problem<br>
                        I was in a dark room, loud tunes, looking to make a vow soon<br>
                        That I&#39;ma get fucked up, fillin&#39; up my cup, I see the crowd mood<br>
                        Changin&#39; by the minute and the record on repeat<br>
                        Took a sip then another sip, then somebody said to me:</p>
                        &quot;Nigga, why you babysitting only two or three shots?<br>
                        I&#39;mma show you how to turn it up a notch<br>
                        First you get a swimming pool full of liquor, then you dive in it<br>
                        Pool full of liquor, then you dive in it<br>
                        I wave a few bottles, then I watch &#39;em all flock<br>
                        All the girls wanna play Baywatch<br>
                        I got a swimming pool full of liquor and they dive in it<br>
                        Pool full of liquor, I&#39;mma dive in it&quot;</p>

                <div class="col-md-4" id="video" style="position: static;">
                    <iframe src="" width="100%" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>



        <script src=""></script>
        <script src=""
        <script src=""></script>
        <script src="js/annotator.offline.min.js"></script>


            // Start Annotator.js
            var lyrics = $('#lyrics').annotator();
            // Start offline storage plugin (has to be downloaded from
            lyrics.annotator("addPlugin", "Offline");



Comments are closed, but trackbacks and pingbacks are open.