cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .screen
  #waveform
  #waveform-timeline
-var row1cnt = 7
-var row2cnt = 6
-var row3cnt = 5
br
.row1
  .pad#0(onclick="playPad('pad8','#0')") Q
  .pad#1(onclick="playPad('pad9','#1')") W
  .pad#2(onclick="playPad('pad10','#2')") E
  .pad#3(onclick="playPad('pad11','#3')") R
  while row1cnt--
   .pad.fakepad
  input(id="zoom" type="range" min="0" max="200" value="0")
  .label Zoom
.row2
  .pad#4(onclick="playPad('pad4','#4')") A
  .pad#5(onclick="playPad('pad5','#5')") S
  .pad#6(onclick="playPad('pad6','#6')") D
  .pad#7(onclick="playPad('pad7','#7')") F
  while row2cnt--
    .pad.fakepad
  input(id="volume" type="range" min="1" max="100" value="40" orient="vertical")
  .label Volume
.row3
 .pad#8(onclick="playPad('pad0','#8')") Z
 .pad#9(onclick="playPad('pad1','#9')") X
 .pad#10(onclick="playPad('pad2','#10')") C
 .pad#11(onclick="playPad('pad3','#11')") V
 while row3cnt--
   .pad.fakepad
//- .controls 
//-   input(id="volume" type="range" min="1" max="00" value="50" style="width: 100%" orient="vertical")
            
          
!
            
              @import url(//fonts.googleapis.com/css?family=Bungee);
$tablet-width: 900px;
@mixin tablet {
 @media (min-width: #{$tablet-width}) {
  @content;
 }
}

html body {
 background: #222;
 color: #eee;
}

#volume,
#zoom {
 position: absolute;
 // order:3;
 width: 30%;
 right: 20vw;
 opacity: 0;
 z-index: 15;
}

.row2 {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}

.row3 {
 @extend .row2;
}

.row1 {
 @extend .row2;
 top: 250px;
}

.bang {
 animation-name: rotate;
 animation-duration: 1s;
 animation-iteration-count: infinite;
 animation-direction: normal;
}

@keyframes rotate {
 0% {
  filter: hue-rotate(360deg) saturate(1000%);
 }
 1% {
  filter: hue-rotate(220deg) saturate(1000%);
 }
 100% {
  filter: hue-rotate(220deg) saturate(1000%);
 }
}

region.wavesurfer-region[data-region-highlight] {
 border: 1px solid rgb(86, 180, 239);
 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

#waveform {
 background: rgb(35, 65, 114);
}

#waveform-timeline {
 background: #777;
}

.screen {
 border-style: solid;
 border-color: /* #222;// */
 #256896;
 border-width: 5px;
 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
}

.label {
 order: 2;
 position: absolute;
 margin-left: 14.5%;
 margin-top: -3.5%;
 opacity: 0;
 font-size: 1em;
 font-weight: 200;
 font-family: 'Bungee';
 @include tablet {
  margin-left: 35%;
  margin-top: 0%;
 }
}

p {
 background: #222;
}

.spacer {
 position: absolute;
 height: 148px;
 width: 200px;
}

.controls {
 position: absolute;
 align-items: center;
}

.padzone {
 margin: 0 18vw 0 18vw;
 position: absolute;
 background: #222;
 width: 64vw;
}

.padsBlock {
 margin: auto;
 width: 90vw;
 display: flex;
 flex-wrap: wrap;
 font-size: 200%;
 font-family: 'Bungee';
}

.padSpacer {
 margin: 0.5vw;
 width: 2vw;
 height: 7vw;
}

.pad {
 margin: 0.5vw;
 width: 5vw;
 height: 5vw;
 font-size: 150%;
 font-family: 'Bungee';
 border-style: solid;
 border-color: #ccc;
 border-width: 0.3vw;
 border-radius: 3%;
 justify-content: center;
 align-items: center;
 display: flex;
 overflow: hidden;
 z-index: 10;
 &.pressed {
  box-shadow: darken(lightgray, 10%) -0.1vw 0.1vw 0.1vw inset;
  font-size: 130%;
  top: 3px;
  color: #666;
 }
}

