Update audio files

«Fork me» badge
artpolikarpov · Sep 5, 2012 · 692aa29 · 692aa29
1 parent d6f2c56
commit 692aa29
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 124 deletions.
diff --git a/audio/a6ce8991ce50.ogg b/audio/a6ce8991ce50.ogg
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
   <title>Garmoshka</title>
   <link rel="stylesheet" href="stylesheets/accordion.css">
 
@@ -11,7 +12,9 @@
 <body>
 
 <div class="garmoshka" id="garmoshka">
-  <audio src="audio/a6ce8991ce50.mp3" loop preload="auto"></audio>
+  <!-- Геннадий Васильев - шуйская гармонь (хромка in-B), черепашка in-B и ногофон -->
+  <!-- «На ярмарке» -->
+  <audio src="audio/a6ce8991ce50.ogg" loop preload="auto"></audio>
 
   <div class="melody">
     <div class="panel">
@@ -64,7 +67,23 @@
       </div>
     </div>
   </div>
+
+  <!-- Fork me -->
+  <style>
+    .fork-me {
+      opacity: .5;
+    }
+    .fork-me:hover {
+      opacity: 1;
+    }
+  </style>
+  <a href="https://github.com/artpolikarpov/garmoshka" class="fork-me">
+    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
+  </a>
+  <!-- /Fork me -->
+
 </div>
 
+
 </body>
 </html>
diff --git a/javascripts/garmoshka.js b/javascripts/garmoshka.js
@@ -30,6 +30,11 @@
       _this.audio = $('audio', _this.$garmoshka).get(0);
       _this.audio.volume = 0;
 
+      if (!_this.audio.canPlayType('audio/ogg')) {
+        // Если .ogg никак, меняем на .mp3
+        _this.audio.src = _this.audio.src.replace('.ogg', '.mp3');
+      }
+
       _this.$melodyButtons = $('.melody b', _this.$garmoshka);
       _this.melodyButtonsSize = _this.$melodyButtons.size();
       _this.$chordsButtons = $('.chords b', _this.$garmoshka);
@@ -56,7 +61,7 @@
       }
     }
 
-    _this.play = function(volume) {
+    _this.play = function(volume, magic) {
       if (!volume) volume = 100;
       if (!_this.playFLAG) {
         _this.playFLAG = true;
@@ -66,7 +71,9 @@
           time: options.fadeTime / 1000,
           onStart: function() {
             _this.audio.play();
-            _this.buttonMagicStart();
+            if (magic) {
+              _this.buttonMagicStart();
+            }
           }
         });
       }
@@ -94,7 +101,6 @@
     }
 
     _this.buttonMagic = function() {
-      console.log('buttonMagic');
       _this.$allButtons.removeClass('active');
       // Сколько кнопок нажать в правом ряду, 1-3
       var melodyButtonsSize = getRandomInt(1, 2);
@@ -119,7 +125,7 @@
       var garmoshkaWidth = _this.$garmoshka.width();
       if (e.type == 'resize' && garmoshkaWidth != _this.garmoshkaWidth) {
         // Играем на гармошке, реагируем только на изменение ширины гармошки
-        _this.play();
+        _this.play(100, true);
         clearTimeout(_this.playTimeout);
         _this.playTimeout = setTimeout(function(){
           // Если мех не тянуть гармошка замолчит

diff --git a/sass/accordion.sass b/sass/accordion.sass
@@ -46,7 +46,7 @@ $chordsButtonSize: 22px
     bottom: 0
     left: 0
     width: $melodyWidth
-    +background(linear-gradient(#101010, #232323 75%, #0f0f0f))
+    +background(linear-gradient(#232221, #333333 75%, #1e1d1f))
 
     .panel
       position: absolute
@@ -124,26 +124,29 @@ $chordsButtonSize: 22px
     .slice
       position: absolute
       width: 100% / $bellowsSliceSize
-      top: 10px
-      bottom: 10px
+      top: 20px
+      bottom: 20px
       +perspective(500)
       &:before, &:after
         content: ''
         position: absolute
-        top: -10px
-        bottom: -10px
-        width: $bellowsSliceBorderWidth / 2
+        top: -20px
+        bottom: -20px
+        width: $bellowsSliceBorderWidth
         background: red
         z-index: 10
+        left: - $bellowsSliceBorderWidth / 2
+        +border-radius(3px)
       &:before
-        left: 0
-        +background(linear-gradient(left, #9fa79f, #727272))
-        +border-right-radius(3px)
+        +background(linear-gradient(left,  #120812, #686d68, #969996, #c6d1c6, #686768))
       &:after
-        right: 0
-        +background(linear-gradient(left, #3e3e3e, #707270, #9fa79f))
-        +border-left-radius(3px)
-      &:first-child:before, &:last-child:after
+        +background(linear-gradient(left,#495749, #260f26, #dce8dc, #f5fff5, #241024), linear-gradient(left,  #495749, #260f26, #dce8dc, #f5fff5, #241024), linear-gradient(left,  #131013, #363036, #757475, #adb6ad, #281e28), linear-gradient(left,  #131013, #363036, #757475, #adb6ad, #281e28))
+
+        background-position: 0 0, 0 100%, 0 0, 0 100%
+        +background-size((100% 15px), (100% 15px), (100% 17px), (100% 17px))
+        background-repeat: no-repeat
+
+      &:first-child:before, &:first-child:after
         display: none
 
       .l, .r
@@ -170,7 +173,7 @@ $chordsButtonSize: 22px
     bottom: 0
     right: 0
     width: $chordsWidth
-    +background(linear-gradient(#101010, #232323 75%, #0f0f0f))
+    +background(linear-gradient(#232221, #333333 75%, #1e1d1f))
     .panel
       position: absolute
       top: 0