added images

.gitignore

@@ -8,7 +8,6 @@
 *.mov
 *.avi
 *.mpg
-*.png
 *.jpg
 *.jpeg
 *.gif

README

@@ -4,6 +4,7 @@ Learning music by ear
 
 ## TODO
 
+- Main waveform selection style
 - Extending current selection (arrows keys)
 - Single shot button (space bar)
 - Loop button (shift space)

css/sass/_colors.scss

@@ -3,4 +3,5 @@ $innergreen: #00A692;
 $hovergreen: #0F766E;
 $selectionlight: #858686;
 $selectiondark: #454646;
-$selectioninfogrey:#C3C4C6;
+$selectioninfogrey:#C3C4C6;
+$background:#F3F3F4;

css/sass/screen.scss

@@ -10,6 +10,7 @@
 body {
 	font-family: 'Dosis', Arial, sans-serif;
 	text-align:center;
+// 	background:$background;
 }
 
 h1, h2, h3, h4, h5 h6 {
@@ -22,6 +23,16 @@ h1 {
 	margin: 20px 0 20px;
 }
 
+button {
+	background: transparent;
+	border: 0;
+	margin: 0;
+}
+
+button:hover {
+	cursor:pointer
+}
+
 .time {
 	letter-spacing: 2px;
 }
@@ -41,10 +52,6 @@ h1 {
 		margin:0;
 	}
 
-	.markerButton:hover {
-		cursor:pointer;
-	}
-
 	.markerButton:hover, .markerButton.current {
 		background:$hovergreen;
 	}
@@ -111,3 +118,32 @@ h1 {
 		}
 	}
 }
+
+#playbackControls {
+	margin:32px 0;
+
+	button {
+		display:inline-block;
+		width:25px;
+		height:25px;
+		margin:0 5px;
+	}
+
+	#play {
+		background: url("../../images/playsprite.png") no-repeat top left;
+		background-position: 0 0; width: 19px; height: 21px;
+	}
+
+	#play:hover {
+		background-position: 0 -71px; width: 19px; height: 22px;
+	}
+
+	#loop {
+		background-position: 0 0; width: 25px; height: 25px;
+		background: url("../../images/loopsprite.png") no-repeat top left;
+	}
+
+	#loop:hover {
+		background-position: 0 -75px; width: 25px; height: 25px;
+	}
+}

css/stylesheets/screen.css

@@ -74,28 +74,40 @@ body {
   text-align: center;
 }
 
-/* line 15, ../sass/screen.scss */
+/* line 16, ../sass/screen.scss */
 h1, h2, h3, h4, h5 h6 {
   font-weight: 700;
   color: #00c4b3;
 }
 
-/* line 20, ../sass/screen.scss */
+/* line 21, ../sass/screen.scss */
 h1 {
   font-size: 96px;
   margin: 20px 0 20px;
 }
 
-/* line 25, ../sass/screen.scss */
+/* line 26, ../sass/screen.scss */
+button {
+  background: transparent;
+  border: 0;
+  margin: 0;
+}
+
+/* line 32, ../sass/screen.scss */
+button:hover {
+  cursor: pointer;
+}
+
+/* line 36, ../sass/screen.scss */
 .time {
   letter-spacing: 2px;
 }
 
-/* line 29, ../sass/screen.scss */
+/* line 40, ../sass/screen.scss */
 #markerControls {
   margin-top: 60px;
 }
-/* line 32, ../sass/screen.scss */
+/* line 43, ../sass/screen.scss */
 #markerControls .markerButton {
   background: #00c4b3;
   border: 0;
@@ -107,77 +119,111 @@ h1 {
   font-weight: 200;
   margin: 0;
 }
-/* line 44, ../sass/screen.scss */
-#markerControls .markerButton:hover {
-  cursor: pointer;
-}
-/* line 48, ../sass/screen.scss */
+/* line 55, ../sass/screen.scss */
 #markerControls .markerButton:hover, #markerControls .markerButton.current {
   background: #0f766e;
 }
 
