Prof of concept for an audio player

.gitmodules

@@ -4,3 +4,6 @@
 [submodule "plugins/sound-central/js/jsfxr"]
 	path = plugins/sound-central/js/jsfxr
 	url = https://github.com/grumdrig/jsfxr.git
+[submodule "js/3rdparty/wavesurfer"]
+	path = js/3rdparty/wavesurfer
+	url = https://github.com/katspaugh/wavesurfer.js

CREDITS.md

@@ -75,3 +75,8 @@ License: Public Domain
 jsfxr
 Author: Eric Fredricksen - https://github.com/grumdrig/jsfxr
 License: Public Domain
+
+------------------------------------------------------------------------------------------
+wavesurfer
+Author: Alex Khokhulin - https://github.com/katspaugh/wavesurfer.js
+License: Creative Commons Attribution 3.0 Unported License

index.html

@@ -177,6 +177,9 @@ <h4 class="modal-title" id="defaultModalLabel">Modal title</h4>
     <!-- Ace -->
     <script type="text/javascript" src="./js/3rdparty/ace/src-min-noconflict/ace.js"></script>
 
+	<!-- Wavesurfer -->
+    <script type="text/javascript" src="./js/3rdparty/wavesurfer/dist/wavesurfer.min.js"></script>
+
 	<!-- jQuery serializeObject -->
 	<script type="text/javascript" src="./js/3rdparty/jquery.serializeobject/jquery.serializeObject.min.js"></script>
 
@@ -192,7 +195,8 @@ <h4 class="modal-title" id="defaultModalLabel">Modal title</h4>
     <script type="text/javascript" src="./js/codebot.preferences.js"></script>
     <script type="text/javascript" src="./js/codebot.editors.js"></script>
     <script type="text/javascript" src="./js/codebot.editors.ace.js"></script>
-    <script type="text/javascript" src="./js/codebot.editors.graphic.js"></script>
+	<script type="text/javascript" src="./js/codebot.editors.graphic.js"></script>
+    <script type="text/javascript" src="./js/codebot.editors.audio.js"></script>
     <script type="text/javascript" src="./js/codebot.ui.panel.js"></script>
     <script type="text/javascript" src="./js/codebot.ui.filespanel.js"></script>
     <script type="text/javascript" src="./js/codebot.ui.slidepanel.js"></script>

js/codebot.editors.audio.js

@@ -0,0 +1,81 @@
+/*
+    The MIT License (MIT)
+
+    Copyright (c) 2013 Fernando Bevilacqua
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy of
+    this software and associated documentation files (the "Software"), to deal in
+    the Software without restriction, including without limitation the rights to
+    use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+    the Software, and to permit persons to whom the Software is furnished to do so,
+    subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+    FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+    COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+    IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+    CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+// Namespace for Codebot.Editor
+var Codebot = Codebot || {};
+Codebot.Editor = Codebot.Editor || {};
+
+/**
+ * A simple audio editor/viewer. It is able to play common
+ * audio files (e.g. mp3, wave, ogg) and perform simple editions,
+ * such as cutting a selection of the audio stream.
+ *
+ * @param  {[type]} theContainer [description]
+ */
+Codebot.Editor.Audio = function(theContainer) {
+    this.mContainer = theContainer;
+    this.mWaveSurfer = null;
+};
+
+/**
+ * Editor factory. This method can create a new instance of the audio editor.
+ *
+ * @param  {Codebot.Tab} theTab    The tab where this editor was placed.
+ * @param  {Blob} theContent       The content of the file being opened.
+ * @param  {Codebot.Node} theNode  The node (file) being opened.
+ * @return {Codebot.Editor.Audio}
+ */
+Codebot.Editor.Audio.create = function(theTab, theContent, theNode) {
+    var aEditor = new Codebot.Editor.Audio(theTab.container);
+
+    if(theContent instanceof Blob) {
+        var aUrlCreator = window.URL || window.webkitURL;
+        aEditor.init(theContent);
+    }
+
+    return aEditor;
+};
+
+/**
+ * [function description]
+ *
+ * @param  {Blob} theBlob [description]
+ * @return {[type]}        [description]
+ */
+Codebot.Editor.Audio.prototype.init = function(theBlob) {
+    var aSelf = this;
+
+    $('#' + this.mContainer).html('Audio: <div id="test"></div>');
+
+    this.mWaveSurfer = WaveSurfer.create({
+        container: '#test',
+        waveColor: 'violet',
+        progressColor: 'purple'
+    });
+
+    this.mWaveSurfer.on('ready', function () {
+        aSelf.mWaveSurfer.play();
+    });
+
+    this.mWaveSurfer.loadBlob(theBlob);
+};

js/codebot.editors.js

@@ -78,7 +78,9 @@ var CodebotEditors = function() {
         mSelf = this;
         mCodebot = theCodebot;
 
-        mSelf.register(['png', 'jpeg'], CodebotEditorGraphic.create);
+        // Register a few default editor for common file types
+        mSelf.register(['png', 'jpeg', 'jpg', 'gif'], CodebotEditorGraphic.create);
+        mSelf.register(['wav', 'mp3', 'ogg'], Codebot.Editor.Audio.create);
         mSelf.register('*', CodebotEditorAce.create);
     };
 };