LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



YOU CAN PLAY THE BLUES!
G4
A4
C5
D5
E5
G5
A5
C6
D6
D#6
E6
G6
A6
C7
D7
CSS
nav {
  background-color: #221C44;
  height: 52px;
  font-family: 'Roboto', sans-serif;
  color: #969DA2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  font-size: 14px;
  line-height: 17px;
  position: relative;
  z-index: 2;
}
nav .rewind {
  margin-left: 28px;
  height: 16px;
  cursor: pointer;
}
nav .play {
  margin-left: 24px;
  height: 24px;
  cursor: pointer;
}
nav .play-icon:hover path, nav .play-icon:hover rect,
nav .rewind-icon:hover path,
nav .rewind-icon:hover rect,
nav .pause-icon:hover path,
nav .pause-icon:hover rect {
  fill: #566574;
}
nav .pause-icon {
  display: none;
}
nav .controls {
  display: flex;
  align-items: center;
}
nav .social a {
  font-size: 24px;
  color: #A8B5C2;
  margin-left: 18px;
}
nav .social a:hover {
  color: #566574;
}

.loading {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}
.loading .progress {
  transition: width 0.3s linear;
}

.notes {
  display: flex;
  height: 0;
  opacity: 0;
  transition: opacity 1s ease;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.notes .note {
  height: 132px;
}
.notes .note > div {
  height: 100%;
  width: 32px;
  border-radius: 16px;
  background-color: #D8D8D8;
  color: #541F5D;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
  text-align: center;
  box-sizing: border-box;
  padding: 5px 0;
  box-shadow: 0 7px 8px rgba(0, 0, 0, 0.16);
}
.notes .note:hover div {
  background-color: #FF6545;
  color: #fff;
}
.notes .note.key {
  height: 172px;
}
.notes .note.key > div {
  background-color: #ECDCCA;
}
.notes .note.key:hover > div {
  background-color: #FF6545;
  color: #fff;
}
.notes .note:not(:first-child) > div {
  margin-left: 8px;
}
.notes .note:not(:last-child) > div {
  margin-right: 8px;
}
.notes .note span {
  font-size: 0.7em;
}

.guitar {
  width: 96%;
  min-width: 772px;
  position: fixed;
  bottom: 0;
  right: 0;
}
.guitar.visible {
  transition: opacity 0.5s ease;
}
.guitar img {
  width: 100%;
  display: block;
  pointer-events: none;
}
.guitar .circle {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/switch.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 5vw;
  height: 5vw;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  position: absolute;
  right: 44.5%;
  top: 33.5%;
  cursor: pointer;
}
.guitar .circle.rock {
  background-position: 0 100%;
}
.guitar .circle.rock:before {
  color: #FFF;
}
.guitar .circle.rock:after {
  color: #C17CA4;
}
.guitar .circle:before, .guitar .circle:after {
  font-weight: 700;
  font-size: 12px;
  line-height: 13px;
  text-align: center;
  display: block;
  position: relative;
  transition: color 0.3s ease;
}
.guitar .circle:before {
  content: "ROCK";
  top: -14px;
  color: #C17CA4;
}
.guitar .circle:after {
  content: "BLUES";
  top: 100%;
  color: #FFF;
  position: absolute;
  width: 100%;
  margin-top: 2px;
}

body {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/bluesman_background.svg), linear-gradient(-180deg, #242150 5%, #572250 91%);
  background-size: cover;
  background-position: center;
  margin: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: 'Roboto', sans-serif;
}
body * {
  user-select: none;
}

html,
body {
  height: 100%;
  min-width: 726px;
}
JS
class Guitar {
  
  constructor(context, buffer) {
    this.context = context;
    this.buffer = buffer;
  }
  
  setup() {
    this.gainNode = this.context.createGain();
    this.source = this.context.createBufferSource();
    this.source.buffer = this.buffer;
    this.source.connect(this.gainNode);
    this.gainNode.connect(this.context.destination);
    
    this.gainNode.gain.setValueAtTime(0.8, this.context.currentTime);
  }

  play() {
    this.setup();
    this.source.start(this.context.currentTime);
  }
  
  stop() {
    var ct = this.context.currentTime + 0.5;
    this.gainNode.gain.exponentialRampToValueAtTime(0.001, ct);
    this.source.stop(ct);
  }
  
}

class Buffer {
  
  constructor(context, urls) {  
    this.context = context;
    this.urls = urls;
    this.buffer = [];
  }
  
  loadSound(url, index) {
    let request = new XMLHttpRequest();
    request.open('get', url, true);
    request.responseType = 'arraybuffer';
    let thisBuffer = this;
    request.onload = function() {
      // Safari doesn't support promise based syntax
      thisBuffer.context
        .decodeAudioData(request.response, function(buffer) {
          thisBuffer.buffer[index] = buffer;
          updateProgress(thisBuffer.urls.length);
          if(index == thisBuffer.urls.length-1) {
            thisBuffer.loaded();
          }       
        });
    };
    request.send();
  };
  
  getBuffer() {
    this.urls.forEach((url, index) => {
      this.loadSound(url, index);
    })
  }
  
  loaded() {
    document.querySelector('.loading').style.opacity = 0;
    document.querySelector('.loading').style.height = 0;
    document.querySelector('.notes').style.height = "auto";
    document.querySelector('.notes').style.opacity = 1;
    loaded = true;
  }
  
  getSound(index) {
    return this.buffer[index];
  }

}

let progressBar = document.querySelector('.progress');
let iteration = 0;

function updateProgress(total) {
  progressBar.style.width = ++iteration/total * 100 + '%';
}

let guitar = null;
let preset = 0;
let loaded = false;

function playGuitar() {
  let index = parseInt(this.dataset.note) + preset;
  guitar = new Guitar(context, buffer.getSound(index));
  guitar.play();
}

function stopGuitar() {
  guitar.stop();
}

let context = new (window.AudioContext || window.webkitAudioContext)();

let sounds = [
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/G4.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/A4.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/C5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/D5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/E5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/G5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/A5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/C6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/D6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/D%236.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/E6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/G6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/A6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/C7.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/D7.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_G4.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_A4.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_C5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_D5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_E5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_G5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_A5.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_C6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_D6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_D%236.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_E6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_G6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_A6.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_C7.mp3',
  'https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/d_D7.mp3'
];


let buffer = new Buffer(context, sounds);
let guitarSound = buffer.getBuffer();

let buttons = document.querySelectorAll('.notes .note');
buttons.forEach(button => {
  button.addEventListener('mouseenter', playGuitar.bind(button));
  button.addEventListener('mouseleave', stopGuitar);
})


let audio = document.querySelector('audio');
let play  = document.querySelector('.play');
let rewind = document.querySelector('.rewind');
let circle = document.querySelector('.circle');

audio.addEventListener('pause', pauseTrack);
audio.addEventListener('play', playTrack);

play.addEventListener('click', () => {
 if(audio.paused) {
   audio.play();
   playTrack();
 } else {
   audio.pause();
   pauseTrack();
 } 
})
rewind.addEventListener('click', () => {
  audio.currentTime = 0;
})
circle.addEventListener('click', () => {
  preset = (preset == 0) ? 15 : 0;
  circle.classList.toggle('rock');
})
audio.addEventListener('ended', () => {
  pauseTrack();
});

function playTrack() {  
  play.querySelector('.pause-icon').style.display = "block";
  play.querySelector('.play-icon').style.display = "none";
}

function pauseTrack() {
  play.querySelector('.pause-icon').style.display = "none";
  play.querySelector('.play-icon').style.display = "block";
}
Host Instantly Drag and Drop Website Builder

 

Description

This instrument lets anybody play the blues. Play the backing track on and move the cursor over the keys
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID