Merge pull request #508 from SteelWagstaff/master

HTML5 Audio elements

src/sidebar/media-embedder.js

 'use strict';
 
+/**
+* Return an HTML5 audio player with the given src URL.
+*/
+
+function audioElement(src) {
+  var html5audio = document.createElement('audio');
+  html5audio.controls = true;
+  html5audio.src      =  src;
+  return html5audio;
+}
+
 /**
  * Return an iframe DOM element with the given src URL.
  */
@@ -24,8 +35,8 @@ function vimeoEmbed(id) {
 }
 
 /**
- * A list of functions that return an "embed" DOM element (e.g. an <iframe>)
- * for a given link.
+ * A list of functions that return an "embed" DOM element (e.g. an <iframe> or
+ * an html5 <audio> element) for a given link.
  *
  * Each function either returns `undefined` if it can't generate an embed for
  * the link, or a DOM element if it can.
@@ -88,6 +99,15 @@ var embedGenerators = [
     }
     return null;
   },
+
+  // Matches URLs that end with .mp3, .ogg, or .wav (assumed to be audio files)
+  function html5audioFromMp3Link(link) {
+    if (link.pathname.endsWith('.mp3') || link.pathname.endsWith('.ogg') || link.pathname.endsWith('.wav')) {
+      return audioElement(link.href);
+    }
+    return null;
+  },
+
 ];
 
 /**
@@ -115,7 +135,7 @@ function embedForLink(link) {
  *
  * If the given link element is a link to an embeddable media and if its link
  * text is the same as its href then it will be replaced in the DOM with an
- * embed (e.g. an <iframe>) of the same media.
+ * embed (e.g. an <iframe> or html5 <audio> element) of the same media.
  *
  * If the link text is different from the href, then the link will be left
  * untouched. We want to convert links like these from the Markdown source into
@@ -138,14 +158,12 @@ function replaceLinkWithEmbed(link) {
   if (link.href !== link.textContent) {
     return;
   }
-
   var embed = embedForLink(link);
-  if (embed) {
+  if (embed){
     link.parentElement.replaceChild(embed, link);
   }
 }
 
-
 /**
  * Replace all embeddable link elements beneath the given element with embeds.
  *

src/sidebar/test/media-embedder-test.js

@@ -90,6 +90,29 @@ describe('media-embedder', function () {
     });
   });
 
+  it('replaces audio links with html5 audio elements', function() {
+    var urls = [
+      'https://archive.org/download/testmp3testfile/mpthreetest.mp3',
+      'https://archive.org/download/testmp3testfile/mpthreetest.mp3#fragment',
+      'https://archive.org/download/testmp3testfile/mpthreetest.mp3?foo=bar&id=1',
+      'http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav',
+      'http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav#fragment',
+      'http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav?foo=bar&id=4',
+      'https://www.w3schools.com/html/horse.ogg',
+      'https://www.w3schools.com/html/horse.ogg#fragment',
+      'https://www.w3schools.com/html/horse.ogg?foo=bar&id=31',
+    ];
+    urls.forEach(function (url) {
+      var element = domElement('<a href="' + url + '">' + url + '</a>');
+
+      mediaEmbedder.replaceLinksWithEmbeds(element);
+
+      assert.equal(element.childElementCount, 1);
+      assert.equal(element.children[0].tagName, 'AUDIO');
+      assert.equal(element.children[0].src, url.toLowerCase());
+    });
+  });
+
   it('does not replace links if the link text is different', function () {
     var url = 'https://youtu.be/QCkm0lL-6lc';
     var element = domElement('<a href="' + url + '">different label</a>');