Play music

by LeroyRon

HTML

<button id="playButton" style="border:none; width: 200px; height: 200px; cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:red;color:blue;">Player Button
  </button>
<audio id="player" style="display:none;" >
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
AutoPlay: <input id="autoplay_text" />
AutoVolume: <input type="range" step="0.1" min="0.0" max="1.0" id="autovolume_range" />

JavaScript

document.getElementById('playButton').addEventListener('click', autoPlayToggle);
document.getElementById('autovolume_range').addEventListener('change', changeVol);
//Only getElementById once!
var player = document.getElementById("player");
var autoplaytext = document.getElementById("autoplay_text");
var autovolumetext = document.getElementById("autovolume_range");
//Boolean from localstorage to keep state of the player
var autoPlayOn = autoplaytext.value = (localStorage.getItem("keepAutoPlay") === "true");
var setVolumeOn = autovolumetext.value = parseFloat(localStorage.getItem("keepVolume"));

player.volume = setVolumeOn;
player.autoplay = autoPlayOn;
player.load();

//Force play if it dosen't autoplay after refresh
if (player.autoplay == true) {
  player.play();
} else {
  player.pause();
}

//Function
//When the user refreshes the page it will keep the autoplay state
function autoPlayToggle() {
  if (player.paused) {
    player.play();
    player.autoplay = true;
  } else {
    player.pause();
    player.autoplay = false;
  }
  //Show the state in a text box
  autoplaytext.value = player.autoplay;
  //Save updated state to your local disk
  localStorage.setItem("keepAutoPlay", autoplaytext.value);
}

//Save state of volume
function changeVol() {
	player.volume = this.value;
  localStorage.setItem("keepVolume", this.value);
}