justjanne/gist:9916857

## gistfile1.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>
    body {
      text-align: center;
      background: #7c7c7c;
    }

    .block {
      display: inline-block;
      margin: 1rem;
      background: #c7c7c7;
      box-shadow: 0 2px 3px rgba(0,0,0,0.8);
      min-width: 592px;
    }

    .block.video {
      font-size: 0;
    }

    .block.updates {
      text-align: left;
    }

    .block div, .block article {
      padding: .2rem .5rem;
    }

    .block div button {
      padding: .3rem .6rem;
    }
</style>

<section class="video block">
  <video autoplay loop id="video" src="http://zippy.gfycat.com/WelllitSafeAlligatorsnappingturtle.webm"></video>
</section>

<br>

<section class="buttons block">
  <div id="songs"></div>

  <div>
    <input type="range" id="volume" onchange="changeVolume()" value="50">
  </div>
</section>

<br>

<section class="updates block">
  <article>
    <h3>Update 2</h3>
    <ul>
      <li>You can now edit volume. Sorry for any busted eardrums!</lI>
    </ul>
  </article>

  <article>
    <h3>Update 1</h3>
    <ul>
      <li>Initial Release</li>
    </ul>
  </article>
</section>

<script>

// Here we can specify all available songs
songs = [
  {
    "name": "Song1",
    "url": "http://cdn.example.com/songs/song1.mp3"
  },
  {
    "name": "Song2",
    "url": "http://cdn.example.com/songs/song2.mp3"
  },
];

// stops all songs at once
function pauseAll() {
  elements.forEach(function(entry) {
    // pause the song
    entry.pause();
    // reset current position to start
    entry.currentTime = 0;
  });
}

// set volume to a value between 0 and 1 by setting it for each song
function setVolume(value) {
  elements.forEach(function(entry) {
    entry.volume=value
  });
}

// load the volume from the slider and change the volume to this value.
// the slider outputs a value between 0 and 100 while the songs need a
// value between 0 and 1, so just divide by 100
function changeVolume() {
  setVolume(document.getElementById("volume").value*0.01);
}

// play a specific id
function play(song) {
  // at first we pause all songs
  pauseAll();
  // then we play the song object with the corresponding id
  document.getElementById(song.toString()).play();
  // and we reset the video to the beginning
  document.getElementById("video").currentTime=0;
}

// This creates the buttons and the audio elements for our songs
function createSongs() {
    var parent = document.getElementById("songs");
    // for each song out of our list we create each one button and one audio element
    for (var i = 0; i < songs.length; i++) {
      var song;
      song = document.createElement("span");
      song.innerHTML = '<button onclick="play('+i.toString()+');">'+songs[i]['name']+'</button>';
      song.innerHTML += '<audio loop id="'+i.toString()+'" volume="0.5" class="song" src="'+songs[i]['url']+'"></audio>';
      // we append these now to the main parent
      parent.appendChild(song);
    }

    // we create a button to pause all music
    var pauseall = document.createElement("button");
    pauseall.innerHTML="Stop";
    pauseall.id="pauseall";
    pauseall.onclick=pauseAll;
    // and append it to the parent
    parent.appendChild(pauseall);
}

// We create buttons and audio objects for each song
createSongs();

// Cache a list of all song-objects
var elements = Array.prototype.slice.call(document.getElementsByClassName("song"));

// we load the volume from the slider and apply it (some browsers store slider values)
changeVolume();

// now we start the first song
elements[0].play();
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	body {
	text-align: center;
	background: #7c7c7c;
	}

	.block {
	display: inline-block;
	margin: 1rem;
	background: #c7c7c7;
	box-shadow: 0 2px 3px rgba(0,0,0,0.8);
	min-width: 592px;
	}

	.block.video {
	font-size: 0;
	}

	.block.updates {
	text-align: left;
	}

	.block div, .block article {
	padding: .2rem .5rem;
	}

	.block div button {
	padding: .3rem .6rem;
	}
	</style>

	<section class="video block">
	<video autoplay loop id="video" src="http://zippy.gfycat.com/WelllitSafeAlligatorsnappingturtle.webm"></video>
	</section>

	<br>

	<section class="buttons block">
	<div id="songs"></div>

	<div>
	<input type="range" id="volume" onchange="changeVolume()" value="50">
	</div>
	</section>

	<br>

	<section class="updates block">
	<article>
	<h3>Update 2</h3>
	<ul>
	<li>You can now edit volume. Sorry for any busted eardrums!</lI>
	</ul>
	</article>

	<article>
	<h3>Update 1</h3>
	<ul>
	<li>Initial Release</li>
	</ul>
	</article>
	</section>

	<script>

	// Here we can specify all available songs
	songs = [
	{
	"name": "Song1",
	"url": "http://cdn.example.com/songs/song1.mp3"
	},
	{
	"name": "Song2",
	"url": "http://cdn.example.com/songs/song2.mp3"
	},
	];

	// stops all songs at once
	function pauseAll() {
	elements.forEach(function(entry) {
	// pause the song
	entry.pause();
	// reset current position to start
	entry.currentTime = 0;
	});
	}

	// set volume to a value between 0 and 1 by setting it for each song
	function setVolume(value) {
	elements.forEach(function(entry) {
	entry.volume=value
	});
	}

	// load the volume from the slider and change the volume to this value.
	// the slider outputs a value between 0 and 100 while the songs need a
	// value between 0 and 1, so just divide by 100
	function changeVolume() {
	setVolume(document.getElementById("volume").value*0.01);
	}

	// play a specific id
	function play(song) {
	// at first we pause all songs
	pauseAll();
	// then we play the song object with the corresponding id
	document.getElementById(song.toString()).play();
	// and we reset the video to the beginning
	document.getElementById("video").currentTime=0;
	}

	// This creates the buttons and the audio elements for our songs
	function createSongs() {
	var parent = document.getElementById("songs");
	// for each song out of our list we create each one button and one audio element
	for (var i = 0; i < songs.length; i++) {
	var song;
	song = document.createElement("span");
	song.innerHTML = '<button onclick="play('+i.toString()+');">'+songs[i]['name']+'</button>';
	song.innerHTML += '<audio loop id="'+i.toString()+'" volume="0.5" class="song" src="'+songs[i]['url']+'"></audio>';
	// we append these now to the main parent
	parent.appendChild(song);
	}

	// we create a button to pause all music
	var pauseall = document.createElement("button");
	pauseall.innerHTML="Stop";
	pauseall.id="pauseall";
	pauseall.onclick=pauseAll;
	// and append it to the parent
	parent.appendChild(pauseall);
	}

	// We create buttons and audio objects for each song
	createSongs();

	// Cache a list of all song-objects
	var elements = Array.prototype.slice.call(document.getElementsByClassName("song"));

	// we load the volume from the slider and apply it (some browsers store slider values)
	changeVolume();

	// now we start the first song
	elements[0].play();
	</script>