LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Work it Make it Do it Makes us More than Hour Our Never
Harder Better Faster Stronger Ever After Work is Over
Normal High Low

#DaftPunKonsole.com

Made with by Malik Dellidj

CSS
@charset "UTF-8";
/* #DaftPunKonsole
 * Malik Dellidj - @Dathink
 *
 * There are existing apps or flash to do this, but no web version so here it is.
 * 
 * How to play :
 * You may notice that in the song all theses words are used
 * but sometimes in a different layout
 * e.g.
 * – Work it, make it, do it, makes us
 * – Harder, better, faster, stronger
 * –––
 * – Work it, harder, make it, better
 * – Do it, faster, makes us, stronger
 * 
 * Check the lyrics ! and the different tones to recreate over half of the song !
 * 
 * Many thanks to my work mates who helped me when I was stuck
 * 
 * Nb : Hey IE fellaz, get a browser : www.google.com/chrome, it's free !
 */
html, body {
  height: 100vh;
  width: 100vw;
}

body {
  font: normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: url(https://s.cdpn.io/190177/Daft_Punk_bg.svg) no-repeat center center #101012;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-font-smoothing: antialiased;
  color: #ffffff;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  background-size: 95%;
}

a {
  text-decoration: none;
  color: #404048;
}

.extra {
  color: #15d880;
}

.lyrics {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 3.625rem;
  position: relative;
}
.lyrics span {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  white-space: nowrap;
  font-weight: 500;
}
.Normal .lyrics span {
  color: #15d880;
  text-shadow: 0 0 0.625rem rgba(21, 216, 128, 0.2);
}
.High .lyrics span {
  color: #d43f57;
  text-shadow: 0 0 0.625rem rgba(212, 63, 87, 0.2);
}
.Low .lyrics span {
  color: #dfba69;
  text-shadow: 0 0 0.625rem rgba(223, 186, 105, 0.2);
}

.wk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}

