Category: Javascript

Web Speech API allows recording human voice and convert it to text or generate an audio file.

This can be used to enable the users to access the website hand free and give commands with voice.

Sometimes, requires to detect the user voice volume.

To do this I am using volume-meter.js library.

It returns pitch volume.

Use this value to draw graphical representation.

Pitch volume detection in Speech Recognition - JavaScript

How To Javascript

Sometimes, JavaScript modification doesn’t reflect on the page while running.

Need to clear browser cache manually each time when the file gets updated.

It makes the debugging process hard.

If the project contains some bug and you fix it but the user needs to clear the browser cache to reflect the changes.

In this tutorial, I show how you can prevent JavaScript file from Caching by the browser.

How to prevent browser from caching Javascript file

How To Javascript

In CKEditor by default file browser option is not enabled.

You can only add a file to an editor with URL.

To add file browser option require to update CKEditor configuration and use options while initialization.

In this tutorial, I show how you can add file browser option in CKEditor and upload it with PHP.

Custom file upload in CKEditor with PHP

AJAX Javascript PHP

CKEditor is a WYSIWYG HTML editor.

It makes HTML textarea lot more user-friendly by providing various features like – adding images, writing HTML code, formatting text, etc.

This can also be added to HTML containers.

It does not depend on other libraries like – jQuery and can be used in 3 different modes – Article Editor, Document Editor, and Inline Editor.

Different options are available to customize the editor.

In this tutorial, I am adding Article and Inline mode CKEditor on the same page and save it to MySQL database on submit with PHP.

Integrate CKEditor to HTML page and save to MySQL with PHP

Javascript PHP

Dropzone is a JavaScript library which allows uploading file by drag’n’drop and display the file preview after upload.

It is easier to add to the page and it does not depend on any library like jQuery.

The file will upload to the server via AJAX.

In this tutorial, I show how you can use Dropzone library to upload the file in CodeIgniter.

Drag and Drop file upload with Dropzone in CodeIgniter

AJAX CodeIgniter Javascript PHP

With the use of Speech Recognition API, you can enable the web browser to take speech input on the page and convert it into text.

For accessing this on the page need to allow microphone access by the user.

In this tutorial, I am creating an example where allowing the users to search posts by speech. On the basis of speech recognition display response on the screen using jQuery AJAX.

How to Add Speech Recognition to the website - JavaScript

AJAX How To Javascript JQuery PHP

In TinyMCE editor to view image and media options in the menu or in toolbar need to load them by using plugins option while initializing.

This adds them to the editor but you can load external file by passing the source path. It does not allow to browse any file within the system.

The browse button easily added by defining file_picker_callback option.

This only adds browse button but not allow file selection.

Within the file_picker_callback function need to write the script to enable file selection and upload the file to the server.

For upload the file to the server I am using PHP.

Add Browse Button and Upload File in TinyMCE

How To Javascript