Welcome to JustWave Player!

KirillTV - Always

Description

JustWave Player is JavaScript audio player based on JustWave.class.php.

This is jQuery plugin for generating waveform images of audio and making interactive player on them. Waveform images are generated on the server side by the script JustWave.class.php. Caching mechanism is used by default so that wave images with the same name, dimensions and colors will be generated only once.

View demos and test player

See:
Demo 1 - several players on the page
Demo 2 - player with playlist. Warning: starts automatically and loop through playlist
Test - test single player with almost any parameters and see output results

Usage:

Download justwave.zip or justwave.tgz from Download page and unpack it into your web project.

Include justwave.player.css somewhere at the head of HTML page and justwave.player-min.js somewhere after including jQuery library:

<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- include JustWave Player css and js files -->
<link type="text/css" rel="stylesheet" href="justwave.player.css">
<script src="justwave.player-min.js"></script>

Then when document is ready (in DOMContentLoaded or $(document).ready() event handlers) write:

$.justwave([ [options,] class ])

options

Map (object) of options which can contain the following properties (if default value is blank the option is not set by default):

PropertyDefault valueDescription
ajax'justwave.ajax.php'Server side script for AJAX requests that generate waveforms and attach them to the player(s).
width500Width of player in pixels.
height100Height of player in pixels.
poster Poster image as background.
wave_color'#909296'Color of foreground wave.
prog_color'#FF530D'Color of background wave (progress wave).
back_colorColor of player's background. If not set or an empty string - transparent then.
Note: we can set any picture as background to justwave-wrapper class in justwave.player.css file for example
or through poster option or attribute of DOM audio element.
mode'dataurl'Mode file|dataurl.
type'png'Type of waves' images png|gif|jpg.
wavedir'waves/'Directory in filesystem for storing waveform images.
Note 1: This directory is also used for temporary files during conversion process and should be writable.
Note 2: On Windows' systems always use '/' in path instead of '\'.
buttoncolor'#A47655'Color of play/pause button background, inners are always white.
buttonsizeSize of play/pause in pixels, if 0 or not set - its size is 50% of the height of the player, but not more than 88 pixels.
showname1Display the name of the audio when playback started or while mouse hovering (1 - yes, 0 - no).
namesize15Size of the name of the audio, in pixels.
showtimes1Show time leds on the player surface (1 - yes, 0 - no).

Example:

$(document).ready( function() {
  $.justwave({ showname: 0, buttoncolor: '#337AB7' });
});

Extra options

Note: extra options are not set by default (see also more descriptions below).

forceDo not seek for waveform images in file system.
nocacheDo not use caching mechanism (why?)
twopassUse two pass conversion for normalization.
If waveforms are in cache or in file system this option does not take effect if we don't use nocache and force options.
chainedChain players so that when one starts playing all others are paused.
Note: there may be chained and not chained justwave players on one page,
and chaining mode applies to chained players only.
We can use data-chained attribute to distinct audio elements that should be chained.
Default behavior: not chained, all players can play simultaneously.
nowavesIf set - do not generate waves, show only backgrounds in player.
Caution: experimental feature, use with care.

If extra option is not set, default behavior will be used, which means:

If waves are in cache they will be fetched from there.
If waves were created previously in file system (and are in a wavedir directory) they will be fetched from there then.
Otherwise audio will be converted to WAV format temporally (using ffmpeg external binary) and new waveform images will be created.
In file mode these images (or one image if wave_color = prog_color) will be stored in wavedir directory and we get links to them in waveurl and progressurl JSON-parameters, otherwise we get data-url in waveurl and progressurl JSON-parameters and can use it as image sources.
If audio src is a url it will be temporally downloaded and converted as usual audio.

Options width, height and poster can be set for any audio element individually through the corresponding attributes, for example:
<audio width="600" height="369" poster="posters/hank.jpg" src="media/Queens of Dogtown - I Remember You[demo].mp3"></audio>
Yes, our audio elements can now have width, height and poster attributes - that's what we've been dreaming about for a long time, haven't we?

All options can be set through `data-` attributes of audio element, for example:
<audio src="my_audio.mp3" data-chained="1" data-mode="file" data-wave_color="#3F87BE" data-prog_color="#2A75AD" data-buttoncolor="#00A588" data-showname="0" width="350" height="100"></audio>

class

HTML class name to filter injected players. If not set all audio elements on the page will be injected by JustWave Player.

Example:

$(document).ready( function() {
// inject players to audio elements
// if they have justwave class name only
  $.justwave('justwave');
});

We respect preload, autoplay and loop attributes as much as they are respected by the browser.
If you want to control justwaved audio element target it by your JavaScript code and do what you need.

Note: any option of the player can be changed dynamically before loading new src in audio element through audio.opts object where audio is an audio JavaScript DOM element.
E.g.:
var audio = $('audio')[0];
  audio.opts.width = 400;
  audio.opts.wave_color = '#33C088';
  audio.opts.poster = 'new-poster.png';
 $(audio).attr('src', 'new_song.mp3');

And we wish you best luck and nice time!
Show player's code <audio data-wave_color="#3232C8" data-prog_color="#3232C8" data-back_color="#C0C0C0" width="700" height="90" data-showtimes="0" data-showname="0" data-buttoncolor="#337AB7">
  <source src="media/We Wish You.ogg" type="audio/ogg">
  <source src="media/We Wish You.mp3" type="audio/mpeg">
</audio>

(c) beotiger Andrey Tzar 2015 AD http://justwave.beotiger.com https://github.com/beotiger email: beotiger@gmail.com Yandex.Metrica