Fixing audiojs to only display if audio is not supported by the brows…

…er and do not show the HTML5 audio tags along with the swf if html5 is not supported

app/assets/javascripts/sufia.js

@@ -45,6 +45,7 @@ limitations under the License.
 //= require sufia/multiForm
 //= require sufia/edit_metadata
 //= require sufia/single_use_link
+//= require sufia/audio
 //= require hydra/batch_select
 //= require hydra_collections
 
@@ -175,23 +176,3 @@ function preg_quote( str ) {
 
     return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
 }
-
-
-function initialize_audio() {
-
-  if (navigator.userAgent.match("Chrome")){
-      $('audio').each(function() {
-         this.controls = true;
-      });
-  }else {
-      $('audio').each(function() {
-         $(this).attr("preload","auto");
-      });
-    audiojs.events.ready(function() {
-          var as = audiojs.createAll({
-                 imageLocation: '/assets/player-graphics.gif',
-                 swfLocation: '/assets/audiojs.swf'
-          });
-    });
-  };
-}

app/assets/javascripts/sufia/audio.js

@@ -0,0 +1,28 @@
+function initialize_audio() {
+
+    var test_audio= document.createElement("audio") //try and create sample audio element
+    var audiosupport= (test_audio.play)? true : false
+
+    if (audiosupport){
+        $('audio').each(function() {
+            this.controls = true;
+        });
+    }else {
+        $('audio').each(function() {
+            $(this).attr("preload","auto");
+        });
+        audiojs.events.ready(function() {
+          var as = audiojs.createAll({
+                 imageLocation: '/assets/player-graphics.gif',
+                 swfLocation: '/assets/audiojs.swf'
+                 });
+
+          // remove html 5 player from veiw on firefox and safari
+          $('.audiojs').addClass('no-audio-background')
+          $('.audiojs .play-pause').addClass('hide')
+          $('.audiojs .scrubber').addClass('hide')
+          $('.audiojs .time').addClass('hide')
+
+        });
+    };
+}

app/assets/stylesheets/sufia-audio-overrides.css

@@ -0,0 +1,9 @@
+
+.no-audio-background {
+    background: none;
+    box-shadow: none;
+}
+
+.span40 .audiojs audio {
+    left: 10px;
+}

app/assets/stylesheets/sufia.css.scss

@@ -10,7 +10,7 @@
  *= require audio-js
  *= require dashboard
  *= require jquery-ui
+ *= require sufia-audio-overrides
 */
 
 @import 'font-awesome';
-

app/views/generic_files/_media_display.html.erb

@@ -7,7 +7,7 @@
     Your browser does not support the video tag.
   </video>
 <% elsif @generic_file.audio? %>
-  <audio controls="controls" class="video-js vjs-default-skin" data-setup="{}" preload="auto">
+    <audio controls="controls" class="audiojs" preload="auto">
     <source src="<%= sufia.download_path(@generic_file, datastream_id: 'ogg') %>" type="audio/ogg" />
     <source src="<%= sufia.download_path(@generic_file, datastream_id: 'mp3') %>" type="audio/mpeg" />
     Your browser does not support the audio tag.