Beispiellösung zur Textannotation mit Annotator.js

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

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

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
              integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
              crossorigin="anonymous">
        <link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">
        <style>
            @import url(https://fonts.googleapis.com/css?family=Roboto);
            body {
                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dbdbdb+0,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;
            }
        </style>
	</head>
	<body>

        <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="http://genius.com/Kendrick-lamar-swimming-pools-drank-lyrics">http://genius.com/Kendrick-lamar-swimming-pools-drank-lyrics</a>)
                    </div>

                    <p>
                        [Produced by T-Minus]</p>
                    <p>
                        [Bridge]<br>
                        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>
                    <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>
                    <p>
                        [Hook]<br>
                        &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>

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

            </div>

        </div>

        <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
                integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
                crossorigin="anonymous"></script>
        <script src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
        <script src="js/annotator.offline.min.js"></script>

        <script>

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

        </script>
	</body>
</html>

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.