Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel includes JSX processing.

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.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                %audio#player{:src=>"https://s3-us-west-2.amazonaws.com/s.cdpn.io/61062/170417__eelke__bang-03-clean.mp3"}

.audio-navi
  .play

.info
  %h1 store audio data as json 
  %p look in your chrome console and click play
              
            
!

CSS

              
                *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{
  width:100%;
  height:100%;
}
body{
  overflow:hidden;
  font-family: 'Roboto', sans-serif;
}

$color : tomato;
$size : 5em;

.play{
  top:0;
  left:$size;
  right:0;
  bottom:0;
  margin:auto;
  position:absolute;
  width:0;
  height:0;
  cursor:pointer;
  border-left:$size solid $color; 
  border-top:$size*.5  solid transparent;
  border-right:$size solid transparent;
  border-bottom:$size*.5 solid transparent;
  
  &.on{
    transform:translateX(-$size/2);
    border-left:$size*.5 solid $color; 
    border-top:$size*.5  solid $color;
    border-right:$size*.5 solid $color;
    border-bottom:$size*.5 solid $color;  
  }
  
  &.off{
    width:0;
    height:0;
    border-left:$size solid $color; 
    border-top:$size*.5  solid transparent;
    border-right:$size solid transparent;
    border-bottom:$size*.5 solid transparent;    
  }
}


.audio-navi{
  
}

.info{
  bottom:0;
  width: 100%;
  position:absolute;
  padding:2em;
  background:#eee;
}
              
            
!

JS

              
                //////////////////////////////////////////////////////
///// Equalize Context fpr Audio
//////////////////////////////////////////////////////
var context;
if (typeof AudioContext !== "undefined") {
	context = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
	context = new webkitAudioContext();
} else {
    //return;
  }

//////////////////////////////////////////////////////
/////	Some Variables
//////////////////////////////////////////////////////

var $audioData = new Array();
var group;
var currCount = 0;
var $max = 10; 
var onScreen = [];

//////////////////////
// Player Settings
/////////////////////
var $player = $("#player");
var $player_src = $player.get(0);
		$player_src.round_duration = Math.round($player_src.duration);
	
	// Mute Audio
	//	$player_src.muted = true;

//////////////////////
// Timeline
/////////////////////

var $head_navi = $('.audio-navi');
var $timeline = $('.time');
var $duration = $player_src.duration;
var $timeLineWidth = $head_navi.width()-100;

//////////////////////////////////////////////////////
/////	Create the analyser
//////////////////////////////////////////////////////

var analyser = context.createAnalyser();

// Quality of Audio 64 | 128 | 256
		analyser.fftSize = 64;
// THE realtimeData -> Thats the MEAT you want !
var realtimeData = new Uint8Array(analyser.frequencyBinCount);

////////////////////////////////////////////////////
//// 	Source Context
////////////////////////////////////////////////////

var source = context.createMediaElementSource($("#player").get(0));
		source.connect(analyser);

//////////////////////
// connect the context aka 
// source to the analyser
//////////////////////

analyser.connect(context.destination);

var $data = [];
function makeArray($data){
  if($dataArray == undefined){
   var $dataArray = [$data];
  }
  else{
    $dataArray.push($data);
  }
  return $dataArray;
}
////////////////////////////////////////////////////
//// 	Events on the audio
////////////////////////////////////////////////////

$player.on({
	canplay : function() {
		// anything
	},

//////////////////////////////////////////////////////
/////	Timeupdate
//////////////////////////////////////////////////////
	timeupdate: function(event){		
		//	on each timeupdate the analyser collects realtimeData 
		analyser.getByteFrequencyData(realtimeData);
    var $transform_audiData = [];
    for(var i=0;i< realtimeData.length;i++){
      $transform_audiData.push(realtimeData[i]);
    }
     var $array = $transform_audiData;
		$audioData.push($array);    
	},
	play: function(){
      console.clear();
		console.log('Wait for the data to be processed...');
	},
	pause : function(){
		console.log('paused');
    
	},
	ended : function(){
    $('.play').removeClass('on').addClass('off');
   // console.clear();
    
		//end of console realtimeData
		console.group('Ended'+ '\n \n' +
									'Have a look at '+ '\n' +
									'https://bgrins.github.io/devtools-snippets/#console-save' + '\n' +
									'and get the snippet for chrome dev tools to save the data!'  + '\n \n' +
									'CAUTION: You have to enable snippets by ' + '\n' +
									'http://stackoverflow.com/questions/10470711/chrome-developer-tools-what-is-snippets-support'+ '\n \n' +
									'1. run the snippet' + '\n \n' ,
                      '**************************************************'+ '\n' +
                      'FOR USE IN CODEPEN'+ '\n' +
                      'Switch "<top frame>" to "Codepen( index.html)"'+ '\n' +
                      '**************************************************'+ '\n \n' +
									'Store this Array as *global variable*' + '\n' , 
									$audioData ,
									'\n \n'+
									'right click----save as global variable----console.save(temp1)');
		console.groupEnd();
	}
});

//////////////////////////////////////////////////////
/////	Controls
//////////////////////////////////////////////////////

$head_navi.find('.play').bind({
	click : function(){
//////////////////
/////	Toggle Play
//////////////////
		if($player_src.paused){
			$(this).removeClass('off').addClass('on');
			$player_src.play();
		}
		else{
			$(this).removeClass('on').addClass('off');
			$player_src.pause();
		}
	}
});

              
            
!
999px

Console