jquery-waveform-visualizer
所属分类：JavaScript/JQuery
开发工具：HTML
文件大小：735KB
下载次数：0
上传日期：2015-08-03 14:00:53
上 传 者：
sh-1993
说明： 在waves.js之上构建一个简单的插件来显示波形
(a simple plugin build on top of waves.js to display waveforms)
文件列表:
example (0, 2015-03-11)
example\data (0, 2015-03-11)
example\data\annotations.json (89, 2015-03-11)
example\data\drum-loop.wav (306844, 2015-03-11)
example\index.html (1205, 2015-03-11)
example\js (0, 2015-03-11)
example\js\drumLoop.wav (306844, 2015-03-11)
example\js\jquery-1.11.2.js (284184, 2015-03-11)
example\js\waves.min.js (571540, 2015-03-11)
jquery-waveform-visualizer.js (8141, 2015-03-11)
jQuery waveform visualizer
===================================================
_A simple jQuery plugin build around [`waves.js`](https://github.com/Ircam-RnD/waves), to visualize waveform and segments along with an HTML5 audio player._
__warning__: this plugin relies on the `webAudioAPI` (IE not supported)
## Install
first load `jquery`, `waves.js` and the plugin files in your page, before closing the `body` tag is considered as a good practice.
```html
```
## Plugin initialization
In order to display the visualization, you need to insert the following tag:
```html
```
- `data-audio` _(mandatory)_
value must be set to the path to your audio file
_for cross browser compatibility, use a `.wav` file, multiple sources are not yet supported_
- `data-annotations` _(optionnal)_
attribute value must be the path to your annotation data file
The data file is used to configure the segments on the visualization and must follow this convention:
```javascript
[
{
"start": 1.2, // in seconds
"duration": 1 // in seconds
}, {
// ...
}
]
```
You can also set the size of the module in css (defaults: `width: 100%, height: 200px`):
```css
#timeline {
width: 800px;
height: 240px;
}
```
Finally, initialize the plugin:
```javascript
$(document).ready(function() {
$('#timeline').waveformVisualizer();
});
```
## Configuration options
Here are the default values:
```javascript
var defaults = {
waveformColor: '#586e75',
segmentColor: '#cb4b16',
anchorColor: '#657b83',
cursorColor: '#dc322f',
segmentOpacity: 0.3
};
```
These values can be overriden in the plugin initialization:
```javascript
$('#timeline').waveformVisualizer({
waveformColor: 'steelblue',
// ...
})
```
## Example
To see a live example of the plugin, launch a file server in this directory and go to the `/example` folder
近期下载者：
相关文件：
收藏者：