Skip to content

Instantly share code, notes, and snippets.

@al-the-x

al-the-x/index.html

Created February 19, 2015 17:03
Show Gist options
  • Save al-the-x/0b4f2bd3b3f00c5fb01c to your computer and use it in GitHub Desktop.
Save al-the-x/0b4f2bd3b3f00c5fb01c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--bower:css-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!--endbower-->
<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!--bower:css-->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!--endbower-->
<script src="http://connect.soundcloud.com/sdk.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src='js/flickr.js'></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="main-container">
<h1>Do You Even Feel Bro?</h1>
<section class="player-box">
<div class="button-section">
<ul class="feelings">
<li class="mad">
<a href="https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/what-a-d-k&format=json">
<h2>What a D**k!</h2>
</a>
</li>
<li class="scared">
<a href="#"><h2>SUSANNA!</h2></a>
</li>
<li class="joyful">
<a href="#"><h2>Trollin'</h2></a>
</li>
<li class="powerful">
<a href="#"><h2>Beast Mode</h2></a>
</li>
<li class="peaceful">
<a href="#"><h2>Thursday Night</h2></a>
</li>
<li class="sad">
<a href="#"><h2>Cuddle Puddle</h2></a>
</li>
</ul>
</div>
<div class="music-section">
<div class="image-container">
<img src="http://lorempixel.com/g/570/350">
</div>
<div class="audio-player">
<audio id="audio-player" src= type="audio/mp3" controls="controls"></audio>
</div><!-- @end .audio-player -->
</div>
</section>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!--endbower-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html><!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!--bower:js-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!--endbower-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
SC.initialize({
client_id: '48726095adc9106006eafbdb701eb2a6'
});
$(document).ready(function() {
$.get("https://api.soundcloud.com/tracks/42633860/streams?client_id=48726095adc9106006eafbdb701eb2a6", function(sound){
$('#audio-player').attr('src', sound.http_mp3_128_url);
});
$('.feelings > li').each(function(){
// Go ahead and request the JSON for this tab in advance...
$(this).data('soundcloudApi', $.getJSON($(this).find('a').prop('href')));
}).click(function(event){
event.preventDefault();
$(this).data('soundcloudApi')
.done(function(data){
$('#player').replaceWith(data.html);
})
});
$.getJSON("https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/what-a-d-k&format=json", function (dataMad) {
$('.mad').click(function () {
event.preventDefault();
$('iframe').remove();
$('#audio-player').remove();
$('.audio-player').append(dataMad.html);
$('.music-section').css( "background-color", "#4e4847");
$('.music-section').css( "border-bottom", "5px solid #383231");
});
});
$.getJSON("https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/trollin&format=json", function (dataJoyful) {
$('.joyful').click(function () {
event.preventDefault();
$('iframe').remove();
$('#audio-player').remove();
$('.audio-player').append(dataJoyful.html);
$('.music-section').css( "background-color", "#61A598");
$('.music-section').css( "border-bottom", "5px solid #569387");
});
});
$.getJSON("https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/susanna&format=json", function (dataScared) {
$('.scared').click(function () {
event.preventDefault();
$('iframe').remove();
$('#audio-player').remove();
$('.audio-player').append(dataScared.html);
$('.music-section').css( "background-color", "#E2E5EE");
$('.music-section').css( "border-bottom", "5px solid #caccd4");
});
});
$.getJSON("https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/beast-mode&format=json", function (dataPowerful) {
$('.powerful').click(function () {
event.preventDefault();
$('iframe').remove();
$('#audio-player').remove();
$('.audio-player').append(dataPowerful.html);
$('.music-section').css( "background-color", "#66668B");
$('.music-section').css( "border-bottom", "5px solid #5b5b7c");
});
});
$.getJSON("https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/thursday-night&format=json", function (dataPeaceful) {
$('.peaceful').click(function () {
event.preventDefault();
$('iframe').remove();
$('#audio-player').remove();
$('.audio-player').append(dataPeaceful.html);
$('.music-section').css( "background-color", "#DDD5A4");
$('.music-section').css( "border-bottom", "5px solid #c5be92");
});
});
$.getJSON("https://soundcloud.com/oembed?maxheight=180&url=https://soundcloud.com/user699424009/sets/cuddle-puddle&format=json", function (data){
$('.sad').click(function () {
event.preventDefault();
$('iframe').remove();
$('#audio-player').remove();
$('.audio-player').append(data.html);
$('.music-section').css( "background-color", "#D1CBCD");
$('.music-section').css( "border-bottom", "5px solid #bab5b7");
});
});
});
//$(document).ready ( function () {
//
// $("a").click(function() {
// $(this).next().toggleClass('closed');
// });
//});
//$('button').click(function () {
// $('button').removedClass("selected");
// $(this).addClass("selected");
// var flickrAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
// var animal = $(this).text();
// var flickrOptions = {
// tags: animal,
// format: "json"
// };
// function displayPhotos(data) {
// var photoHTML = '<ul>';
// $.each( data.items, function (i, photo) {
// photoHTML += '<li class="mad">';
// photoHTML += '<a href="' + photo.link + '"class="image">';
// photoHTML += '<img src="' + photo.media.m + '"></a></li>';
// });
// photoHTML += '</ul>';
// $('#photos').html(photoHTML);
// }
// $.getJSON(flickrAPI, flickrOptions, displayPhotos);
//};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment