diff --git a/examples/player/player.js b/examples/player/player.js index e825d14..9af1244 100644 --- a/examples/player/player.js +++ b/examples/player/player.js @@ -174,7 +174,10 @@ Player.prototype = { self.play(index); }, - + /** + * Set the volume and update the volume slider display. + * @param {Number} val Volume between 0 and 1. + */ volume: function(val) { var self = this; @@ -216,7 +219,7 @@ Player.prototype = { var sound = self.playlist[self.index].howl; // Determine our current seek position. - var seek = sound.seek(); + var seek = sound.seek() || 0; timer.innerHTML = self.formatTime(Math.round(seek)); progress.style.width = (((seek / sound.duration()) * 100) || 0) + '%'; @@ -258,8 +261,8 @@ Player.prototype = { * @return {String} Formatted time. */ formatTime: function(secs) { - var minutes = Math.floor(secs / 60); - var seconds = secs - minutes * 60; + var minutes = Math.floor(secs / 60) || 0; + var seconds = (secs - minutes * 60) || 0; return minutes + ':' + (seconds < 10 ? '0' : '') + seconds; } @@ -298,7 +301,7 @@ nextBtn.addEventListener('click', function() { player.skip('next'); }); waveform.addEventListener('click', function(event) { - player.seek(event.x / window.innerWidth); + player.seek(event.clientX / window.innerWidth); }); playlistBtn.addEventListener('click', function() { player.togglePlaylist(); @@ -333,7 +336,7 @@ volume.addEventListener('touchend', function() { var move = function(event) { if (window.sliderDown) { - var x = event.x || event.touches[0].clientX; + var x = event.clientX || event.touches[0].clientX; var startX = window.innerWidth * 0.05; var layerX = x - startX; var per = Math.min(1, Math.max(0, layerX / parseFloat(barEmpty.scrollWidth))); @@ -381,6 +384,3 @@ var resize = function() { }; window.addEventListener('resize', resize); resize(); - -// Auto-play the first song. -player.play(); diff --git a/examples/player/styles.css b/examples/player/styles.css index 0b340ba..13aedcb 100644 --- a/examples/player/styles.css +++ b/examples/player/styles.css @@ -19,6 +19,9 @@ body { background: linear-gradient(135deg, #bb71f3 0%, #3d4d91 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bb71f3', endColorstr='#3d4d91', GradientType=1); font-family: "Helvetica Neue", Arial; + -webkit-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } /* Top Info */ @@ -78,6 +81,8 @@ body { opacity: 0.9; -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33)); filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33)); + -webkit-user-select: none; + user-select: none; } .btn:hover { opacity: 1; @@ -88,7 +93,6 @@ body { height: 70px; left: 50%; margin: auto -34.5px; - display: none; } #pauseBtn { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjRDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1Q0M2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGMkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pne5d1AAAAB8SURBVHja7NCxCQAwAALBuP/QZoEUlinua0G4tD1j83Asv/4GChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFCpRXV4ABAOgpXYTDYwEwAAAAAElFTkSuQmCC'); @@ -142,6 +146,8 @@ body { display: none; cursor: pointer; opacity: 0.8; + -webkit-user-select: none; + user-select: none; } #waveform:hover { opacity: 1; @@ -178,6 +184,7 @@ body { border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; + display: none; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) }