Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


A dynamic file input form developed for oTranscribe. Creates simple, user-friendly form for selecting local audio/video files, which can then be played audio or video in-browser. Combine with oTplayer for an awesome combo.


Download otinput.js or otinput.min.js and include it in your page along with jQuery.


Initialise a new instance of oTinput like so:

var input = new oTinput({
  element: '.my-input-holder',
  onFileChange: function(file){
    console.log('File name is: ';
  onURLSubmit: function(url){
    console.log('URL is: '+url);

onFileChange and onURLSubmit are run whenever a valid file or URL is submitted by the user.

Note that oTinput does not include any styles.

Config options

All of these are optional apart from element.

  • element: Selector, or element, to contain input buttons.
  • onFileChange(file) - callback for when file changes. Callback argument is File object.
  • onFileError(error, file): Callback for when file is unsupported or otherwise invalid. Callback arguments are Error object and File object.
  • onDragover(): Callback function for when a file is dragged over the input and can be dropped.
  • onDragleave(): Callback function for when a file is dragged away from the input.
  • onURLSubmit(url): Callback function for when valid URL is submitted. Callback argument is the submitted URL
  • onURLError(error, url): Callback function for when URL's filetype is unsupported or otherwise invalid. Callback arguments are Error object and the submitted URL.
  • text: Object used to specify custom replacements to default text.
    • button: Default is "Choose audio (or video) file".
    • altButton: Default is "Enter file URL".
    • altInputText: Default is "Enter URL of audio or video file, or YouTube video:"
    • closeAlt: Default is "close"


  • showURLInput(): Switch to secondary input for URLs.

  • showFileInput(): Return to primary input for files.

  • getSupportedFormats(): Returns an object with properties 'audio' and 'video', each containing arrays of supported filetypes. Can also be used without initialising object.

      var formats = oTplayer.getSupportedFormats();
      formats;       // { audio: ["mp3", "wav"], video: ["mp4"] }; // ["mp3", "wav"]; // ["mp4"]
  • isFormatSupported(filetype): Returns true if file format is supported by current browser. Can also be used without initialising object:


Browser support

oTinput requires the File API, so only supports modern browsers.

Building dist folder

Running tests

  • Build dist folder
  • Run grunt test

Version history


May 25, 2015

  • Initial release


A dynamic media input form developed for oTranscribe




No releases published


No packages published
You can’t perform that action at this time.