Remember - Ember McLain

by MegaScience

HTML

<div id="container">
  <span id="loading">Loading...</span>
  <audio id="sample" src="http://www.robbynkirmsse.com/Resources/5-%20RememberROBBYN.mp3" controls="controls" preload="auto"></audio>
  <button data-start-time="60.5" data-end-time="84" onclick="musicObj.playSegment(this);" disabled="true">Chorus</button>
  <button data-start-time="27" data-end-time="38.5" onclick="musicObj.playSegment(this);" disabled="true">Sad</button>
</div>

CSS

div#container,
audio {
  display: table;
  margin: 0 auto;
  text-align: center;
}

span#loading {
  font-family: Arial;
  font-size: 30px;
}

JavaScript

const musicObj = {
	audio: document.getElementById("sample"),
	segmentEnd: -1,
	getValue: v => isNaN(a = parseInt(v)) ? -1 : a, 
	playSegment: function (elem) {
		this.audio.segmentEnd = this.getValue(elem.dataset.endTime);
		this.audio.currentTime = this.getValue(elem.dataset.startTime);
		this.audio.play();
	},
	init: function () {
  	this.audio.segmentEnd = -1;
		this.audio.addEventListener('canplay', () => {
			document.getElementById('loading').style.display = 'none';
			for(let button of document.getElementsByTagName('button')) button.removeAttribute('disabled');
		}, false);
		this.audio.addEventListener('timeupdate', function() {
			if (this.segmentEnd > -1 && this.currentTime >= this.segmentEnd) {
				this.pause();
				this.segmentEnd = -1;
			}
      //console.log(audio);
			//console.log(this.currentTime);
		}, false);
	}
};

musicObj.init();