Audio Plugin for CKEditor

Introduction

This is a plugin to create HTML5 <audio> elements in CKEditor.

Author:

BeezNest Latino S.A.C

Version history:

1.0: 14-November-2014. First version.

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		audio\
			plugin.js
			dialogs\
				audio.js
			docs\
				install.html
                                styles.css
			images\
				icon.png
				placeholder.png
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='audio';

3. Add it to your toolbar

In your toolbar configuration, add a new 'Audio' item in the place where you want the button to show up.

4. Configure server browser for video

You can use the config.filebrowserVideoBrowseUrl entry to specify a url so the file browser shows just audio elements (as long as your configure properly your file browser).

5. Use it

Now empty the cache of your browser and reload the editor, the new button should show up and you can add <audio> elements into the content.

Final notes

This plugin has been coded for CKEditor 4.4.5. It might be possible to backport it for older versions, but I don't think that it's worth the effort as sooner or later those installs will (or should) be upgraded to the current version.

Please, note that only newer browsers support the Audio element, in older ones a simple text linking to the source videos is provided, you might want to use some javascript or css to customize the final behavior of these elements.