(function ($) {
    var KEditor = $.keditor;
    var flog = KEditor.log;
    
    KEditor.components['audio'] = {
        getContent: function (component, keditor) {
            flog('getContent "audio" component, component');
            
            var componentContent = component.children('.keditor-component-content');
            var audio = componentContent.find('audio');
            audio.unwrap();
            
            return componentContent.html();
        },
        
        settingEnabled: true,
        
        settingTitle: 'Audio Settings',
        
        initSettingForm: function (form, keditor) {
            flog('init "audio" settings', form);
            
            form.append(
                '<form class="form-horizontal">' +
                '<div class="form-group">' +
                '<label for="audioFileInput" class="col-sm-12">Audio file</label>' +
                '<div class="col-sm-12">' +
                '<div class="audio-toolbar">' +
                '<a href="#" class="btn-audioFileInput btn btn-sm btn-primary"><i class="fa fa-upload"></i></a>' +
                '<input id="audioFileInput" type="file" style="display: none">' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label for="audio-autoplay" class="col-sm-12">Autoplay</label>' +
                '<div class="col-sm-12">' +
                '<input type="checkbox" id="audio-autoplay" />' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label for="audio-showcontrols" class="col-sm-12">Show Controls</label>' +
                '<div class="col-sm-12">' +
                '<input type="checkbox" id="audio-showcontrols" checked />' +
                '</div>' +
                '</div>' +
                '<div class="form-group">' +
                '<label for="audio-width" class="col-sm-12">Width (%)</label>' +
                '<div class="col-sm-12">' +
                '<input type="number" id="audio-width" min="20" max="100" class="form-control" value="100" />' +
                '</div>' +
                '</div>' +
                '</form>'
            );
        },
        
        showSettingForm: function (form, component, keditor) {
            flog('showSettingForm "audio" component', form, component);
            
            var options = keditor.options;
            
            var audio = component.find('audio');
            var fileInput = form.find('#audioFileInput');
            var btnAudioFileInput = form.find('.btn-audioFileInput');
            btnAudioFileInput.off('click').on('click', function (e) {
                e.preventDefault();
                
                fileInput.trigger('click');
            });
            fileInput.off('change').on('change', function () {
                var file = this.files[0];
                if (/audio/.test(file.type)) {
                    // Todo: Upload to your server :)
                    
                    audio.attr('src', URL.createObjectURL(file));
                    
                    audio.load(function () {
                        keditor.showSettingPanel(component, options);
                    });
                } else {
                    alert('Your selected file is not an audio file!');
                }
            });
            
            var autoplayToggle = form.find('#audio-autoplay');
            autoplayToggle.off('click').on('click', function (e) {
                if (this.checked) {
                    audio.attr('autoplay', 'autoplay');
                } else {
                    audio.removeAttr('autoplay');
                }
            });
            
            var showcontrolsToggle = form.find('#audio-showcontrols');
            showcontrolsToggle.off('click').on('click', function (e) {
                if (this.checked) {
                    audio.attr('controls', 'controls');
                } else {
                    audio.removeAttr('controls');
                }
            });
            
            var audioWidth = form.find('#audio-width');
            audioWidth.off('change').on('change', function () {
                audio.css('width', this.value + '%');
            });
        }
    };
})(jQuery);

@@ -766,32 +766,37 @@
                '
+     
 %3Cdiv class=%22form
@@ -816,32 +816,41 @@
                '
+         
 %3Clabel for=%22audi
@@ -910,32 +910,41 @@
                '
+         
 %3Cdiv class=%22col-
@@ -963,32 +963,45 @@
                '
+             
 %3Cdiv class=%22audi
@@ -1032,16 +1032,33 @@
        '
+                 
 %3Ca href=
@@ -1160,24 +1160,41 @@
            '
+                 
 %3Cinput id=%22a
@@ -1241,16 +1241,18 @@
 y: none%22
+ /
 %3E' +%0A   
@@ -1257,32 +1257,45 @@
                '
+             
 %3C/div%3E' +%0A      
@@ -1297,32 +1297,41 @@
                '
+         
 %3C/div%3E' +%0A      
@@ -1333,32 +1333,37 @@
                '
+     
 %3C/div%3E' +%0A      
@@ -1365,32 +1365,37 @@
                '
+     
 %3Cdiv class=%22form
@@ -1415,32 +1415,41 @@
                '
+         
 %3Clabel for=%22audi
@@ -1507,32 +1507,41 @@
                '
+         
 %3Cdiv class=%22col-
@@ -1560,32 +1560,45 @@
                '
+             
 %3Cinput type=%22che
@@ -1639,32 +1639,41 @@
                '
+         
 %3C/div%3E' +%0A      
@@ -1675,32 +1675,37 @@
                '
+     
 %3C/div%3E' +%0A      
@@ -1707,32 +1707,37 @@
                '
+     
 %3Cdiv class=%22form
@@ -1757,32 +1757,41 @@
                '
+         
 %3Clabel for=%22audi
@@ -1858,32 +1858,41 @@
                '
+         
 %3Cdiv class=%22col-
@@ -1911,32 +1911,45 @@
                '
+             
 %3Cinput type=%22che
@@ -2002,32 +2002,41 @@
                '
+         
 %3C/div%3E' +%0A      
@@ -2038,32 +2038,37 @@
                '
+     
 %3C/div%3E' +%0A      
@@ -2070,32 +2070,37 @@
                '
+     
 %3Cdiv class=%22form
@@ -2128,16 +2128,25 @@
        '
+         
 %3Clabel f
@@ -2218,16 +2218,25 @@
        '
+         
 %3Cdiv cla
@@ -2271,16 +2271,29 @@
        '
+             
 %3Cinput t
@@ -2389,32 +2389,41 @@
                '
+         
 %3C/div%3E' +%0A      
@@ -2433,16 +2433,21 @@
        '
+     
 %3C/div%3E' 

Reformat source