input[type=range] {
 -webkit-appearance: none;
 width: 100%;
 background: transparent;
 &::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #000000;
  height: 32px;
  width: 16px;
  border-radius: 3px;
  background: #222; //#ffffff;
  cursor: pointer;
  margin-top: -12px;
 }
 &:focus {
  outline: none;
 }
 &::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
 }
 &::-moz-range-thumb {
  border: 2px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #222; //#ffffff;
  cursor: pointer;
 }
 &::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #858fa0; //#3071a9;
 }
 &:focus::-webkit-slider-runnable-track {
  background: #858fa0; //#367ebd;
 }
 &::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #858fa0; //#3071a9;
 }
 &::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
 }
 &::-ms-fill-lower {
  background: #858fa0; //#2a6495;
 }
 &:focus::-ms-fill-lower {
  background: #858fa0; //#3071a9;
 }
 &::-ms-fill-upper {
  background: #858fa0; //#3071a9;
 }
 &:focus::-ms-fill-upper {
  background: #858fa0; //#367ebd;
 }
}

            
          
!
            
              'use strict';

var soundSource = 'https://res.cloudinary.com/dvabjvqjl/video/upload/v1481569623/samplePuke_mrat6q.mp3';

var zoom = document.querySelector('#zoom');
var volume = document.querySelector('#volume');
zoom.oninput = function () {
  wavesurfer.zoom(Number(this.value));
};

var wavesurfer = WaveSurfer.create({ 
  container: '#waveform',
  cursorColor: '#fff',
  waveColor: 'rgba(147, 188, 255,0.8)',
  progressColor: 'rgba(147, 188, 255,0.8)',
  hideScrollbar: true,
  splitChannels: true,/*
  backend: 'MediaElement' */
  scrollParent: true
});
wavesurfer.load(soundSource);

var sound;
var curRegion='0';

wavesurfer.on('ready', function () {
  var timeline = Object.create(WaveSurfer.Timeline);
  timeline.init({
    wavesurfer: wavesurfer,
    container: '#waveform-timeline'
  });
  for(var i=0;i<12;i++){
    wavesurfer.addRegion({
      id:''+i,
      start: regions['reg'+i].start,//i*2, // time in seconds
      end: regions['reg'+i].stop, //i*2+0.5, // time in seconds
      color: 'hsla('+i*10+', 100%, 50%, 0.3)',
      attributes: {
        highlight: true
    },
    });
  }
  for(var i=0;i<12;i++){  
  (function(){
  wavesurfer.regions.list[''+i].on('update',function(region){
      createsound();
    });
  }());
}
  createsound();
});
$(document).ready(() => {
  const tl = new TimelineLite();
  // tl.append(TweenLite.delayedCall(2.5, removeFakePads));
  tl.to('.fakepad', 2, {
    opacity: 0,
    },1,'first')
     .to('#volume,#zoom,.label',1,{
        opacity:1
        },3)
});
function removeFakePads() {
  $('.fakepad').remove();
  // console.log('TimeLineCallback');
  // $('#volume').css('visibility','visible');
}  
function createsound(){
  sound = new Howl({
  src: [soundSource],
    volume: Number(volume.value/100),
  sprite: {
    pad0: [getRegStart('0'), getRegDur('0')],
    pad1: [getRegStart('1'), getRegDur('1')],
    pad2: [getRegStart('2'), getRegDur('2')],
    pad3: [getRegStart('3'), getRegDur('3')],
    pad4: [getRegStart('4'), getRegDur('4')],
    pad5: [getRegStart('5'), getRegDur('5')],
    pad6: [getRegStart('6'), getRegDur('6')],
    pad7: [getRegStart('7'), getRegDur('7')],
    pad8: [getRegStart('8'), getRegDur('8')],
    pad9: [getRegStart('9'), getRegDur('9')],
    pad10: [getRegStart('10'), getRegDur('10')],
    pad11: [getRegStart('11'), getRegDur('11')]
  }});
}
function getRegStart(regId){// space
  return wavesurfer.regions.list[regId]['start']*1000;
}
function getRegDur(regId){// space
  return (wavesurfer.regions.list[regId]['end']*1000-wavesurfer.regions.list[regId]['start']*1000);
}
function PlayPause(){// space
  wavesurfer.playPause();
}