.k {
  width: 39.375rem;
  padding-right: 2.5%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.k .r {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0.625rem;
}
.k .r:nth-child(1) i:nth-last-child(-n+4), .k .r:nth-child(1) i:nth-child(-n+4), .k .r:nth-child(2) i:nth-last-child(-n+4), .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #b3b3bb;
}
.k .r:nth-child(1) i:nth-last-child(-n+4):hover, .k .r:nth-child(1) i:nth-child(-n+4):hover, .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #15d880;
  border-color: #15d880;
}
.k .r:nth-child(1) i:nth-last-child(-n+4):active, .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .k .r:nth-child(1) i:nth-child(-n+4):active, .k .r:nth-child(1) i:nth-child(-n+4).is-active, .k .r:nth-child(2) i:nth-last-child(-n+4):active, .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .k .r:nth-child(2) i:nth-child(-n+4):active, .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #15d880;
  border-color: #15d880;
  box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4), .Normal .k .r:nth-child(1) i:nth-child(-n+4), .Normal .k .r:nth-child(2) i:nth-last-child(-n+4), .Normal .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #b3b3bb;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(1) i:nth-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .Normal .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #15d880;
  border-color: #15d880;
}
.Normal .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(1) i:nth-child(-n+4):active, .Normal .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .Normal .k .r:nth-child(2) i:nth-child(-n+4):active, .Normal .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #15d880;
  border-color: #15d880;
  box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4), .High .k .r:nth-child(1) i:nth-child(-n+4), .High .k .r:nth-child(2) i:nth-last-child(-n+4), .High .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #b3b3bb;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(1) i:nth-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-last-child(-n+4):hover, .High .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #d43f57;
  border-color: #d43f57;
}
.High .k .r:nth-child(1) i:nth-last-child(-n+4):active, .High .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(1) i:nth-child(-n+4):active, .High .k .r:nth-child(1) i:nth-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-last-child(-n+4):active, .High .k .r:nth-child(2) i:nth-last-child(-n+4).is-active, .High .k .r:nth-child(2) i:nth-child(-n+4):active, .High .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #d43f57;
  border-color: #d43f57;
  box-shadow: 0 0 0.75rem -0.125rem #d43f57;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4), .Low .k .r:nth-child(2) i:nth-child(-n+4) {
  color: #404048;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-child(-n+4):hover {
  color: #70707e;
  border-color: #70707e;
}
.Low .k .r:nth-child(1) i:nth-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-child(-n+4).is-active {
  color: #70707e;
  border-color: #70707e;
  box-shadow: 0 0 0.75rem -0.125rem #70707e;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4), .Low .k .r:nth-child(2) i:nth-last-child(-n+4) {
  color: #b3b3bb;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):hover, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):hover {
  color: #dfba69;
  border-color: #dfba69;
}
.Low .k .r:nth-child(1) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(1) i:nth-last-child(-n+4).is-active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4):active, .Low .k .r:nth-child(2) i:nth-last-child(-n+4).is-active {
  color: #dfba69;
  border-color: #dfba69;
  box-shadow: 0 0 0.75rem -0.125rem #dfba69;
}
.k .r:nth-child(2) {
  -webkit-transform: translateX(2.5%);
  transform: translateX(2.5%);
}
.k .r:nth-child(3) {
  margin-left: 8.5%;
  margin-right: 14%;
}
.Normal .k .r:nth-child(3) i:nth-child(1) {
  color: #15d880;
  border-color: #15d880;
  box-shadow: 0 0 0.75rem -0.125rem #15d880;
}
.Normal .k .r:nth-child(3) i:nth-child(1) b {
  background: #15d880;
}
.High .k .r:nth-child(3) i:nth-child(2) {
  color: #d43f57;
  border-color: #d43f57;
  box-shadow: 0 0 0.75rem -0.125rem #d43f57;
}
.High .k .r:nth-child(3) i:nth-child(2) b {
  background: #d43f57;
}
.Low .k .r:nth-child(3) i:nth-last-child(3) {
  color: #dfba69;
  border-color: #dfba69;
  box-shadow: 0 0 0.75rem -0.125rem #dfba69;
}
.Low .k .r:nth-child(3) i:nth-last-child(3) b {
  background: #dfba69;
}
.k .r:nth-child(3) i {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}
.k .r:nth-child(3) i b {
  background: #404048;
  color: #101012;
  border-radius: 0.5rem;
  padding: 0 0.3125rem;
  line-height: 0;
  margin-top: 0.3125rem;
}
.k i, .k .space {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #404048;
  border-radius: 0.375rem;
  height: 3.0625rem;
  font-size: 1rem;
  line-height: 0;
  border: 0.125rem solid #404048;
  position: relative;
  -webkit-transition: all 0.08s ease-in-out;
  transition: all 0.08s ease-in-out;
}
.k i:hover, .k .space:hover {
  border-color: #70707e;
  color: #70707e;
}
.k i:active, .k i.is-active, .k .space:active, .k .space.is-active {
  border-color: #70707e;
  color: #70707e;
  box-shadow: 0 0 0.5625rem -0.125rem #70707e;
  -webkit-transform: translateY(0.0625rem);
  transform: translateY(0.0625rem);
}
.k i {
  font-style: normal;
  width: 3.0625rem;
}
.k i span, .k i b {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.k i span {
  text-transform: uppercase;
  font-family: "Varela Round";
}
.k i b {
  font-size: 0.5625rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.k .space {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 48.5%;
  margin-left: 27.5%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: static;
}

.credits {
  font-size: 0.8125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.credits p {
  text-align: center;
}
.credits .links {
  margin: 0.3125rem 0;
}
.credits .links li {
  display: inline-block;
  padding: 0 0.625rem;
  border-right: 0.0625rem solid rgba(64, 64, 72, 0.35);
}
.credits .links li:last-child {
  border: 0;
}

.fa {
  color: #15d880;
}
.fa + a {
  color: #15d880;
}
.fa + a:hover {
  color: #15d880;
}

.fa-heart {
  color: #d43f57;
}

.jp-audio {
  color: #ffffff;
}

.modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: rgba(16, 16, 18, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.modal .daft-punk-logo {
  margin: 1.25rem 0 1.875rem;
}
.modal .btn {
  color: #0c7b49;
  border: 0.125rem solid #0c7b49;
  padding: 0.625rem 1.25rem;
  border-radius: 3.125rem;
  -webkit-transition: margin 0.3s ease;
  transition: margin 0.3s ease;
}
.modal .btn:hover {
  color: #0c7b49;
  border-color: #0c7b49;
  box-shadow: 0 0 0.75rem -0.125rem #0c7b49;
  text-shadow: 0 0 0.25rem rgba(12, 123, 73, 0.8);
}
.modal h1 {
  font-size: 2.5rem;
  font-weight: 100;
  margin: 0 0 1.875rem 0;
}
.modal h2 {
  font-size: 1.25rem;
  font-weight: 200;
  margin: 0 0 1.875rem 0;
}
.modal h2 a {
  color: #15d880;
}
.modal h2 a:hover {
  text-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8);
}
.modal ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.modal ul li {
  margin: 1.25rem;
}
.modal .fa {
  color: #15d880;
}
.modal .fa + a {
  color: #ffffff;
}
.modal .fa + a:hover {
  color: #15d880;
}
.modal .credit {
  margin: 1.25rem 0 0 0;
}

.jp-audio {
  position: relative;
}
.jp-audio .jp-controls {
  position: absolute;
}
.jp-audio .jp-controls button {
  background: transparent;
  border: 0;
  color: #70707e;
  text-transform: capitalize;
  font-size: 0.5625rem;
}
.jp-audio .jp-controls .jp-play:before {
  content: "";
  height: 0.3125rem;
  width: 0.3125rem;
  border-radius: 3.125rem;
  background: #70707e;
  display: inline-block;
  margin: 0.0625rem 0.1875rem;
}
.jp-audio.jp-state-playing .jp-controls .jp-play {
  color: #15d880;
  text-shadow: 0 0 0.125rem rgba(21, 216, 128, 0.8);
}
.jp-audio.jp-state-playing .jp-controls .jp-play:before {
  background: #15d880;
  box-shadow: 0 0 0.1875rem rgba(21, 216, 128, 0.8);
}
.High .jp-audio.jp-state-playing .jp-controls .jp-play {
  color: #d43f57;
  text-shadow: 0 0 0.125rem rgba(212, 63, 87, 0.8);
}
.High .jp-audio.jp-state-playing .jp-controls .jp-play:before {
  background: #d43f57;
  box-shadow: 0 0 0.1875rem rgba(212, 63, 87, 0.8);
}
.Low .jp-audio.jp-state-playing .jp-controls .jp-play {
  color: #dfba69;
  text-shadow: 0 0 0.125rem rgba(223, 186, 105, 0.8);
}
.Low .jp-audio.jp-state-playing .jp-controls .jp-play:before {
  background: #dfba69;
  box-shadow: 0 0 0.1875rem rgba(223, 186, 105, 0.8);
}
.jp-audio .jp-progress {
  height: 3.0625rem;
}
.jp-audio .jp-progress .jp-seek-bar {
  width: 100%;
  height: 100%;
}
.jp-audio .jp-progress .jp-seek-bar .jp-play-bar {
  background: rgba(64, 64, 72, 0.2);
  height: 100%;
}

.msg {
  background: #DF2828;
  color: white;
  padding: 0.625rem 0.9375rem;
  border-radius: 0.25rem;
  margin-bottom: 1.25rem;
}

del {
  text-decoration: line-through;
}
JS
initJson = (index_type) ->
  $.ajax(
    url: 'https://s.cdpn.io/190177/keyboard_.json'
    type: 'get'
    dataType: 'json')
  .done (data) ->
    _.each(data.keyboard.type[index_type].row, (row, index_row) ->
      _.each(row.key, (key, index_key) ->
        row_selected =  $(".r:nth-child(#{index_row+1})")
        span_selected =  $(row_selected).find("span")[index_key]
        $(span_selected).text(key.char)
        $(span_selected).parent('*[data-code]').attr('data-code', key.code)

      )
	    )

init = ->
  level = 'Normal'
  $('body').addClass 'Normal'
  $('.level').find('i[data-level=' + level + ']').addClass 'is-active'
  
ion.sound
  sounds: [
    {name:'beat'}
    {name:'WorkIt1'}
    {name:'MakeIt1'}
    {name:'DoIt1'}
    {name:'MakesUs1'}
    {name:'Harder1'}
    {name:'Better1'}
    {name:'Faster1'}
    {name:'Stronger1'}
    {name:'MoreThan1'}
    {name:'Hour1'}
    {name:'Our1'}
    {name:'Never1'}
    {name:'Ever1'}
    {name:'After1'}
    {name:'WorkIs1'}
    {name:'Over1'}
    {name:'WorkIt2'}
    {name:'MakeIt2'}
    {name:'DoIt2'}
    {name:'MakesUs2'}
    {name:'Harder2'}
    {name:'Better2'}
    {name:'Faster2'}
    {name:'Stronger2'}
    {name:'MoreThan2'}
    {name:'Hour2'}
    {name:'Our2'}
    {name:'Never2'}
    {name:'Ever2'}
    {name:'After2'}
    {name:'WorkIs2'}
    {name:'Over2'}
    {name:'MoreThan3'}
    {name:'Hour3'}
    {name:'Our3'}
    {name:'Never3'}
    {name:'Ever3'}
    {name:'After3'}
    {name:'WorkIs3'}
    {name:'Over3'}
    
  ]
  path: 'https://s.cdpn.io/190177/'
  preload: true

$ ->
  init()
  k = $('.k')
  
  $('.js-azerty').on 'click', (e) ->
    e.preventDefault()
    initJson(0)
    $('.k').addClass 'azerty'
    $(this).closest('.modal').remove()
    
  $('.js-qwerty').on 'click', (e) ->
    e.preventDefault()
    initJson(1)
    $('.k').addClass 'qwerty'
    $(this).closest('.modal').remove()

  $(document).keydown (e) ->
    e.preventDefault()
    code = e.keyCode or e.which
    key = $('[data-code=' + code + ']')

    if key.data('level')
      curClass = key.data('level')
      key.addClass('is-active')
      key.closest('.level').find('.is-active').not(key).removeClass('is-active')
      $('body').removeClass().addClass(curClass)
      
    else
      key.addClass('is-active')
      $('#js-lyrics').html('').find('span').addClass('fadeOutUp').html(key.data('lyric'))
    
    if $('.level').find('i.is-active').data('level') == 'Normal'
      if k.hasClass 'qwerty'
        switch code
          when 81
            ion.sound.play 'WorkIt1'
          when 87
            ion.sound.play 'MakeIt1'
          when 69
            ion.sound.play 'DoIt1'
          when 82
            ion.sound.play 'MakesUs1'

          when 65
            ion.sound.play 'Harder1'
          when 83
            ion.sound.play 'Better1'
          when 68
            ion.sound.play 'Faster1'
          when 70
            ion.sound.play 'Stronger1'

          when 85
            ion.sound.play 'MoreThan1'
          when 73
            ion.sound.play 'Hour1'
          when 79
            ion.sound.play 'Our1'
          when 80
            ion.sound.play 'Never1'

          when 74
            ion.sound.play 'Ever1'
          when 75
            ion.sound.play 'After1'
          when 76
            ion.sound.play 'WorkIs1'
          when 186, 59
            ion.sound.play 'Over1'
      else
        switch code
          when 65
            ion.sound.play 'WorkIt1'
          when 90
            ion.sound.play 'MakeIt1'
          when 69
            ion.sound.play 'DoIt1'
          when 82
            ion.sound.play 'MakesUs1'

          when 81
            ion.sound.play 'Harder1'
          when 83
            ion.sound.play 'Better1'
          when 68
            ion.sound.play 'Faster1'
          when 70
            ion.sound.play 'Stronger1'

          when 85
            ion.sound.play 'MoreThan1'
          when 73
            ion.sound.play 'Hour1'
          when 79
            ion.sound.play 'Our1'
          when 80
            ion.sound.play 'Never1'

          when 74
            ion.sound.play 'Ever1'
          when 75
            ion.sound.play 'After1'
          when 76
            ion.sound.play 'WorkIs1'
          when 77
            ion.sound.play 'Over1'

    else if $('.level').find('i.is-active').data('level') == 'High'
      if k.hasClass 'qwerty'
        switch code
          when 81
            ion.sound.play 'WorkIt2'
          when 87
            ion.sound.play 'MakeIt2'
          when 69
            ion.sound.play 'DoIt2'
          when 82
            ion.sound.play 'MakesUs2'

          when 65
            ion.sound.play 'Harder2'
          when 83
            ion.sound.play 'Better2'
          when 68
            ion.sound.play 'Faster2'
          when 70
            ion.sound.play 'Stronger2'

          when 85
            ion.sound.play 'MoreThan2'
          when 73
            ion.sound.play 'Hour2'
          when 79
            ion.sound.play 'Our2'
          when 80
            ion.sound.play 'Never2'

          when 74
            ion.sound.play 'Ever2'
          when 75
            ion.sound.play 'After2'
          when 76
            ion.sound.play 'WorkIs2'
          when 186, 59
            ion.sound.play 'Over2'
      else
        switch code
          when 65
            ion.sound.play 'WorkIt2'
          when 90
            ion.sound.play 'MakeIt2'
          when 69
            ion.sound.play 'DoIt2'
          when 82
            ion.sound.play 'MakesUs2'

          when 81
            ion.sound.play 'Harder2'
          when 83
            ion.sound.play 'Better2'
          when 68
            ion.sound.play 'Faster2'
          when 70
            ion.sound.play 'Stronger2'

          when 85
            ion.sound.play 'MoreThan2'
          when 73
            ion.sound.play 'Hour2'
          when 79
            ion.sound.play 'Our2'
          when 80
            ion.sound.play 'Never2'

          when 74
            ion.sound.play 'Ever2'
          when 75
            ion.sound.play 'After2'
          when 76
            ion.sound.play 'WorkIs2'
          when 77
            ion.sound.play 'Over2'
          
    else if $('.level').find('i.is-active').data('level') == 'Low'
      if k.hasClass 'qwerty'
        switch code
          when 85
            ion.sound.play 'MoreThan3'
          when 73
            ion.sound.play 'Hour3'
          when 79
            ion.sound.play 'Our3'
          when 80
            ion.sound.play 'Never3'

          when 74
            ion.sound.play 'Ever3'
          when 75
            ion.sound.play 'After3'
          when 76
            ion.sound.play 'WorkIs3'
          when 186, 59
            ion.sound.play 'Over3'
      else
        switch code
          when 85
            ion.sound.play 'MoreThan3'
          when 73
            ion.sound.play 'Hour3'
          when 79
            ion.sound.play 'Our3'
          when 80
            ion.sound.play 'Never3'

          when 74
            ion.sound.play 'Ever3'
          when 75
            ion.sound.play 'After3'
          when 76
            ion.sound.play 'WorkIs3'
          when 77
            ion.sound.play 'Over3'
        
       
  $(document).keyup (e) ->
    e.preventDefault()
    code = e.keyCode or e.which
    key = $('[data-code=' + code + ']')
    
    if !key.data('level')
      key.removeClass('is-active')
  
  $('#js-daft_1').jPlayer
    ready: (event) -> 
      $(this).jPlayer 'setMedia',
        m4a: 'https://s.cdpn.io/190177/instru.mp3'
    supplied: 'm4a'
    wmode: 'window'
    autoBlur: false
    useStateClassSkin: true
    smoothPlayBar: true 
    keyEnabled: true
    toggleDuration: true
    remainingDuration: true
    keyBindings: 
      play:
        key: 32
        fn: (f) ->
          if f.status.paused
            f.play()
          else
            f.pause()
      muted:
        key: 0 
        fn: (f) ->
          f._muted !f.options.muted
      volumeUp:
        key: 0
        fn: (f) ->
          f.volume f.options.volume + 0.1
      volumeDown:
        key: 0
        fn: (f) ->
          f.volume f.options.volume - 0.1

Description

A console to recreate the famous "Harder, Better, Faster, Stronger" by Daft Punk. Use your keyboard ! not the mouse (hey, it's a console). Use the other keys to get different sounds (Normal, High, Low).
Term
Mon, 11/27/2017 - 21:19

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv