Audio Plugin for CKEditor

Introduction

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

Version history:

1.0: 10-July-2015. 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
			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 audio

You can use the config.filebrowserAudioBrowseUrl 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

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