Fix a few cross-browser issues with audio player example

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();

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) }