videojs-wavesurfer - video.js plugin that adds a navigable waveform for audio and video files

  •        139

A video.js plugin that adds a navigable waveform for audio and video files, using the wavesurfer.js library. Includes support for fullscreen mode and real-time visualization of microphone input. You can use npm (npm install videojs-wavesurfer) to install the plugin, or download it here. If you want to try the examples, check these instructions below.

https://github.com/collab-project/videojs-wavesurfer

Dependencies:

video.js : >=6.0.0
wavesurfer.js : >=2.0.3

Tags
Implementation
License
Platform

   




Related Projects

videojs-record - video.js plugin for recording audio/video/image files.

  •    Javascript

Video.js plugin for recording audio/video/image files. Use npm (npm install videojs-record) to install the plugin or download the library and dependencies elsewhere. If you want to try the examples, check these instructions below.

videojs-contrib-ads - A Tool for Building Video.js Ad Plugins

  •    Javascript

videojs-contrib-ads provides common functionality needed by video advertisement libraries working with video.js. It takes care of a number of concerns for you, reducing the code you have to write for your ad plugin. videojs-contrib-ads is not a stand-alone ad plugin. It is a library that is used by other ad plugins in order to fully support video.js. If you want to build an ad plugin, you've come to the right place. If you want to play ads in video.js without writing code, this is not the right project for you.

waveform-playlist - Multitrack Web Audio editor and player with canvas waveform preview

  •    Javascript

Inspired by Audacity, this project is a multiple track playlist editor written in ES2015 using the Web Audio API. Load tracks and set cues (track cue in, cue out), fades (track fade in, fade out) and track start/end times within the playlist. I've written up some demos on github for the different audio fade types in the project.

video-js-swf - Custom Flash Player for VideoJS

  •    Javascript

The lightweight Flash video player for Video.js. This allows the Video.js player's skins, plugins, and other features to work with both HTML5 and Flash. This project doesn't need to be used if you simply want to use the Flash tech in Video.js.


Videojs - HTML5 & Flash video player

  •    Javascript

Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. It is an extendable framework/library around the native video element. It unifies the native video API across browsers.

videojs-vast-plugin - A VideoJS plugin for VAST

  •    Javascript

This plugin reads a VAST file, grabs the first video it can, and plays it as pre-roll advertisement before your video. It will also click through to whatever url the advertiser designates, track any clicks, and fire all of the correct pixel trackers at the right times. And when you play that video, a pre-roll ad should play beforehand.

videojs-youtube - YouTube playback technology for Video.js

  •    Javascript

You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source and build it using npm run build. Then, the only file you need is dist/Youtube.min.js. Use branch vjs4 if you still using old VideoJS v4.x.

videojs-contrib-hls - HLS library for video.js

  •    Javascript

Play back HLS with video.js, even where it's not natively supported. Drop by our slack channel (#playback) on the Video.js slack.

wavesurfer.js - Navigable waveform built on Web Audio and Canvas

  •    Javascript

Interactive navigable audio visualization using Web Audio and Canvas. See a tutorial and examples on wavesurfer-js.org.

videojs-ima - IMA SDK Plugin for Video.js

  •    Javascript

The IMA SDK Plugin for Video.js provides a quick and easy IMA SDK integration for the Video.js player. To see the plugin in action, check out our samples.

videojs-vast-vpaid - video.js vast plugin

  •    Javascript

This plugin allows videojs to monetise its videos. To do so, it implements the VAST and VPAID specifications from IAB. Currently we support VAST and VPAID Flash and HTML5 preroll ads, we will add more VAST ad types as we need them.

HTML5 Video for Umbraco

  •    

This is a project to allow you to insert HTML5 <video> into your website with a flash player fallback if the users browser does not support the <video> tag. We will utilise the VideoJS library in order to achieve an easily skinable <video> player by using CSS.

http-streaming - HLS, DASH, and future HTTP streaming protocols library for video.js

  •    Javascript

Play HLS, DASH, and future HTTP streaming protocols with video.js, even where they're not natively supported.

cordova-plugin-media-capture - Mirror of Apache Cordova Plugin media-capture

  •    Javascript

This plugin provides access to the device's audio, image, and video capture capabilities.WARNING: Collection and use of images, video, or audio from the device's camera or microphone raises important privacy issues. Your app's privacy policy should discuss how the app uses such sensors and whether the data recorded is shared with any other parties. In addition, if the app's use of the camera or microphone is not apparent in the user interface, you should provide a just-in-time notice before the app accesses the camera or microphone (if the device operating system doesn't do so already). That notice should provide the same information noted above, as well as obtaining the user's permission (e.g., by presenting choices for OK and No Thanks). Note that some app marketplaces may require your app to provide just-in-time notice and obtain permission from the user prior to accessing the camera or microphone. For more information, please see the Privacy Guide.

PiTiVi - Movie editor for Linux desktop

  •    Python

PiTiVi is designed to be a simple video editor to meet the needs of users in the GNOME desktop environment. PiTiVi inherits its capabilities for importing and exporting (rendering) media from the GStreamer framework, or plugins for the GStreamer framework. PiTiVi supports simple media editing capabilities such as trimming, snapping, splitting and cutting of clips. Audio mixing is supported by curves, visualised as line segments drawn over an audio waveform.

peaks.js - JavaScript UI component for interacting with audio waveforms

  •    Javascript

A browser based audio waveform visualisation frontend component from BBC R&D.Peaks.js is a modular client-side JavaScript component designed for the display of and interaction with audio waveforms in the browser.

party-mode - An experimental music visualizer using d3.js and the web audio api.

  •    Javascript

Using the web audio api, I can get an array of numbers which corresponds to the waveform of the sound an html5 audio element is producing. There's a good tutorial on how to do this. Then, using requestAnimationFrame (with a little frame limiting for performance reasons) I'm updating that array as the music changes. I then normalize the data a bit (or transform it slightly depending on the visualization) and redraw the screen based on the updated array. I'm using d3.js to draw and redraw SVG based on this normalized data. Each visualization uses the data a bit differently -- it was mostly trial and error to get some stuff I liked looking at. Since I'm using D3 -- which is just drawing SVG -- I was able to style everything in CSS (no images are used at all, including icons). There are a handful of differently colored themes for each visualization, and I do some rudimentary CSS namespacing by updating a class applied to the html element. eg. <html class='theme_1'>. This lets me override or substitute CSS rules pretty trivially. I can add some additional variation to each theme by messing with pseudo selectors. For example, I can use :nth-of-type to hide every nth SVG rectangle or making every odd child have a different stroke-dasharray, etc.

SoundJS - A Javascript library for working with Audio

  •    Javascript

SoundJS is a library to make working with audio on the web easier. It provides a consistent API for playing audio in different browsers, including using a target plugin model to provide an easy way to provide additional audio plugins like a Flash fallback (included, but must be used separately from the combined/minified version).A mechanism has been provided for easily tying in audio preloading to PreloadJS.

waveform-data

  •    Javascript

waveform-data.js is a JavaScript library for creating zoomable, browsable and segmentable representations of audio waveforms.We use these projects daily in applications such as BBC Radio Archive and browser editing and sharing tools for BBC content editors.