-/* line 53, ../sass/screen.scss */
+/* line 60, ../sass/screen.scss */
 #info {
   line-height: 150px;
   font-size: 40px;
   color: black;
 }
 
-/* line 59, ../sass/screen.scss */
+/* line 66, ../sass/screen.scss */
 #info, #waveformWrap, #selectionWrap {
   margin: 0 auto;
 }
 
-/* line 63, ../sass/screen.scss */
+/* line 70, ../sass/screen.scss */
 #info, #waveformWrap, #canvasContainer {
   width: 1200px;
   height: 150px;
 }
 
-/* line 68, ../sass/screen.scss */
+/* line 75, ../sass/screen.scss */
 #waveformWrap {
   position: relative;
 }
-/* line 70, ../sass/screen.scss */
+/* line 77, ../sass/screen.scss */
 #waveformWrap #songDuration {
   position: absolute;
   right: 10px;
   bottom: -20px;
   color: #00c4b3;
 }
 
-/* line 78, ../sass/screen.scss */
+/* line 85, ../sass/screen.scss */
 #selectionWrap {
   width: 400px;
 }
-/* line 82, ../sass/screen.scss */
+/* line 89, ../sass/screen.scss */
 #selectionWrap #secondCanvasContainer {
   width: 400px;
   height: 150px;
 }
-/* line 86, ../sass/screen.scss */
+/* line 93, ../sass/screen.scss */
 #selectionWrap #secondCanvasContainer canvas {
   border: 1px solid #c3c4c6;
 }
-/* line 90, ../sass/screen.scss */
+/* line 97, ../sass/screen.scss */
 #selectionWrap #selectionInfo {
   border: 1px solid #c3c4c6;
   height: 32px;
   width: 400px;
   background: #c3c4c6;
   position: relative;
 }
-/* line 98, ../sass/screen.scss */
+/* line 105, ../sass/screen.scss */
 #selectionWrap #selectionInfo span {
   position: absolute;
   color: #454646;
   line-height: 32px;
 }
-/* line 105, ../sass/screen.scss */
+/* line 112, ../sass/screen.scss */
 #selectionWrap #selectionInfo #selectionStart {
   left: 10px;
 }
-/* line 109, ../sass/screen.scss */
+/* line 116, ../sass/screen.scss */
 #selectionWrap #selectionInfo #selectionEnd {
   right: 10px;
 }
+
+/* line 122, ../sass/screen.scss */
+#playbackControls {
+  margin: 32px 0;
+}
+/* line 125, ../sass/screen.scss */
+#playbackControls button {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  margin: 0 5px;
+}
+/* line 132, ../sass/screen.scss */
+#playbackControls #play {
+  background: url("../../images/playsprite.png") no-repeat top left;
+  background-position: 0 0;
+  width: 19px;
+  height: 21px;
+}
+/* line 137, ../sass/screen.scss */
+#playbackControls #play:hover {
+  background-position: 0 -71px;
+  width: 19px;
+  height: 22px;
+}
+/* line 141, ../sass/screen.scss */
+#playbackControls #loop {
+  background-position: 0 0;
+  width: 25px;
+  height: 25px;
+  background: url("../../images/loopsprite.png") no-repeat top left;
+}
+/* line 146, ../sass/screen.scss */
+#playbackControls #loop:hover {
+  background-position: 0 -75px;
+  width: 25px;
+  height: 25px;
+}

index.html

@@ -10,7 +10,7 @@
 </head>
 <body>
 	<h1>Lyrebird</h1>
-	<img src="images/lineopacity.png">
+	<img src="images/linea.png">
 
 	<div id="markerControls">
 		<button class="markerButton current" id="sections">Sections</button>
@@ -32,5 +32,10 @@ <h1>Lyrebird</h1>
 			<span class="time" id="selectionEnd"></span>
 		</div>
 	</div>
+	<div id="playbackControls">
+		<button id="play"></button>
+		<button id="loop"></button>
+	</div>
+	<img src="images/linea.png">
 </body>
 </html>