function playPad(pad,padId){
  sound.play(pad);
  $(padId).addClass('pressed');
  setTimeout(() => {
    $(padId).removeClass('pressed');
  }, 100);
  
  var curRegion = $("div").find("[data-id='"+pad.replace('pad','')+"']");
  var playingTime = wavesurfer.regions.list[pad.replace('pad','')]['end']*1000-wavesurfer.regions.list[pad.replace('pad','')]['start']*1000;
  var curBackground = wavesurfer.regions.list[pad.replace('pad','')]['color'];
  var per = 0;
  var progressBackground = curBackground.replace('50%','10%');
  
  if(playingRegions[pad]!=''){
    console.log(playingRegions[pad]);
    clearInterval(playingRegions[pad]);
  }
  
var intervalId = setInterval(() => { 
  playingRegions[pad] = intervalId;
    per+=10;
    if(per <= playingTime){
        curRegion.css({background: "linear-gradient(to right, "+progressBackground+" "+((per/playingTime)*100)+"%,"+curBackground+" "+((per/playingTime)*100)+"%,"+curBackground+" 100%)"});
    }else{
      curRegion.css({background: curBackground});
      clearInterval(intervalId);
    }
}, 10);
  
  
  
  $("div").find("[data-id='"+pad.replace('pad','')+"']").addClass( "bang" );
     setTimeout(function(){$("div").find("[data-id='"+pad.replace('pad','')+"']").removeClass( "bang" );},
                100);
}
$(document).keydown((e) => {
  switch (e.which) {
    case(90): //z
      playPad('pad0','#8');
      return;
    case(88): //x
      playPad('pad1','#9');
      return;
    case(67): //c
      playPad('pad2','#10');
      return;
    case(86): //v
      playPad('pad3','#11');
      return;
    case(65): //a
      playPad('pad4','#4');
      return;
    case(83): //s
      playPad('pad5','#5');
      return;
    case(68): //d
      playPad('pad6','#6');
      return;
    case(70): //f
      playPad('pad7','#7');
      return;
    case(81): //q
      playPad('pad8','#0');
      return;
    case(87): //w
      playPad('pad9','#1');
      return;
    case(69): //e
      playPad('pad10','#2');
      return;
    case(82): //r
      playPad('pad11','#3');
      return;
    case(32): //r
      wavesurfer.playPause();
      return;
  }
})


volume.oninput = function () {
  sound._volume=Number(volume.value/100);
};
var playingRegions = {
  'pad0':'',
  'pad1':'',
  'pad2':'',
  'pad3':'',
  'pad4':'',
  'pad5':'',
  'pad6':'',
  'pad7':'',
  'pad8':'',
  'pad9':'',
  'pad10':'',
  'pad11':'',

}
var regions ={
  reg0:{
    start:5.01,
    stop:6.5,
  },
  reg1:{
    start:2.4,
    stop:2.53,
  },
  reg2:{
     start:1.94,
    stop:2.141,
  },
  reg3:{
    start:3.3,
    stop:3.84,
  },
  reg4:{
    start:6.87,
    stop:8.96,
  },
  reg5:{
    start:13.92,
    stop:15.99,
  },
  reg6:{
    start:2.4,
    stop:2.53,
  },
  reg7:{
    start:36,
    stop:37,
  },
  reg8:{
    start:20.5,
    stop:34.8,
  },
  reg9:{
    start:37,
    stop:38,
  },
  reg10:{
    start:38,
    stop:39,
  },
  reg11:{
    start:4.322,
    stop:4.57,
  }
};
            
          
!
999px
Loading ..................

Console