Last active
August 29, 2015 14:18
-
-
Save jlcarvalho/a7070522c836b71f0786 to your computer and use it in GitHub Desktop.
Gistter: Playback control with sound spectrum
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var sound = new Audio('http://media.soundcloud.com/stream/BkDZIahFB7ME.mp3'); | |
| sound | |
| .isPlayed = false | |
| .volume = 1; | |
| $('#butt').on('click',function(){ | |
| if (!sound.isPlayed) { | |
| sound.play(); // Play sound | |
| $(this) | |
| .removeClass('btn-succes glyphicon-play') | |
| .addClass('btn-danger glyphicon-pause'); | |
| } else { | |
| sound.pause(); // Pause sound | |
| $(this) | |
| .removeClass('btn-danger glyphicon-pause') | |
| .addClass('btn-success glyphicon-play'); | |
| } | |
| sound.isPlayed = !sound.isPlayed; | |
| }); | |
| $('#vol-value').css({'width': sound.volume * 100 + "%"}); | |
| $('#vol-dec').on('click', function(){ | |
| sound.volume -= 0.05; | |
| $('#vol-value').css({'width': sound.volume * 100 + "%"}); | |
| }); | |
| $('#vol-inc').on('click', function(){ | |
| sound.volume += 0.05; | |
| $('#vol-value').css({'width': sound.volume * 100 + "%"}); | |
| }); | |
| var audioElement = sound; | |
| audioElement.addEventListener('play', draw); | |
| var context = new AudioContext(), | |
| analyser = context.createAnalyser(), | |
| source, | |
| bars = []; | |
| window.onload = function() { | |
| source = context.createMediaElementSource(audioElement); | |
| source.connect(analyser); | |
| analyser.connect(context.destination); | |
| prepareElements(); | |
| }; | |
| function prepareElements() { | |
| var el = document.getElementById("spectrum"), | |
| width = 20; | |
| for (var i=0; i<50; i++) { | |
| var bar = document.createElement("div"); | |
| bar.style.left = (width + 5) * i + "px"; | |
| el.appendChild(bar); | |
| bars.push(bar); | |
| } | |
| } | |
| function draw() { | |
| requestAnimationFrame(draw); | |
| var freqData = new Uint8Array(analyser.frequencyBinCount); | |
| analyser.getByteFrequencyData(freqData); | |
| for (var i=0; i<bars.length; i++) { | |
| var freq = Math.round(i*freqData.length/bars.length); | |
| bars[i].style.height = freqData[freq]+"px"; | |
| } | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Gistter</title> | |
| <!-- Necessary to insert the styles --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css"> | |
| <link rel="stylesheet" type="text/css" href="main.css"> | |
| </head> | |
| <body> | |
| <!-- Your code here --> | |
| <div class="container"> | |
| <div id="spectrum"></div> | |
| <div class="wrap"> | |
| <div class="volume-control-panel"> | |
| <button id="vol-dec" class="volume-btn volume-btn-minus glyphicon glyphicon-minus"></button> | |
| <button id="vol-inc" class="volume-btn volume-btn-plus glyphicon glyphicon-plus"></button> | |
| <div class="volume-bar"> | |
| <div id="vol-value" class="volume-value"></div> | |
| </div> | |
| </div> | |
| <button id="butt" class="btn btn-success btn-xlg glyphicon glyphicon-play"></button> | |
| </div> | |
| </div> | |
| <!-- Necessary to insert the javascript --> | |
| <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script> | |
| <script type="text/javascript" src="app.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| width:100%; | |
| height: 100%; | |
| } | |
| #spectrum { | |
| position: absolute; | |
| background-color: #222; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| left: 0; | |
| } | |
| #spectrum * { | |
| position: absolute; | |
| bottom: 0; | |
| width: 20px; | |
| background-color: #90ee90; | |
| } | |
| .wrap { | |
| width: 200px; | |
| margin: auto; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| -ms-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| } | |
| .volume-control-panel { | |
| display: block; | |
| width: 200px; | |
| margin: 0 auto; | |
| margin-bottom: 10px; | |
| zoom: 1; | |
| } | |
| .volume-control-panel:before, | |
| .volume-control-panel:after { | |
| content: ""; | |
| display: table; | |
| } | |
| .volume-control-panel:after { | |
| clear: both; | |
| } | |
| .volume-btn { | |
| display: block; | |
| width: 20%; | |
| top: 0; | |
| height: 30px; | |
| color: #08f; | |
| background-color: #fff; | |
| border: 1px solid #08f; | |
| outline: none; | |
| } | |
| .volume-btn-minus { | |
| float: left; | |
| border-right: none; | |
| } | |
| .volume-btn-plus { | |
| float: right; | |
| border-left: none; | |
| } | |
| .volume-bar { | |
| width: 60%; | |
| height: 30px; | |
| border: 1px solid #08f; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .volume-value { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| background-color: #08f; | |
| } | |
| .btn-xlg { | |
| display: block; | |
| width: 200px; | |
| height: 100px; | |
| font-size: 32px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment