mp3 -> html5 + H5P embed support

Added support for mp3 -> html5 audio and a primitive h5p embedder.

src/sidebar/media-embedder.js

 'use strict';
 
+/**
+* Return an HTML5 audio player with the given src URL.
+*/
+
+function mp3audio(src) {
+   var html5audio = document.createElement('audio');
+   html5audio.id       = 'audio-player';
+   html5audio.controls = 'controls';
+   html5audio.src      =  src;
+   html5audio.type     = 'audio/mpeg';
+   return html5audio;
+}
+
 /**
  * Return an iframe DOM element with the given src URL.
  */
@@ -24,8 +37,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 +101,20 @@ var embedGenerators = [
     }
     return null;
   },
+
+  function html5audioFromMp3Link(link) {
+	if (link.href.toLowerCase().indexOf('.mp3') !== -1) {
+	  return mp3audio(link.href);
+    }
+   return null;
+  },
+
+  function h5pFromEmbedLink(link) {
+  	if (link.href.toLowerCase().indexOf('admin-ajax.php?action=h5p_embed&id=') !== -1) {
+  		return iframe(link.href);
+  	}
+  	return null;
+  }
 ];
 
 /**
@@ -115,7 +142,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 +165,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,32 @@ describe('media-embedder', function () {
     });
   });
 
+  it('replaces mp3 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?q=foo&id=bar',
+    ];
+    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, 'https://archive.org/download/testmp3testfile/mpthreetest.mp3'); //not sure if this is correct
+    });
+    }); 
+  })
+
+/**  it('replaces H5P activity links with iframes', function(){
+*    var urls = [
+*      'https://h5p.org/h5p/embed/617'
+*    ]
+*  }
+*/
+
   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>');
@@ -143,4 +169,4 @@ describe('media-embedder', function () {
     assert.equal(
       element.children[1].src, 'https://www.youtube.com/embed/abcdefg');
   });
-});
+});
\ No newline at end of file