added audioplayer contrib module
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,45 @@
|
||||
<html ng-app="mdWavesurferApp">
|
||||
<head>
|
||||
<title>wavesurfer.js | Angular Material</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
|
||||
<link href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'
|
||||
rel='stylesheet' type='text/css'>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css" rel="stylesheet">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.css"
|
||||
rel="stylesheet" type="text/css"/>
|
||||
|
||||
<link rel="stylesheet" href="main.css"/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.0-rc3/angular-material.min.js"></script>
|
||||
<script type="text/javascript" src="../../dist/wavesurfer.js"></script>
|
||||
<script type="text/javascript" src="wavesurfer.directive.js"></script>
|
||||
<script type="text/javascript" src="main.js"></script>
|
||||
|
||||
</head>
|
||||
<body ng-controller="MainController">
|
||||
<md-wavesurfer-audio player-wave-color="gray" player-progress-color="black"
|
||||
player-backend="MediaElement">
|
||||
<!-- This is analogous to HTML <source> element -->
|
||||
<md-wavesurfer-source src="../media/demo.wav" title="czskamaarù – Trou"></md-wavesurfer-source>
|
||||
<md-wavesurfer-source src="../panner/media.wav" title="日本人の話し"></md-wavesurfer-source>
|
||||
<md-wavesurfer-source src="../elan/transcripts/001z.mp3"
|
||||
title="Рассказы о сновидениях"></md-wavesurfer-source>
|
||||
<!-- <md-wavesurfer-source -->
|
||||
<!-- src="http://download.wavetlan.com/SVV/Media/HTTP/MP3/Nero_SmartTrax/NeroSmartTrax_test1_MPEG2_Stereo_CBR_48kbps_22050Hz.mp3" -->
|
||||
<!-- title="Remote: Nero SmartTrax- Test 1"></md-wavesurfer-source> -->
|
||||
<!-- <md-wavesurfer-source -->
|
||||
<!-- src="http://download.wavetlan.com/SVV/Media/HTTP/MP3/Nero_SmartTrax/NeroSmartTrax_test2_MPEG1_Mono_CBR_64kbps_44100Hz.mp3" -->
|
||||
<!-- title="Remote: Nero SmartTrax- Test 2"></md-wavesurfer-source> -->
|
||||
|
||||
<!-- Long list, using previously loaded files, need to test container.-->
|
||||
<md-wavesurfer-source ng-repeat="item in longList" src="{{item.url}}"
|
||||
title="{{item.title}}"></md-wavesurfer-source>
|
||||
|
||||
|
||||
</md-wavesurfer-audio>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
.text-center {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left !important;;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right !important;;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify !important;;
|
||||
}
|
||||
|
||||
md-icon[md-font-icon] {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
md-toolbar.md-toolbar-sm .md-toolbar-tools {
|
||||
max-height: 32px;
|
||||
padding: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
md-toolbar.md-toolbar-sm {
|
||||
min-height: 24px;
|
||||
}
|
||||
.md-player-controls .md-button {
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Created by intelWorx on 19/11/2015.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
angular.module('mdWavesurferApp', ['mdWavesurfer'])
|
||||
.config(function ($mdIconProvider) {
|
||||
//$mdIconProvider.fontSet('zmdi', 'fontawesome');
|
||||
})
|
||||
.controller('MainController', ['$scope',
|
||||
function ($scope) {
|
||||
$scope.urls = ["../media/demo.wav", "../panner/media.wav", "../elan/transcripts/001z.mp3"];
|
||||
$scope.longList = [];
|
||||
for (var i = 0; i < 100; i++) {
|
||||
$scope.longList.push({
|
||||
title: 'Long List test: ' + i,
|
||||
url: $scope.urls[Math.floor(3 * Math.random())]
|
||||
});
|
||||
}
|
||||
}])
|
||||
})();
|
||||
@@ -0,0 +1,30 @@
|
||||
<md-card layout="column">
|
||||
<div ng-transclude=""></div>
|
||||
<md-toolbar class="md-toolbar-sm">
|
||||
<div class="text-center" class="md-toolbar-tools">
|
||||
<h2 style="font-size: 24px;">Audio Player</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-list layout="column">
|
||||
<md-virtual-repeat-container style="height: 250px">
|
||||
<md-list-item md-virtual-repeat="track in audio.tracks" md-start-index="audio.selectedIndex"
|
||||
ng-click="audio.setTrack($index, true)">
|
||||
<p>
|
||||
{{$index+1}}. {{track.title}}
|
||||
</p>
|
||||
|
||||
<div class="text-right md-secondary">
|
||||
{{track.duration | mdWavesurferTimeFormat}}
|
||||
</div>
|
||||
<md-divider ng-if="$index < audio.tracks.length-1"></md-divider>
|
||||
</md-list-item>
|
||||
</md-virtual-repeat-container>
|
||||
</md-list>
|
||||
<md-wavesurfer-player
|
||||
url="{{audio.currentTrack.src}}#{{audio.selectedIndex}}"
|
||||
title="{{audio.selectedIndex+1}}. {{audio.currentTrack.title}}"
|
||||
extra-buttons="audio.extraButtons"
|
||||
properties="audio.playerProperties"
|
||||
>
|
||||
</md-wavesurfer-player>
|
||||
</md-card>
|
||||
@@ -0,0 +1,70 @@
|
||||
<div layout="column" class="audioPlayerWrapper">
|
||||
<md-toolbar class="md-toolbar-sm {{control.themeClass}} {{control.toolbarClass}} " style="color: #333333; background:
|
||||
none;">
|
||||
<div class="md-toolbar-tools" layout="row">
|
||||
<div flex="initial" layout-align="center start">
|
||||
{{control.currentTime | mdWavesurferTimeFormat}}
|
||||
</div>
|
||||
<div flex="grow" class="text-center">
|
||||
{{control.title}}
|
||||
</div>
|
||||
<div flex="initial" layout-align="center end" class="text-right">
|
||||
{{control.surfer.getDuration() | mdWavesurferTimeFormat}}
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
<md-divider></md-divider>
|
||||
<md-content>
|
||||
<div class="waveSurferWave"></div>
|
||||
</md-content>
|
||||
<md-divider md-inset></md-divider>
|
||||
<md-toolbar class="{{control.themeClass}} {{control.toolbarClass}} md-player-controls">
|
||||
<div layout="row" class="md-toolbar-tools">
|
||||
<div flex="initial" layout-align="center start" ng-show="control.extraButtons.length">
|
||||
<md-button ng-click="btn.action()"
|
||||
ng-repeat="btn in control.extraButtons" class="{{control.themeClass}} {{btn.class}}">
|
||||
<md-tooltip>
|
||||
{{btn.title}}
|
||||
</md-tooltip>
|
||||
<md-icon md-font-icon="{{btn.icon}}"></md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div flex layout="row" layout-align="center center">
|
||||
<md-button ng-click="control.surfer.skipBackward()" type="button"
|
||||
ng-disabled="!control.surfer.isPlaying()">
|
||||
<md-tooltip>
|
||||
Rewind
|
||||
</md-tooltip>
|
||||
<md-icon md-font-icon="zmdi zmdi-fast-rewind"></md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button ng-disabled="!control.isReady" type="button"
|
||||
ng-click="control.surfer.playPause()">
|
||||
<md-tooltip>
|
||||
{{control.surfer.isPlaying() ? 'Pause' : 'Play'}}
|
||||
</md-tooltip>
|
||||
<md-icon ng-show="control.surfer.isPlaying()" md-font-icon="zmdi zmdi-pause"></md-icon>
|
||||
<md-icon ng-show="!control.surfer.isPlaying()" md-font-icon="zmdi zmdi-play"></md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button type="button" ng-click="control.surfer.skipForward()"
|
||||
ng-disabled="!control.surfer.isPlaying()">
|
||||
<md-tooltip>
|
||||
Skip forward
|
||||
</md-tooltip>
|
||||
<md-icon md-font-icon="zmdi zmdi-fast-forward"></md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
<div flex="initial" layout-align="center end" >
|
||||
<md-button type="button" ng-click="control.toggleMute()" ng-disabled="!control.surfer.isPlaying()">
|
||||
<md-tooltip>
|
||||
Toggle mute
|
||||
</md-tooltip>
|
||||
<md-icon md-font-icon="zmdi zmdi-volume-off" ng-show="control.isMute"></md-icon>
|
||||
<md-icon md-font-icon="zmdi zmdi-volume-up" ng-show="!control.isMute"></md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</div>
|
||||
@@ -0,0 +1,415 @@
|
||||
/**
|
||||
* Created by intelWorx on 19/11/2015.
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Main module, your application should depend on this
|
||||
* @module {mdWavesurfer}
|
||||
*/
|
||||
var app = angular.module('mdWavesurfer', ['ngMaterial']);
|
||||
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name $mdWavesurferUtils
|
||||
*
|
||||
* @description
|
||||
*
|
||||
* Utility service for this directive, exposes method:
|
||||
* - getLength(url), which returns a promise for the length of the audio specified by URL
|
||||
*
|
||||
* ```js
|
||||
* app.directive('myFancyDirective', function(mdWavesurferUtils) {
|
||||
* return {
|
||||
* restrict: 'e',
|
||||
* link: function(scope, el, attrs) {
|
||||
* mdWavesurferUtils(attrs.url)
|
||||
* .then(function(l){
|
||||
* scope.length = l;
|
||||
* }, function(){
|
||||
* someErrorhandler()
|
||||
* })
|
||||
* ;
|
||||
* }
|
||||
* };
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
app.factory('mdWavesurferUtils', ['$q', '$document', '$timeout',
|
||||
function ($q, $document, $timeout) {
|
||||
return {
|
||||
getLength: function (object) {
|
||||
var deferred = $q.defer();
|
||||
var estimateLength = function (url) {
|
||||
var audio = $document[0].createElement('audio');
|
||||
audio.src = url;
|
||||
audio.addEventListener('loadeddata', function listener() {
|
||||
deferred.resolve(this.duration);
|
||||
audio.removeEventListener('loadeddata', listener);
|
||||
audio.src = 'data:audio/mpeg,0';//destroy loading.
|
||||
});
|
||||
|
||||
audio.addEventListener('error', function (e) {
|
||||
deferred.resolve(e.target.error);
|
||||
});
|
||||
};
|
||||
|
||||
if (typeof object === 'string') {
|
||||
//this is a URL
|
||||
estimateLength(object);
|
||||
} else {
|
||||
$timeout(function () {
|
||||
deferred.reject(new DOMError("NotSupportedError", "Specified argument is not supported"));
|
||||
});
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
};
|
||||
}
|
||||
]);
|
||||
|
||||
/**
|
||||
* @ngdoc filter
|
||||
* @name mdWavesurferTimeFormat
|
||||
*
|
||||
* Simple filter to convert value in seconds to MM:SS format
|
||||
*
|
||||
* @param Number duration in seconds
|
||||
*/
|
||||
app.filter('mdWavesurferTimeFormat', function () {
|
||||
return function (input) {
|
||||
if (!input) {
|
||||
return "00:00";
|
||||
}
|
||||
|
||||
var minutes = Math.floor(input / 60);
|
||||
var seconds = Math.ceil(input) % 60;
|
||||
|
||||
return (minutes < 10 ? '0' : '')
|
||||
+ minutes
|
||||
+ ":"
|
||||
+ (seconds < 10 ? '0' : '') + seconds;
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
app.controller('mdWavesurferAudioController', ['$attrs', '$element',
|
||||
function (attributes, $element) {
|
||||
var audio = this;
|
||||
|
||||
audio.tracks = [];
|
||||
audio.selectedIndex = audio.selectedIndex || 0;
|
||||
audio.currentTrack = null;
|
||||
|
||||
//adds to an audio track
|
||||
audio.addTrack = function (trackScope) {
|
||||
if (audio.tracks.indexOf(trackScope) < 0) {
|
||||
audio.tracks.push(trackScope);
|
||||
}
|
||||
|
||||
if (!audio.currentTrack) {
|
||||
audio.currentTrack = audio.tracks[audio.selectedIndex];
|
||||
}
|
||||
};
|
||||
|
||||
//remove audio track
|
||||
audio.removeTrack = function (trackScope) {
|
||||
var idx = audio.tracks.indexOf(trackScope);
|
||||
if (idx >= 0) {
|
||||
audio.tracks.splice(idx, 1);
|
||||
}
|
||||
};
|
||||
|
||||
audio.playerProperties = {}
|
||||
var nKey;
|
||||
for (var attr in attributes) {
|
||||
if (attr.match(/^player/)) {
|
||||
nKey = attr.replace(/^player([A-Z])/, function (m, $1) {
|
||||
return $1.toLowerCase();
|
||||
});
|
||||
audio.playerProperties[nKey] = attributes[attr];
|
||||
}
|
||||
}
|
||||
|
||||
var getPlayer = function(){
|
||||
return $element.find('md-wavesurfer-player').controller('mdWavesurferPlayer');
|
||||
};
|
||||
var setAutoPlay = function (forcePlay) {
|
||||
var controller = getPlayer();
|
||||
if (controller && (forcePlay || controller.surfer.isPlaying())) {
|
||||
controller.autoPlay = true;
|
||||
}
|
||||
};
|
||||
audio.setTrack = function (idx, forcePlay) {
|
||||
if (audio.tracks.length > idx) {
|
||||
if (audio.selectedIndex === idx) {
|
||||
var ctrl = getPlayer();
|
||||
ctrl.surfer.playPause();
|
||||
} else {
|
||||
setAutoPlay(forcePlay);
|
||||
audio.currentTrack = audio.tracks[idx];
|
||||
audio.selectedIndex = idx;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
audio.extraButtons = [{
|
||||
icon: 'zmdi zmdi-skip-previous',
|
||||
title: 'Previous',
|
||||
action: function ($event) {
|
||||
if (audio.selectedIndex > 0) {
|
||||
audio.setTrack(audio.selectedIndex - 1);
|
||||
}
|
||||
},
|
||||
class: ''
|
||||
}, {
|
||||
icon: 'zmdi zmdi-skip-next',
|
||||
title: 'Next',
|
||||
action: function ($event) {
|
||||
if (audio.selectedIndex < audio.tracks.length - 1) {
|
||||
audio.setTrack(audio.selectedIndex + 1);
|
||||
}
|
||||
},
|
||||
class: ''
|
||||
}];
|
||||
|
||||
|
||||
}
|
||||
]);
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name md-wavesurfer-audio
|
||||
*
|
||||
* Directive for playing a set of audio files. This directive is analogous to `<audio>` HTML tag.
|
||||
* The audio files, should be specified using the `md-wavesurfer-source`
|
||||
*
|
||||
* WaveSurfer properties can be passed in using the prefix : player-* for attributes, e.g. `player-wave-color` is
|
||||
* equivalent to WaveSurfer's waveColor option.
|
||||
*
|
||||
* Must be used as an element.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <md-wavesurfer-audio player-wave-color="gray" player-progress-color="black" player-backend="MediaElement">
|
||||
* <md-wavesurfer-source src="source1" title="Title-1"></md-wavesurfer-source>
|
||||
* <md-wavesurfer-source src="source2" title="Title-2"></md-wavesurfer-source>
|
||||
* <md-wavesurfer-source src="source3" title="Title-3"></md-wavesurfer-source>
|
||||
* ...
|
||||
* <md-wavesurfer-source src="sourceN" title="Рассказы о сновидениях"></md-wavesurfer-source>
|
||||
* </md-wavesurfer-audio>
|
||||
* ```
|
||||
*
|
||||
* @param string player-* specifies WaveSurfer properties.
|
||||
*
|
||||
*/
|
||||
app.directive('mdWavesurferAudio', [
|
||||
function () {
|
||||
return {
|
||||
|
||||
restrict: 'E',
|
||||
templateUrl: 'md-player-audio.partial.html',
|
||||
transclude: true,
|
||||
controller: 'mdWavesurferAudioController',
|
||||
controllerAs: 'audio'
|
||||
};
|
||||
}
|
||||
]);
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
*
|
||||
* @name md-wavesurfer-source
|
||||
*
|
||||
* This directive is used within the `md-wavesurfer-audio` directive to specify an audio file source, it is
|
||||
* synonymous to `<source>` tag in HTML
|
||||
*
|
||||
* The directive cannot be used as standalone.
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* ```html
|
||||
* <md-wavesurfer-source src="source3" title="Title-3" album-art="Album-Art-Url" duration=""></md-wavesurfer-source>
|
||||
* ```
|
||||
* @param String src the URL to the audio file, this is required.
|
||||
* @param String title track title
|
||||
* @param String album-art the album art URL
|
||||
* @param Number duration the length of the audio file in seconds, will be auto-detected if not specified.
|
||||
*
|
||||
*/
|
||||
app.directive('mdWavesurferSource', ['mdWavesurferUtils',
|
||||
function (mdWavesurferUtils) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^mdWavesurferAudio',
|
||||
scope: {
|
||||
src: '@',
|
||||
albumArt: '@',
|
||||
title: '@',
|
||||
duration: '='
|
||||
},
|
||||
link: function (scope, element, attrs, audio) {
|
||||
audio.addTrack(scope);
|
||||
|
||||
if (!scope.duration) {
|
||||
mdWavesurferUtils.getLength(scope.src).then(function (dur) {
|
||||
scope.duration = dur;
|
||||
}, function (e) {
|
||||
scope.duration = 0;
|
||||
console.log('Failed to get audio length, reason: ', e.message);
|
||||
});
|
||||
}
|
||||
|
||||
element.on('$destroy', function () {
|
||||
audio.removeTrack(audio);
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
]);
|
||||
|
||||
app.controller('mdWavesurferPlayerController', ['$element', '$scope', '$attrs', '$interval', '$mdTheming',
|
||||
function ($element, $scope, attributes, $interval, $mdTheme) {
|
||||
var control = this, timeInterval;
|
||||
|
||||
control.themeClass = "md-" + $mdTheme.defaultTheme() + "-theme";
|
||||
control.isReady = false;
|
||||
control.surfer = null;
|
||||
|
||||
control.toggleMute = function () {
|
||||
if (control.surfer) {
|
||||
control.surfer.toggleMute();
|
||||
control.isMute = !control.isMute;
|
||||
}
|
||||
};
|
||||
|
||||
var initWaveSurfer = function () {
|
||||
control.isReady = false;
|
||||
control.currentTime = 0;
|
||||
if (!control.surfer) {
|
||||
var options = {
|
||||
container: $element[0].querySelector('.waveSurferWave')
|
||||
}, defaults = {
|
||||
scrollParent: true,
|
||||
waveColor: 'violet',
|
||||
progressColor: 'purple'
|
||||
};
|
||||
|
||||
options = angular.extend(defaults, attributes, (control.properties || {}), options);
|
||||
control.surfer = WaveSurfer.create(options);
|
||||
|
||||
control.surfer.on('ready', function () {
|
||||
control.isReady = true;
|
||||
if (control.autoPlay) {
|
||||
control.surfer.play();
|
||||
}
|
||||
$scope.$apply();
|
||||
});
|
||||
|
||||
control.surfer.on('pause', function () {
|
||||
stopInterval();
|
||||
});
|
||||
|
||||
control.surfer.on('finish', function () {
|
||||
stopInterval();
|
||||
});
|
||||
|
||||
control.surfer.on('play', function () {
|
||||
startInterval();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
control.title = control.title || control.src.split('/').pop();
|
||||
control.surfer.load(control.src);
|
||||
};
|
||||
|
||||
var startInterval = function () {
|
||||
timeInterval = $interval(function () {
|
||||
control.currentTime = control.isReady ? control.surfer.getCurrentTime() : 0;
|
||||
}, 1000);
|
||||
}, stopInterval = function () {
|
||||
$interval.cancel(timeInterval);
|
||||
};
|
||||
|
||||
|
||||
initWaveSurfer();
|
||||
|
||||
$scope.$watch('control.src', function (src1, src2) {
|
||||
if (src1 != src2) {
|
||||
initWaveSurfer();
|
||||
}
|
||||
});
|
||||
|
||||
$element.on('$destroy', function () {
|
||||
if (control.surfer) {
|
||||
control.surfer.destroy();
|
||||
}
|
||||
stopInterval();
|
||||
});
|
||||
|
||||
$scope.$watch(function () {
|
||||
var div = $element[0].querySelector('.audioPlayerWrapper');
|
||||
return div ? div.offsetWidth : 0;
|
||||
}, function (width) {
|
||||
if (width < 1) {
|
||||
//hidden
|
||||
control.surfer.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
]);
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
*
|
||||
* @name md-wavesurfer-player
|
||||
*
|
||||
* @usage
|
||||
* This directive can be used as a stand-alone directive to display Audio WaveSurfer with a few controls, by default
|
||||
* this will only display play/pause, fast-forward, rewind and mute toggle buttons, however, you can add extra
|
||||
* buttons using the `extra-buttons` parameters.
|
||||
*
|
||||
* ```html
|
||||
* <md-wavesurfer-player url="trackUrl" title="Track Title"
|
||||
* extra-buttons="extraButtons" properties="properties">
|
||||
* </md-wavesurfer-player>
|
||||
* ```
|
||||
*
|
||||
* @param {string} url the URL of the audio file
|
||||
* @param {string} title title of the audio track
|
||||
* @param {object} properties an object specifying init options for WaveSurfer
|
||||
* @param {boolean} auto-play specifies if the player should start as soon as it's loaded.
|
||||
* @param {object[]} extra-buttons a list of extra buttons to add to the control panel
|
||||
* each button should be an object with the following properties:
|
||||
* {
|
||||
* title: "button title"
|
||||
* action: "call back to call when button is clicked, executed in parent scope",
|
||||
* icon: "md-font-icon parameter for the button"
|
||||
* class: "extra classes to add to the button."
|
||||
* }
|
||||
*
|
||||
* Every other attribute passed to this directive is assumed to a WaveSurver init parameter.
|
||||
*/
|
||||
app.directive('mdWavesurferPlayer', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'md-player.partial.html',
|
||||
scope: {
|
||||
src: '@url',
|
||||
title: '@',
|
||||
extraButtons: '=',
|
||||
toolbarClass: '@',
|
||||
autoPlay: '=',
|
||||
properties: '='
|
||||
},
|
||||
controller: 'mdWavesurferPlayerController',
|
||||
controllerAs: 'control',
|
||||
bindToController: true
|
||||
};
|
||||
});
|
||||
;
|
||||
})();
|
||||
|
||||
+63
@@ -0,0 +1,63 @@
|
||||
var app = angular.module('ngWavesurfer', []);
|
||||
|
||||
app.directive('ngWavesurfer', function () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
|
||||
link: function ($scope, $element, $attrs) {
|
||||
$element.css('display', 'block');
|
||||
|
||||
var options = angular.extend({ container: $element[0] }, $attrs);
|
||||
var wavesurfer = WaveSurfer.create(options);
|
||||
|
||||
if ($attrs.url) {
|
||||
wavesurfer.load($attrs.url, $attrs.data || null);
|
||||
}
|
||||
|
||||
$scope.$emit('wavesurferInit', wavesurfer);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
app.controller('PlaylistController', function ($scope) {
|
||||
var activeUrl = null;
|
||||
|
||||
$scope.paused = true;
|
||||
|
||||
$scope.$on('wavesurferInit', function (e, wavesurfer) {
|
||||
$scope.wavesurfer = wavesurfer;
|
||||
|
||||
$scope.wavesurfer.on('play', function () {
|
||||
$scope.paused = false;
|
||||
});
|
||||
|
||||
$scope.wavesurfer.on('pause', function () {
|
||||
$scope.paused = true;
|
||||
});
|
||||
|
||||
$scope.wavesurfer.on('finish', function () {
|
||||
$scope.paused = true;
|
||||
$scope.wavesurfer.seekTo(0);
|
||||
$scope.$apply();
|
||||
});
|
||||
});
|
||||
|
||||
$scope.play = function (url) {
|
||||
if (!$scope.wavesurfer) {
|
||||
return;
|
||||
}
|
||||
|
||||
activeUrl = url;
|
||||
|
||||
$scope.wavesurfer.once('ready', function () {
|
||||
$scope.wavesurfer.play();
|
||||
$scope.$apply();
|
||||
});
|
||||
|
||||
$scope.wavesurfer.load(activeUrl);
|
||||
};
|
||||
|
||||
$scope.isPlaying = function (url) {
|
||||
return url == activeUrl;
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Angular</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- AngularJS -->
|
||||
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body ng-app="ngWavesurfer" ng-controller="PlaylistController">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">wavesurfer.js Angular Demo</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="row" style="margin: 30px 0">
|
||||
<div class="col-sm-10">
|
||||
<ng-wavesurfer url="../media/demo.wav" wave-color="#337ab7" progress-color="#23527c" height="64">
|
||||
</ng-wavesurfer>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-2">
|
||||
<button class="btn btn-success btn-block" ng-click="wavesurfer.playPause()">
|
||||
<span id="play" ng-show="paused">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
</span>
|
||||
|
||||
<span id="pause" ng-show="!paused">
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group" id="playlist">
|
||||
<a href=""
|
||||
ng-class="{ 'list-group-item': true, active: isPlaying('../media/demo.wav') }"
|
||||
ng-click="play('../media/demo.wav')">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
czskamaarù – Trou
|
||||
<span class="badge">0:21</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
ng-class="{ 'list-group-item': true, active: isPlaying('../panner/media.wav') }"
|
||||
ng-click="play('../panner/media.wav')">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
日本人の話し
|
||||
<span class="badge">1:04</span>
|
||||
</a>
|
||||
|
||||
<a href=""
|
||||
ng-class="{ 'list-group-item': true, active: isPlaying('../elan/transcripts/001z.mp3') }"
|
||||
ng-click="play('../elan/transcripts/001z.mp3')">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Рассказы о сновидениях
|
||||
<span class="badge badge-info">1:26</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<p>
|
||||
Audio sources:<br />
|
||||
<a rel="nofollow" href="http://www.jamendo.com/en/track/661578/trou"><b>Trou</b> <span class="muted">by</span> <b>czskamaarù</b></a>,
|
||||
<a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
|
||||
region.wavesurfer-region:before {
|
||||
content: attr(data-region-label);
|
||||
}
|
||||
|
||||
region.wavesurfer-region[data-region-highlight] {
|
||||
border: 1px solid rgb(86, 180, 239);
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
@@ -0,0 +1,264 @@
|
||||
/**
|
||||
* Create a WaveSurfer instance.
|
||||
*/
|
||||
var wavesurfer;
|
||||
|
||||
/**
|
||||
* Init & load.
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init wavesurfer
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: '#waveform',
|
||||
height: 100,
|
||||
pixelRatio: 1,
|
||||
scrollParent: true,
|
||||
normalize: true,
|
||||
minimap: true,
|
||||
backend: 'MediaElement',
|
||||
plugins: [
|
||||
WaveSurfer.regions.create(),
|
||||
WaveSurfer.minimap.create({
|
||||
height: 30,
|
||||
waveColor: '#ddd',
|
||||
progressColor: '#999',
|
||||
cursorColor: '#999'
|
||||
}),
|
||||
WaveSurfer.timeline.create({
|
||||
container: "#wave-timeline"
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
wavesurfer.util.ajax({
|
||||
responseType: 'json',
|
||||
url: 'rashomon.json'
|
||||
}).on('success', function (data) {
|
||||
wavesurfer.load(
|
||||
'http://www.archive.org/download/mshortworks_001_1202_librivox/msw001_03_rashomon_akutagawa_mt_64kb.mp3',
|
||||
data
|
||||
);
|
||||
});
|
||||
|
||||
/* Regions */
|
||||
|
||||
wavesurfer.on('ready', function () {
|
||||
wavesurfer.enableDragSelection({
|
||||
color: randomColor(0.1)
|
||||
});
|
||||
|
||||
if (localStorage.regions) {
|
||||
loadRegions(JSON.parse(localStorage.regions));
|
||||
} else {
|
||||
// loadRegions(
|
||||
// extractRegions(
|
||||
// wavesurfer.backend.getPeaks(512),
|
||||
// wavesurfer.getDuration()
|
||||
// )
|
||||
// );
|
||||
wavesurfer.util.ajax({
|
||||
responseType: 'json',
|
||||
url: 'annotations.json'
|
||||
}).on('success', function (data) {
|
||||
loadRegions(data);
|
||||
saveRegions();
|
||||
});
|
||||
}
|
||||
});
|
||||
wavesurfer.on('region-click', function (region, e) {
|
||||
e.stopPropagation();
|
||||
// Play on click, loop on shift click
|
||||
e.shiftKey ? region.playLoop() : region.play();
|
||||
});
|
||||
wavesurfer.on('region-click', editAnnotation);
|
||||
wavesurfer.on('region-updated', saveRegions);
|
||||
wavesurfer.on('region-removed', saveRegions);
|
||||
wavesurfer.on('region-in', showNote);
|
||||
|
||||
wavesurfer.on('region-play', function (region) {
|
||||
region.once('out', function () {
|
||||
wavesurfer.play(region.start);
|
||||
wavesurfer.pause();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* Toggle play/pause buttons. */
|
||||
var playButton = document.querySelector('#play');
|
||||
var pauseButton = document.querySelector('#pause');
|
||||
wavesurfer.on('play', function () {
|
||||
playButton.style.display = 'none';
|
||||
pauseButton.style.display = '';
|
||||
});
|
||||
wavesurfer.on('pause', function () {
|
||||
playButton.style.display = '';
|
||||
pauseButton.style.display = 'none';
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Save annotations to localStorage.
|
||||
*/
|
||||
function saveRegions() {
|
||||
localStorage.regions = JSON.stringify(
|
||||
Object.keys(wavesurfer.regions.list).map(function (id) {
|
||||
var region = wavesurfer.regions.list[id];
|
||||
return {
|
||||
start: region.start,
|
||||
end: region.end,
|
||||
attributes: region.attributes,
|
||||
data: region.data
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Load regions from localStorage.
|
||||
*/
|
||||
function loadRegions(regions) {
|
||||
regions.forEach(function (region) {
|
||||
region.color = randomColor(0.1);
|
||||
wavesurfer.addRegion(region);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Extract regions separated by silence.
|
||||
*/
|
||||
function extractRegions(peaks, duration) {
|
||||
// Silence params
|
||||
var minValue = 0.0015;
|
||||
var minSeconds = 0.25;
|
||||
|
||||
var length = peaks.length;
|
||||
var coef = duration / length;
|
||||
var minLen = minSeconds / coef;
|
||||
|
||||
// Gather silence indeces
|
||||
var silences = [];
|
||||
Array.prototype.forEach.call(peaks, function (val, index) {
|
||||
if (Math.abs(val) <= minValue) {
|
||||
silences.push(index);
|
||||
}
|
||||
});
|
||||
|
||||
// Cluster silence values
|
||||
var clusters = [];
|
||||
silences.forEach(function (val, index) {
|
||||
if (clusters.length && val == silences[index - 1] + 1) {
|
||||
clusters[clusters.length - 1].push(val);
|
||||
} else {
|
||||
clusters.push([ val ]);
|
||||
}
|
||||
});
|
||||
|
||||
// Filter silence clusters by minimum length
|
||||
var fClusters = clusters.filter(function (cluster) {
|
||||
return cluster.length >= minLen;
|
||||
});
|
||||
|
||||
// Create regions on the edges of silences
|
||||
var regions = fClusters.map(function (cluster, index) {
|
||||
var next = fClusters[index + 1];
|
||||
return {
|
||||
start: cluster[cluster.length - 1],
|
||||
end: (next ? next[0] : length - 1)
|
||||
};
|
||||
});
|
||||
|
||||
// Add an initial region if the audio doesn't start with silence
|
||||
var firstCluster = fClusters[0];
|
||||
if (firstCluster && firstCluster[0] != 0) {
|
||||
regions.unshift({
|
||||
start: 0,
|
||||
end: firstCluster[firstCluster.length - 1]
|
||||
});
|
||||
}
|
||||
|
||||
// Filter regions by minimum length
|
||||
var fRegions = regions.filter(function (reg) {
|
||||
return reg.end - reg.start >= minLen;
|
||||
});
|
||||
|
||||
// Return time-based regions
|
||||
return fRegions.map(function (reg) {
|
||||
return {
|
||||
start: Math.round(reg.start * coef * 10) / 10,
|
||||
end: Math.round(reg.end * coef * 10) / 10
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Random RGBA color.
|
||||
*/
|
||||
function randomColor(alpha) {
|
||||
return 'rgba(' + [
|
||||
~~(Math.random() * 255),
|
||||
~~(Math.random() * 255),
|
||||
~~(Math.random() * 255),
|
||||
alpha || 1
|
||||
] + ')';
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Edit annotation for a region.
|
||||
*/
|
||||
function editAnnotation (region) {
|
||||
var form = document.forms.edit;
|
||||
form.style.opacity = 1;
|
||||
form.elements.start.value = Math.round(region.start * 10) / 10,
|
||||
form.elements.end.value = Math.round(region.end * 10) / 10;
|
||||
form.elements.note.value = region.data.note || '';
|
||||
form.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
region.update({
|
||||
start: form.elements.start.value,
|
||||
end: form.elements.end.value,
|
||||
data: {
|
||||
note: form.elements.note.value
|
||||
}
|
||||
});
|
||||
form.style.opacity = 0;
|
||||
};
|
||||
form.onreset = function () {
|
||||
form.style.opacity = 0;
|
||||
form.dataset.region = null;
|
||||
};
|
||||
form.dataset.region = region.id;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Display annotation.
|
||||
*/
|
||||
function showNote (region) {
|
||||
if (!showNote.el) {
|
||||
showNote.el = document.querySelector('#subtitle');
|
||||
}
|
||||
showNote.el.textContent = region.data.note || '–';
|
||||
}
|
||||
|
||||
/**
|
||||
* Bind controls.
|
||||
*/
|
||||
GLOBAL_ACTIONS['delete-region'] = function () {
|
||||
var form = document.forms.edit;
|
||||
var regionId = form.dataset.region;
|
||||
if (regionId) {
|
||||
wavesurfer.regions.list[regionId].remove();
|
||||
form.reset();
|
||||
}
|
||||
};
|
||||
|
||||
GLOBAL_ACTIONS['export'] = function () {
|
||||
window.open('data:application/json;charset=utf-8,' +
|
||||
encodeURIComponent(localStorage.regions));
|
||||
};
|
||||
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Annotation tool</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="stylesheet" href="app.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- plugins -->
|
||||
<script src="../../dist/plugin/wavesurfer.timeline.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.minimap.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="../trivia.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">wavesurfer.js Annotations Tool</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<p id="subtitle" class="text-center text-info"> </p>
|
||||
|
||||
<div id="wave-timeline"></div>
|
||||
|
||||
<div id="waveform">
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
|
||||
<div class="row" style="margin: 30px 0">
|
||||
<div class="col-sm-8">
|
||||
<p>
|
||||
Click on a region to enter an annotation.<br />
|
||||
Shift-click plays a region in a loop.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-2">
|
||||
<button class="btn btn-primary btn-block" data-action="play">
|
||||
<span id="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
</span>
|
||||
|
||||
<span id="pause" style="display: none">
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-2">
|
||||
<button class="btn btn-info btn-block" data-action="export" title="Export annotations to JSON">
|
||||
<i class="glyphicon glyphicon-file"></i>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form role="form" name="edit" style="opacity: 0; transition: opacity 300ms linear; margin: 30px 0;">
|
||||
<div class="form-group">
|
||||
<label for="start">Start</label>
|
||||
<input class="form-control" id="start" name="start" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="end">End</label>
|
||||
<input class="form-control" id="end" name="end" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="note">Note</label>
|
||||
<textarea id="note" class="form-control" rows="3" name="note"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-success btn-block">Save</button>
|
||||
<center><i>or</i></center>
|
||||
<button type="button" class="btn btn-danger btn-block" data-action="delete-region">Delete</button>
|
||||
</form>
|
||||
|
||||
<div class="row">
|
||||
<h4>Region events:</h4>
|
||||
|
||||
<ul>
|
||||
<li><code>region-in</code> – When playback enters a region. Callback will receive the <code>Region</code> object.</li>
|
||||
<li><code>region-out</code>– When playback leaves a region. Callback will receive the <code>Region</code> object.</li>
|
||||
<li><code>region-mouseenter</code> - When the mouse moves over a region. Callback will receive the <code>Region</code> object, and a <code>MouseEvent</code> object.</li>
|
||||
<li><code>region-mouseleave</code> - When the mouse leaves a region. Callback will receive the <code>Region</code> object, and a <code>MouseEvent</code> object.</li>
|
||||
<li><code>region-click</code> - When the mouse clicks on a region. Callback will receive the <code>Region</code> object, and a <code>MouseEvent</code> object.</li>
|
||||
<li><code>region-dblclick</code> - When the mouse double-clicks on a region. Callback will receive the <code>Region</code> object, and a <code>MouseEvent</code> object.</li>
|
||||
<li><code>region-created</code> – When a region is created. Callback will receive the <code>Region</code> object.</li>
|
||||
<li><code>region-updated</code> – When a region is updated. Callback will receive the <code>Region</code> object.</li>
|
||||
<li><code>region-update-end</code> – When dragging or resizing is finished. Callback will receive the <code>Region</code> object.</li>
|
||||
<li><code>region-removed</code> – When a region is removed. Callback will receive the <code>Region</code> object.</li>
|
||||
</ul>
|
||||
|
||||
<h4>Regions Plugin</h4>
|
||||
|
||||
<p>Regions are visual overlays on waveform that can be used to play and
|
||||
loop portions of audio. Regions can be dragged and resized.</p>
|
||||
|
||||
<p>Visual customization is possible via CSS (using the selectors
|
||||
<code>.wavesurfer-region</code> and <code>.wavesurfer-handle</code>).</p>
|
||||
|
||||
<p>To enable the plugin, add the script <code>plugin/wavesurfer.regions.js</code> to
|
||||
your page.</p>
|
||||
|
||||
<p>After doing that, use <code>wavesurfer.addRegion()</code> to create Region objects.</p>
|
||||
|
||||
<h5>Exposed Methods</h5>
|
||||
|
||||
<ul>
|
||||
<li><code>addRegion(options)</code> – Creates a region on the waveform. Returns a <code>Region</code> object. See <a href="#region-options">Region Options</a>, <a href="#region-methods">Region Methods</a> and <a href="#region-events">Region Events</a> below.
|
||||
|
||||
<ul>
|
||||
<li><strong>Note:</strong> You cannot add regions until the audio has finished loading, otherwise the <code>start:</code> and <code>end:</code> properties of the new region will be set to <code>0</code>, or an unexpected value.</li>
|
||||
</ul></li>
|
||||
<li><code>clearRegions()</code> – Removes all regions.</li>
|
||||
<li><code>enableDragSelection(options)</code> – Lets you create regions by selecting.
|
||||
areas of the waveform with mouse. <code>options</code> are Region objects' params (see <a href="#region-options">below</a>).</li>
|
||||
<li><code>disableDragSelection()</code> - Disables ability to create regions.</li>
|
||||
</ul>
|
||||
|
||||
<h5>Region Options</h5>
|
||||
|
||||
<table><thead>
|
||||
<tr>
|
||||
<th>option</th>
|
||||
<th>type</th>
|
||||
<th>default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead><tbody>
|
||||
<tr>
|
||||
<td><code>id</code></td>
|
||||
<td>string</td>
|
||||
<td>random</td>
|
||||
<td>The id of the region.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>start</code></td>
|
||||
<td>float</td>
|
||||
<td><code>0</code></td>
|
||||
<td>The start position of the region (in seconds).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>end</code></td>
|
||||
<td>float</td>
|
||||
<td><code>0</code></td>
|
||||
<td>The end position of the region (in seconds).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>loop</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Whether to loop the region when played back.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>drag</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Allow/dissallow dragging the region.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>resize</code></td>
|
||||
<td>boolean</td>
|
||||
<td><code>true</code></td>
|
||||
<td>Allow/dissallow resizing the region.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>color</code></td>
|
||||
<td>string</td>
|
||||
<td><code>"rgba(0, 0, 0, 0.1)"</code></td>
|
||||
<td>HTML color code.</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
|
||||
<h5>Region Methods</h5>
|
||||
|
||||
<ul>
|
||||
<li><code>remove()</code> - Remove the region object.</li>
|
||||
<li><code>update(options)</code> - Modify the settings of the region.</li>
|
||||
<li><code>play()</code> - Play the audio region from the start to end position.</li>
|
||||
</ul>
|
||||
|
||||
<h5>Region Events</h5>
|
||||
|
||||
<p>General events:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>in</code> - When playback enters the region.</li>
|
||||
<li><code>out</code> - When playback leaves the region.</li>
|
||||
<li><code>remove</code> - Happens just before the region is removed.</li>
|
||||
<li><code>update</code> - When the region's options are updated.</li>
|
||||
</ul>
|
||||
|
||||
<p>Mouse events:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>click</code> - When the mouse clicks on the region. Callback will receive a <code>MouseEvent</code>.</li>
|
||||
<li><code>dblclick</code> - When the mouse double-clicks on the region. Callback will receive a <code>MouseEvent</code>.</li>
|
||||
<li><code>over</code> - When mouse moves over the region. Callback will receive a <code>MouseEvent</code>.</li>
|
||||
<li><code>leave</code> - When mouse leaves the region. Callback will receive a <code>MouseEvent</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<p>
|
||||
The sound file is from <a href="https://librivox.org/librivox-multilingual-short-works-collection-001-by-various/">librivox.org</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Media Element Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Media Element Fallback Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>How to Enable the Fallback</h3>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
<strong>wavesurfer.js</strong> will automatically
|
||||
fallback to HTML5 Media if Web Audio is not
|
||||
supported. However, you can choose to use audio
|
||||
element manually. Simply set the <code>backend</code>
|
||||
option to <code>"MediaElement"</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#wave'),
|
||||
backend: 'MediaElement'
|
||||
});
|
||||
</code></pre>
|
||||
</p>
|
||||
|
||||
<h3>Pre-rendered Peaks</h3>
|
||||
|
||||
<p>
|
||||
If you have pre-rendered peaks (on your server),
|
||||
you can pass them into the <code>load</code>
|
||||
function. This is optional–if you don't provide
|
||||
any peaks,
|
||||
<strong>waserver.js</strong> will first draw a
|
||||
thin line instead of a waveform, then attempt to
|
||||
download the audio file via Ajax and decode it
|
||||
with Web Audio if available.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<pre><code>wavesurfer.load('example/media/demo.mp3');</code></pre>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
Press this button to see the same demo with pre-decoded peaks:
|
||||
<button class="btn btn-warning" data-action="peaks">
|
||||
Load with pre-rendered peaks
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686',
|
||||
backend: 'MediaElement'
|
||||
});
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
|
||||
document.querySelector(
|
||||
'[data-action="play"]'
|
||||
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
|
||||
document.querySelector(
|
||||
'[data-action="peaks"]'
|
||||
).addEventListener('click', function () {
|
||||
wavesurfer.load('../media/demo.wav', [
|
||||
0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
|
||||
]);
|
||||
document.body.scrollTop = 0;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,189 @@
|
||||
body {
|
||||
line-height: 1.6;
|
||||
}
|
||||
.content {
|
||||
max-width: 65em;
|
||||
padding: 15px 5%;
|
||||
}
|
||||
.content > div {
|
||||
margin-bottom: 4em;
|
||||
}
|
||||
.self-detail {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* detail */
|
||||
.content .detail > div {
|
||||
margin-left: 0;
|
||||
}
|
||||
.content .detail h4 + :not(pre) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.content .detail {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.content .detail + .detail {
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
.content .detail + .detail h3 {
|
||||
padding-top: 3em;
|
||||
}
|
||||
.content .detail > h3 {
|
||||
color: #4d4e53;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* table styling */
|
||||
table.params tr:hover td,
|
||||
table.summary tr:hover td {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
table.params td,
|
||||
table.summary td {
|
||||
border: 2px solid #fff;
|
||||
background: #FAFAFA;
|
||||
padding: 0.25em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
table.summary thead {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Property tables should follow some sort of grid */
|
||||
div[data-ice="properties"] td:nth-child(1) {
|
||||
width: 10% !important;
|
||||
}
|
||||
div[data-ice="properties"] td:nth-child(2),
|
||||
div[data-ice="properties"] td:nth-child(3) {
|
||||
width: 20% !important;
|
||||
}
|
||||
div[data-ice="properties"] td:nth-child(4) {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
/* headings */
|
||||
h1,
|
||||
.github-markdown h1 a {
|
||||
font-weight: normal;
|
||||
border-bottom: 0;
|
||||
margin-bottom: 1.5em;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
h2,
|
||||
.github-markdown h2 {
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 0;
|
||||
border-top: 4px solid #f5f5f5;
|
||||
padding-top: 1em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h3 [data-ice="name"] {
|
||||
font-weight: 600;
|
||||
}
|
||||
h4,
|
||||
table.summary thead {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.075em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* misc & type */
|
||||
.access {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.abstract {
|
||||
font-style: italic;
|
||||
color: #009800;
|
||||
}
|
||||
*[data-ice="appendix"] li {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
line-height: inherit;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* links */
|
||||
a,
|
||||
.inherited-summary thead a {
|
||||
color: #528DD9;
|
||||
border-bottom: 1px solid #DDEBFE;
|
||||
}
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
.inherited-summary thead a:hover,
|
||||
.inherited-summary thead a:focus,
|
||||
.inherited-summary thead a:active {
|
||||
color: #4271ae;
|
||||
border-bottom-color: #4271ae;
|
||||
}
|
||||
|
||||
/* sidebar */
|
||||
.navigation {
|
||||
border: 0;
|
||||
}
|
||||
.navigation li a {
|
||||
border: 0;
|
||||
}
|
||||
.navigation li a:hover,
|
||||
.navigation li a:focus,
|
||||
.navigation li a:active {
|
||||
color: #333;
|
||||
}
|
||||
.navigation *[data-ice="kind"] {
|
||||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
/* active state for sections */
|
||||
.inner-link-active {
|
||||
background: transparent;
|
||||
}
|
||||
.inner-link-active::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0.5em;
|
||||
width: 0.5em;
|
||||
background: #009800;
|
||||
position: absolute;
|
||||
left: -1.5em;
|
||||
top: 0.5em;
|
||||
}
|
||||
/* position for other than the first detail container */
|
||||
.content .detail + .detail .inner-link-active::before {
|
||||
top: 3.5em;
|
||||
}
|
||||
|
||||
/* search */
|
||||
.search-box.active .search-input-edge {
|
||||
display: none;
|
||||
}
|
||||
.search-box {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.search-result {
|
||||
height: auto;
|
||||
max-height: 90vh;
|
||||
white-space: normal;
|
||||
box-shadow: -2px 5px 10px rgba(0,0,0,.05);
|
||||
border: 1px solid #ddd;
|
||||
border-top: 0;
|
||||
}
|
||||
.search-result li a {
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.search-result li.search-separator {
|
||||
background: #4d4e53;
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/*!
|
||||
* "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
|
||||
* https://github.com/simonwhitaker/github-fork-ribbon-css
|
||||
*/
|
||||
|
||||
/* Left will inherit from right (so we don't need to duplicate code) */
|
||||
.github-fork-ribbon {
|
||||
/* The right and left classes determine the side we attach our banner to */
|
||||
position: absolute;
|
||||
|
||||
/* Add a bit of padding to give some substance outside the "stitching" */
|
||||
padding: 2px 0;
|
||||
|
||||
/* Set the base colour */
|
||||
background-color: #a00;
|
||||
|
||||
/* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
|
||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
|
||||
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
|
||||
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
|
||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
|
||||
|
||||
/* Add a drop shadow */
|
||||
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* Set the font */
|
||||
font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
z-index: 9999;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.github-fork-ribbon a,
|
||||
.github-fork-ribbon a:hover {
|
||||
/* Set the text properties */
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
|
||||
/* Set the geometry. If you fiddle with these you'll also need
|
||||
to tweak the top and right values in .github-fork-ribbon. */
|
||||
width: 200px;
|
||||
line-height: 20px;
|
||||
|
||||
/* Set the layout properties */
|
||||
display: inline-block;
|
||||
padding: 2px 0;
|
||||
|
||||
/* Add "stitching" effect */
|
||||
border-width: 1px 0;
|
||||
border-style: dotted;
|
||||
border-color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.left-bottom {
|
||||
position: fixed;
|
||||
top: inherit;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right-bottom {
|
||||
position: fixed;
|
||||
top: inherit;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right .github-fork-ribbon {
|
||||
top: 42px;
|
||||
right: -43px;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.left .github-fork-ribbon {
|
||||
top: 42px;
|
||||
left: -43px;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
|
||||
top: 80px;
|
||||
left: -43px;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
|
||||
top: 80px;
|
||||
right: -43px;
|
||||
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/* Space out content a bit */
|
||||
body {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Everything but the jumbotron gets side spacing for mobile first views */
|
||||
.header,
|
||||
.marketing,
|
||||
.footer {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
/* Custom page header */
|
||||
.header {
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Make the masthead heading the same height as the navigation */
|
||||
.header h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
line-height: 40px;
|
||||
padding-bottom: 19px;
|
||||
}
|
||||
|
||||
/* Custom page footer */
|
||||
.footer {
|
||||
padding-top: 19px;
|
||||
color: #777;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/* Customize container */
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 900px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-narrow > hr {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
/* Supporting marketing content */
|
||||
.marketing {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.marketing p + h4 {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
/* Responsive: Portrait tablets and up */
|
||||
@media screen and (min-width: 768px) {
|
||||
/* Remove the padding we set earlier */
|
||||
.header,
|
||||
.marketing,
|
||||
.footer {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
/* Space out the masthead */
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 30px 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.controls .btn {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 990px) {
|
||||
.controls .mark-controls {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#waveform {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#progress-bar {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
#drop {
|
||||
border: 3px dashed #ddd;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#drop.wavesurfer-dragover {
|
||||
border-color: #333;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Cursor Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<script src="../../dist/plugin/wavesurfer.cursor.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Cursor Plugin Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>Cursor plugin</h3>
|
||||
<hr />
|
||||
<p>Shows a cursor on the waveform.</p>
|
||||
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
plugins: [
|
||||
WaveSurfer.cursor.create()
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName" rel="cc:attributionURL">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer = {};
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
plugins: [
|
||||
WaveSurfer.cursor.create()
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
|
||||
|
||||
// Play button
|
||||
var button = document.querySelector('[data-action="play"]');
|
||||
|
||||
button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
});
|
||||
@@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | ELAN Wave Segment player</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="stylesheet" href="css/elan.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.min.js"></script>
|
||||
|
||||
<!-- regions plugin -->
|
||||
<script src="../../dist/plugin/wavesurfer.regions.min.js"></script>
|
||||
|
||||
<!-- ELAN format renderer -->
|
||||
<script src="../../dist/plugin/wavesurfer.elan.min.js"></script>
|
||||
|
||||
<!-- ELAN wave segment renderer -->
|
||||
<script src="../../plugin/wavesurfer.elan-wave-segment.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
<script src="../trivia.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<noindex>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="?fill">Fill</a></li>
|
||||
<li><a href="?scroll">Scroll</a></li>
|
||||
</ul>
|
||||
</noindex>
|
||||
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> + <a rel="nofollow" href="http://spokencorpora.ru/showelan.py">ELAN</a> + Wave Segment</noindex></h1>
|
||||
</div>
|
||||
<div><p>The Elan Wave Segment Plugin uses the table and the time values created by the
|
||||
<a href="../elan/index.html">ELAN plugin</a> to insert a wave form column for each row.
|
||||
</p></div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="annotations" class="table-responsive">
|
||||
<!-- Here be transcript -->
|
||||
</div>
|
||||
|
||||
<h2>How to Enable Elan Wave Segment</h2>
|
||||
|
||||
<h3>Javascript Dependencies</h3>
|
||||
<ul>
|
||||
<li>Wavesufer <code></code></li>
|
||||
<li>Region Plugin <code></code></li></li>
|
||||
<li>ElAN Plugin <code></code></li></li>
|
||||
<li>ELAN Wave Segment</li>
|
||||
<pre><code><script src="[path_to]/wavesurfer.min.js"></script>
|
||||
<script src="[path_to]/plugin/wavesurfer.region.min.js"></script>
|
||||
<script src="[path_to]/plugin/wavesurfer.elan.min.js"></script>
|
||||
<script src="[path_to]/plugin/wavesurfer.elan-wave-segment.min.js"></script> </code></pre>
|
||||
|
||||
</ul>
|
||||
|
||||
<h2>Javascript Initialization</h2>
|
||||
<pre><code>// Create the wave surfer instance
|
||||
var wavesurfer = Object.create(WaveSurfer);
|
||||
|
||||
// Create elan instance
|
||||
var elan = Object.create(WaveSurfer.ELAN);
|
||||
|
||||
// Create Elan Wave Segment instance
|
||||
var elanWaveSegment = Object.create(WaveSurfer.ELANWaveSegment);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var options = {
|
||||
container : '#waveform',
|
||||
};
|
||||
|
||||
//################## set up some listeners ####################
|
||||
|
||||
//set up listener for when elan is done
|
||||
elan.on('ready', function (data) {
|
||||
wavesurfer.load('../elan/transcripts/001z.mp3');
|
||||
});
|
||||
|
||||
//set up listener for playing when clicked on
|
||||
elan.on('select', function (start, end) {
|
||||
wavesurfer.backend.play(start, end);
|
||||
});
|
||||
//############################## initialize wavesurfer and related plugins###############
|
||||
|
||||
// Init wavesurfer
|
||||
wavesurfer.init(options);
|
||||
|
||||
//init elan
|
||||
elan.init({
|
||||
url: '../elan/transcripts/001z.xml',
|
||||
container: '#annotations',
|
||||
tiers: {
|
||||
Text: true,
|
||||
Comments: true
|
||||
}
|
||||
});
|
||||
|
||||
//int elanWaveSegment when wavesurfer is done loading the sound file
|
||||
wavesurfer.on('ready', function() {
|
||||
options.plotTimeEnd = wavesurfer.backend.getDuration();
|
||||
options.wavesurfer = wavesurfer;
|
||||
options.ELAN = elan;
|
||||
elanWaveSegment.init(options);
|
||||
});
|
||||
|
||||
//update waveSegments when time advances
|
||||
var onProgress = function (time) {
|
||||
elanWaveSegment.onProgress(time);
|
||||
//code for scrolling Elan goes here
|
||||
};
|
||||
wavesurfer.on('audioprocess', onProgress);
|
||||
}); </code></pre>
|
||||
<h2>Options</h2>
|
||||
<ul>
|
||||
<li><code>ELAN:</code> required - The ELAN instance used to parse the elan data</li>
|
||||
<li><code>wafesurver:</code> required - The wavesurfer instance used to draw the original waveform</li>
|
||||
<li><code>waveSegmentWidth:</code> optional - The width of each wave segment (defaults to 200)</li>
|
||||
<li><code>waveSegmentPeaksPerSegment:</code> optional - The number of peaks that should be drawn (defaults to 400)</li>
|
||||
<li><code>waveSegmentHeight:</code> optional - The height of each wave segment (defaults to 30)</li>
|
||||
<li><code>waveSegmentRenderer:</code> optional - The renderer (drawer) to be used for the wave segments</li>
|
||||
<li><code>waveSegmentNormalizeTo:</code> optional - What to normalize each wave segment to [whole, segment,none]</li>
|
||||
<li><code>waveSegmentBorderWidth:</code> optional - The width of the border of the container element</li>
|
||||
<li><code>waveSegmentBarHeight:</code> optional - the height of the peaks/bars (defaults to 1)</li>
|
||||
</ul>
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<p>
|
||||
The ELAN program and format were developed by <a href="http://tla.mpi.nl/tools/tla-tools/elan/">Max Planck Institute</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The sample ELAN file and audio are from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var options = {
|
||||
container : '#waveform',
|
||||
waveColor : 'violet',
|
||||
progressColor : 'purple',
|
||||
loaderColor : 'purple',
|
||||
cursorColor : 'navy',
|
||||
selectionColor: '#d0e9c6',
|
||||
loopSelection : false,
|
||||
plugins: [
|
||||
WaveSurfer.elan.create({
|
||||
url: 'transcripts/001z.xml',
|
||||
container: '#annotations',
|
||||
tiers: {
|
||||
Text: true,
|
||||
Comments: true
|
||||
}
|
||||
}),
|
||||
WaveSurfer.regions.create()
|
||||
]
|
||||
};
|
||||
|
||||
if (location.search.match('scroll')) {
|
||||
options.minPxPerSec = 100;
|
||||
options.scrollParent = true;
|
||||
}
|
||||
|
||||
if (location.search.match('normalize')) {
|
||||
options.normalize = true;
|
||||
}
|
||||
|
||||
// Init wavesurfer
|
||||
wavesurfer = WaveSurfer.create(options);
|
||||
|
||||
/* Progress bar */
|
||||
(function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
}());
|
||||
|
||||
wavesurfer.elan.on('ready', function (data) {
|
||||
wavesurfer.load('transcripts/' + data.media.url);
|
||||
});
|
||||
|
||||
wavesurfer.elan.on('select', function (start, end) {
|
||||
wavesurfer.backend.play(start, end);
|
||||
});
|
||||
|
||||
wavesurfer.elan.on('ready', function () {
|
||||
var classList = wavesurfer.elan.container.querySelector('table').classList;
|
||||
[ 'table', 'table-striped', 'table-hover' ].forEach(function (cl) {
|
||||
classList.add(cl);
|
||||
});
|
||||
});
|
||||
|
||||
var prevAnnotation, prevRow, region;
|
||||
var onProgress = function (time) {
|
||||
var annotation = wavesurfer.elan.getRenderedAnnotation(time);
|
||||
|
||||
if (prevAnnotation != annotation) {
|
||||
prevAnnotation = annotation;
|
||||
|
||||
region && region.remove();
|
||||
region = null;
|
||||
|
||||
if (annotation) {
|
||||
// Highlight annotation table row
|
||||
var row = wavesurfer.elan.getAnnotationNode(annotation);
|
||||
prevRow && prevRow.classList.remove('success');
|
||||
prevRow = row;
|
||||
row.classList.add('success');
|
||||
var before = row.previousSibling;
|
||||
if (before) {
|
||||
wavesurfer.elan.container.scrollTop = before.offsetTop;
|
||||
}
|
||||
|
||||
// Region
|
||||
region = wavesurfer.addRegion({
|
||||
start: annotation.start,
|
||||
end: annotation.end,
|
||||
resize: false,
|
||||
color: 'rgba(223, 240, 216, 0.7)'
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
wavesurfer.on('audioprocess', onProgress);
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
#annotations {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wavesurfer-annotations tr.wavesurfer-active td {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.wavesurfer-time {
|
||||
width: 100px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.wavesurfer-tier-Text {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
td.wavesurfer-tier-Comments {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.wavesurfer-handle {
|
||||
background-color: #c9e2b3;
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | ELAN player</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="stylesheet" href="css/elan.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- regions plugin -->
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
|
||||
<!-- ELAN format renderer -->
|
||||
<script src="../../dist/plugin/wavesurfer.elan.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
<script src="../trivia.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<noindex>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="?fill">Fill</a></li>
|
||||
<li><a href="?scroll">Scroll</a></li>
|
||||
</ul>
|
||||
</noindex>
|
||||
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> + <a rel="nofollow" href="http://spokencorpora.ru/showelan.py">ELAN</a></noindex></h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="annotations" class="table-responsive">
|
||||
<!-- Here be transcript -->
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<p>
|
||||
The ELAN program and format were developed by <a href="http://tla.mpi.nl/tools/tla-tools/elan/">Max Planck Institute</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The sample ELAN file and audio are from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
+2866
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Equalizer Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Equalizer Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
|
||||
<div id="equalizer">
|
||||
<!-- Here be equalizer sliders -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
Demo music track is <a href="http://www.jamendo.com/en/track/661578/trou" rel="nofollow"><b>Trou</b> <span class="muted">by</span> <b>czskamaarù</b></a>. Thanks!
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686'
|
||||
});
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
|
||||
// Equalizer
|
||||
wavesurfer.on('ready', function () {
|
||||
var EQ = [
|
||||
{
|
||||
f: 32,
|
||||
type: 'lowshelf'
|
||||
}, {
|
||||
f: 64,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 125,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 250,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 500,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 1000,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 2000,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 4000,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 8000,
|
||||
type: 'peaking'
|
||||
}, {
|
||||
f: 16000,
|
||||
type: 'highshelf'
|
||||
}
|
||||
];
|
||||
|
||||
// Create filters
|
||||
var filters = EQ.map(function (band) {
|
||||
var filter = wavesurfer.backend.ac.createBiquadFilter();
|
||||
filter.type = band.type;
|
||||
filter.gain.value = 0;
|
||||
filter.Q.value = 1;
|
||||
filter.frequency.value = band.f;
|
||||
return filter;
|
||||
});
|
||||
|
||||
// Connect filters to wavesurfer
|
||||
wavesurfer.backend.setFilters(filters);
|
||||
|
||||
// Bind filters to vertical range sliders
|
||||
var container = document.querySelector('#equalizer');
|
||||
filters.forEach(function (filter) {
|
||||
var input = document.createElement('input');
|
||||
wavesurfer.util.extend(input, {
|
||||
type: 'range',
|
||||
min: -40,
|
||||
max: 40,
|
||||
value: 0,
|
||||
title: filter.frequency.value
|
||||
});
|
||||
input.style.display = 'inline-block';
|
||||
input.setAttribute('orient', 'vertical');
|
||||
wavesurfer.util.style(input, {
|
||||
'webkitAppearance': 'slider-vertical',
|
||||
width: '50px',
|
||||
height: '150px'
|
||||
});
|
||||
container.appendChild(input);
|
||||
|
||||
var onChange = function (e) {
|
||||
filter.gain.value = ~~e.target.value;
|
||||
};
|
||||
|
||||
input.addEventListener('input', onChange);
|
||||
input.addEventListener('change', onChange);
|
||||
});
|
||||
|
||||
// For debugging
|
||||
wavesurfer.filters = filters;
|
||||
});
|
||||
|
||||
// Log errors
|
||||
wavesurfer.on('error', function (msg) {
|
||||
console.log(msg);
|
||||
});
|
||||
|
||||
// Bind play/pause button
|
||||
document.querySelector(
|
||||
'[data-action="play"]'
|
||||
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
|
||||
// Progress bar
|
||||
(function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
}());
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | HTML initialisation API example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
<script src="../../dist/wavesurfer-html-init.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">HTML initialisation API</h1>
|
||||
</div>
|
||||
|
||||
<p class="marketing">
|
||||
Using the HTML initialisation script and the HTML attribute API is a quick way of creating wavesurfer instances.
|
||||
</p>
|
||||
|
||||
<div id="demo">
|
||||
<section class="marketing">
|
||||
<wavesurfer
|
||||
data-url="../media/demo.wav"
|
||||
data-plugins="regions"
|
||||
data-regions-regions='[{"start": 1,"end": 3,"color": "hsla(400, 100%, 30%, 0.5)"}, {"start": 5,"end": 7,"color": "hsla(200, 50%, 70%, 0.4)"}]'
|
||||
>
|
||||
</wavesurfer>
|
||||
<pre><code><wavesurfer
|
||||
data-url="../media/demo.wav"
|
||||
data-plugins="regions"
|
||||
data-regions-regions='[{"start": 1,"end": 3,"color": "hsla(400, 100%, 30%, 0.5)"}, {"start": 5,"end": 7,"color": "hsla(200, 50%, 70%, 0.4)"}]'
|
||||
>
|
||||
</wavesurfer>
|
||||
</code></pre>
|
||||
</section>
|
||||
<hr />
|
||||
<section class="marketing">
|
||||
<wavesurfer
|
||||
data-url="../media/demo.wav"
|
||||
data-plugins="minimap,timeline"
|
||||
data-minimap-height="30"
|
||||
data-minimap-wave-color="#ddd"
|
||||
data-minimap-progress-color="#999"
|
||||
data-timeline-font-size="13px"
|
||||
data-timeline-container="#timeline"
|
||||
>
|
||||
</wavesurfer>
|
||||
<div id="timeline"></div>
|
||||
<pre><code><wavesurfer
|
||||
data-url="../media/demo.wav"
|
||||
data-plugins="minimap,timeline"
|
||||
data-minimap-height="30"
|
||||
data-minimap-wave-color="#ddd"
|
||||
data-minimap-progress-color="#999"
|
||||
data-timeline-font-size="13px"
|
||||
data-timeline-container="#timeline"
|
||||
>
|
||||
</wavesurfer>
|
||||
<div id="timeline"></div>
|
||||
</code></pre>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName" rel="cc:attributionURL">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,108 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var options = {
|
||||
container : document.querySelector('#waveform'),
|
||||
waveColor : 'violet',
|
||||
progressColor : 'purple',
|
||||
cursorColor : 'navy'
|
||||
};
|
||||
|
||||
if (location.search.match('scroll')) {
|
||||
options.minPxPerSec = 100;
|
||||
options.scrollParent = true;
|
||||
}
|
||||
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create(options);
|
||||
// Load audio from URL
|
||||
wavesurfer.load('example/media/demo.wav');
|
||||
|
||||
// Regions
|
||||
if (wavesurfer.enableDragSelection) {
|
||||
wavesurfer.enableDragSelection({
|
||||
color: 'rgba(0, 255, 0, 0.1)'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Play at once when ready
|
||||
// Won't work on iOS until you touch the page
|
||||
wavesurfer.on('ready', function () {
|
||||
//wavesurfer.play();
|
||||
});
|
||||
|
||||
// Report errors
|
||||
wavesurfer.on('error', function (err) {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
// Do something when the clip is over
|
||||
wavesurfer.on('finish', function () {
|
||||
console.log('Finished playing');
|
||||
});
|
||||
|
||||
|
||||
/* Progress bar */
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
});
|
||||
|
||||
|
||||
// Drag'n'drop
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var toggleActive = function (e, toggle) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
toggle ? e.target.classList.add('wavesurfer-dragover') :
|
||||
e.target.classList.remove('wavesurfer-dragover');
|
||||
};
|
||||
|
||||
var handlers = {
|
||||
// Drop event
|
||||
drop: function (e) {
|
||||
toggleActive(e, false);
|
||||
|
||||
// Load the file into wavesurfer
|
||||
if (e.dataTransfer.files.length) {
|
||||
wavesurfer.loadBlob(e.dataTransfer.files[0]);
|
||||
} else {
|
||||
wavesurfer.fireEvent('error', 'Not a file');
|
||||
}
|
||||
},
|
||||
|
||||
// Drag-over event
|
||||
dragover: function (e) {
|
||||
toggleActive(e, true);
|
||||
},
|
||||
|
||||
// Drag-leave event
|
||||
dragleave: function (e) {
|
||||
toggleActive(e, false);
|
||||
}
|
||||
};
|
||||
|
||||
var dropTarget = document.querySelector('#drop');
|
||||
Object.keys(handlers).forEach(function (event) {
|
||||
dropTarget.addEventListener(event, handlers[event]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Media Sesssion plugin</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.min.js"></script>
|
||||
|
||||
<!-- media session plugin -->
|
||||
<script src="../../dist/plugin/wavesurfer.mediasession.min.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> + Media Session API</noindex></h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<audio src='../media/demo.wav' controls />
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-4">
|
||||
<h4>wavesurfer.js Media Session Plugin</h4>
|
||||
|
||||
<p itemprop="about">The <a href='https://wicg.github.io/mediasession/' target='blank'>Media Session API</a> plugin for <strong>wavesurfer.js</strong> allows you to customize media notifications
|
||||
by providing metadata for the media your web app is playing. It also allows you to handle media related events such as
|
||||
seeking or playback which may come from notifications or media keys.</p>
|
||||
|
||||
<p><strong>Note</strong>: this plugin only works in Chrome 57 and newer (Firefox is <a href='https://bugzilla.mozilla.org/show_bug.cgi?id=1112032' target='blank'>working on it</a>).</p>
|
||||
|
||||
<h4>Installation</h4>
|
||||
|
||||
<p>
|
||||
<ol>
|
||||
<li>add the MediaSession plugin script tag</li>
|
||||
<li>create a <code>WaveSurfer</code> instance and supply an object for the <code>metadata</code> property</li>
|
||||
<li>create a <code>MediaSession</code> instance</li>
|
||||
<li>control playback from the notification screen on a mobile device</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-success" href="../../plugin/wavesurfer.mediasession.js" itemprop="downloadUrl">Download <strong>the plugin</strong> (1.2 KB)</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<h4>Quick Start</h4>
|
||||
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = Object.create(WaveSurfer);
|
||||
|
||||
wavesurfer.init({
|
||||
container : '#waveform',
|
||||
waveColor : 'black',
|
||||
backend : 'MediaElement'
|
||||
});
|
||||
|
||||
var msPlugin = Object.create(WaveSurfer.MediaSession);
|
||||
|
||||
msPlugin.init({
|
||||
wavesurfer: wavesurfer,
|
||||
metadata: {
|
||||
title: 'Wavesurfer.js Example',
|
||||
artist: 'The Wavesurfer.js Project',
|
||||
album: 'Media Session Example',
|
||||
artwork: [
|
||||
{src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png'},
|
||||
{src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png'},
|
||||
{src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png'},
|
||||
{src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png'},
|
||||
{src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png'},
|
||||
{src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png'},
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// load audio from existing media element
|
||||
var mediaElt = document.querySelector('audio');
|
||||
wavesurfer.load(mediaElt);
|
||||
</code></pre>
|
||||
</p></noindex>
|
||||
|
||||
<br />
|
||||
|
||||
<h4>Options</h4>
|
||||
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Required</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>wavesurfer</code></td>
|
||||
<td>yes</td>
|
||||
<td></td>
|
||||
<td>A WaveSurfer instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>metadata</code></td>
|
||||
<td>yes</td>
|
||||
<td></td>
|
||||
<td>A <a href='https://wicg.github.io/mediasession/#mediametadata' target='blank'>MediaMetadata</a> object: a representation of the metadata associated with a MediaSession that can be used by
|
||||
user agents to provide customized user interface.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,36 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var micBtn = document.querySelector('#micBtn');
|
||||
|
||||
// Init wavesurfer
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container : '#waveform',
|
||||
waveColor : 'black',
|
||||
interact : false,
|
||||
cursorWidth : 0,
|
||||
plugins: [
|
||||
WaveSurfer.microphone.create()
|
||||
]
|
||||
});
|
||||
|
||||
wavesurfer.microphone.on('deviceReady', function() {
|
||||
console.info('Device ready!');
|
||||
});
|
||||
wavesurfer.microphone.on('deviceError', function(code) {
|
||||
console.warn('Device error: ' + code);
|
||||
});
|
||||
|
||||
// start/stop mic on button click
|
||||
micBtn.onclick = function() {
|
||||
if (wavesurfer.microphone.active) {
|
||||
wavesurfer.microphone.stop();
|
||||
} else {
|
||||
wavesurfer.microphone.start();
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Microphone plugin</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- microphone renderer -->
|
||||
<script src="../../dist/plugin/wavesurfer.microphone.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> + Microphone</noindex></h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="micBtn" class="btn btn-primary" data-action="start">
|
||||
Microphone:
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Start
|
||||
/
|
||||
<i class="glyphicon glyphicon-stop"></i>
|
||||
Stop
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-4">
|
||||
<h4>wavesurfer.js Microphone Plugin</h4>
|
||||
|
||||
<p itemprop="about">Visualizes audio input from a microphone in <strong>wavesurfer.js</strong> instances.</p>
|
||||
|
||||
<h4>Installation</h4>
|
||||
|
||||
<p>
|
||||
<ol>
|
||||
<li>add the Microphone plugin to the plugins property of the wavesurfer options</li>
|
||||
<li>create a new instance of wavesurfer by using the create function</li>
|
||||
<li>control the Microphone using the <code>start</code>, <code>stopDevice</code>, <code>play</code>, <code>pause</code>, <code>stop</code> and <code>togglePlay</code> methods</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-success" href="../../dist/plugin/wavesurfer.microphone.min.js" itemprop="downloadUrl" download>Download the plugin</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<h4>Quick Start</h4>
|
||||
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container : '#waveform',
|
||||
waveColor : 'black',
|
||||
interact : false,
|
||||
cursorWidth : 0,
|
||||
plugins: [
|
||||
WaveSurfer.microphone.create()
|
||||
]
|
||||
});
|
||||
|
||||
wavesurfer.microphone.on('deviceReady', function(stream) {
|
||||
console.log('Device ready!', stream);
|
||||
});
|
||||
wavesurfer.microphone.on('deviceError', function(code) {
|
||||
console.warn('Device error: ' + code);
|
||||
});
|
||||
|
||||
// start the microphone
|
||||
wavesurfer.microphone.start();
|
||||
|
||||
// pause rendering
|
||||
//wavesurfer.microphone.pause();
|
||||
|
||||
// resume rendering
|
||||
//wavesurfer.microphone.play();
|
||||
|
||||
// stop visualization and disconnect microphone
|
||||
//wavesurfer.microphone.stopDevice();
|
||||
|
||||
// same as stopDevice() but also clears the wavesurfer canvas
|
||||
//wavesurfer.microphone.stop();
|
||||
|
||||
// destroy the plugin
|
||||
//wavesurfer.microphone.destroy();
|
||||
</code></pre>
|
||||
</p></noindex>
|
||||
|
||||
<br />
|
||||
|
||||
<h4>Options</h4>
|
||||
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Required</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>wavesurfer</code></td>
|
||||
<td>yes</td>
|
||||
<td></td>
|
||||
<td>A WaveSurfer instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>bufferSize</code></td>
|
||||
<td>no</td>
|
||||
<td>4096</td>
|
||||
<td>The buffer size in units of sample-frames. If specified, the <code>bufferSize</code> must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>numberOfInputChannels</code></td>
|
||||
<td>no</td>
|
||||
<td>1</td>
|
||||
<td>Integer specifying the number of channels for this node's input. Values of up to 32 are supported.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>numberOfOutputChannels</code></td>
|
||||
<td>no</td>
|
||||
<td>1</td>
|
||||
<td>Integer specifying the number of channels for this node's output. Values of up to 32 are supported.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4>Events</h4>
|
||||
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>deviceReady</code></td>
|
||||
<td>Invoked when the device is ready to use. Callback will receive a <code>LocalMediaStream</code> object that contains the microphone stream.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>deviceError</code></td>
|
||||
<td>Invoked when the user doesn't allow the browser to access the microphone. Callback will receive a (string) <a href='https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia#errorCallback'>error code</a>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var playButton = document.querySelector('#playBtn'),
|
||||
toggleMuteButton = document.querySelector('#toggleMuteBtn'),
|
||||
setMuteOnButton = document.querySelector('#setMuteOnBtn'),
|
||||
setMuteOffButton = document.querySelector('#setMuteOffBtn');
|
||||
|
||||
// Init wavesurfer
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container : '#waveform',
|
||||
waveColor : 'black',
|
||||
interact : false,
|
||||
cursorWidth : 0
|
||||
});
|
||||
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
|
||||
wavesurfer.on('ready', function() {
|
||||
playButton.onclick = function() {
|
||||
wavesurfer.playPause();
|
||||
};
|
||||
|
||||
toggleMuteButton.onclick = function() {
|
||||
wavesurfer.toggleMute();
|
||||
}
|
||||
|
||||
setMuteOnButton.onclick = function() {
|
||||
wavesurfer.setMute(true);
|
||||
}
|
||||
|
||||
setMuteOffButton.onclick = function() {
|
||||
wavesurfer.setMute(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Mute Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>
|
||||
<a href="http://wavesurfer-js.org">wavesurfer.j</a> (Muting)
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="playBtn" class="btn btn-primary">Play / Pause</button>
|
||||
<button id="toggleMuteBtn" class="btn btn-primary">Toggle Mute</button>
|
||||
<button id="setMuteOnBtn" class="btn btn-primary">
|
||||
Mute <i class="glyphicon glyphicon-volume-off"></i>
|
||||
</button>
|
||||
|
||||
<button id="setMuteOffBtn" class="btn btn-primary">
|
||||
Unmute <i class="glyphicon glyphicon-volume-up"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Panner Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Panner Filter Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
← left
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<!-- Panner -->
|
||||
<input data-action="pan" type="range" min="-45" max="45" value="0" style="width: 100%" />
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
right →
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>How to Create a Panner Interface</h3>
|
||||
|
||||
<p>
|
||||
This is an example of how to add an arbitrary Web
|
||||
Audio node into a wavesurfer.js graph. Panner node
|
||||
is one such node.
|
||||
</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h4>1. Initialize wavesurfer.js</h4>
|
||||
|
||||
<p>Create a <code>WaveSurfer</code> instance and load an audio clip.</p>
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: '#demo' // this is the only required param
|
||||
});
|
||||
|
||||
wavesurfer.load('media.wav');</code></pre>
|
||||
</p></noindex>
|
||||
|
||||
<h4>2. Create a Panner Node</h4>
|
||||
|
||||
<p>
|
||||
Create a panner node and add it to the Web
|
||||
Audio graph using the <code>setFilter</code> method.
|
||||
</p>
|
||||
<noindex><p>
|
||||
<pre><code>var panner = wavesurfer.backend.ac.createPanner();
|
||||
wavesurfer.backend.setFilter(panner);</code></pre>
|
||||
</p></noindex>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<h4>3. Create a Range Slider</h4>
|
||||
<p>
|
||||
In your HTML, add a range input.
|
||||
</p>
|
||||
<noindex><p>
|
||||
<pre><code><input id="panner-input" type="range" min="-45" max="45" value="0" /></code></pre>
|
||||
</p></noindex>
|
||||
|
||||
<h4>4. Bind the Range Slider</h4>
|
||||
<p>
|
||||
Listen to the range input's <code>input</code> event and set the panner's position
|
||||
according to the input's value.
|
||||
<small>Adapted from <a href="http://stackoverflow.com/a/14412601/352796">this SO answer</a>.</small>
|
||||
</p>
|
||||
|
||||
<noindex><p>
|
||||
<pre><code>var slider = document.querySelector('#panner-input');
|
||||
slider.addEventListener('input', function (e) {
|
||||
var xDeg = parseInt(e.target.value);
|
||||
var x = Math.sin(xDeg * (Math.PI / 180));
|
||||
wavesurfer.panner.setPosition(x, 0, 0);
|
||||
});</code></pre>
|
||||
</p></noindex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
minPxPerSec: 30,
|
||||
scrollParent: true,
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686'
|
||||
});
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('media.wav');
|
||||
|
||||
// Panner
|
||||
(function () {
|
||||
// Add panner
|
||||
wavesurfer.panner = wavesurfer.backend.ac.createPanner();
|
||||
wavesurfer.backend.setFilter(wavesurfer.panner);
|
||||
|
||||
// Bind panner slider
|
||||
// @see http://stackoverflow.com/a/14412601/352796
|
||||
var onChange = function () {
|
||||
var xDeg = parseInt(slider.value);
|
||||
var x = Math.sin(xDeg * (Math.PI / 180));
|
||||
wavesurfer.panner.setPosition(x, 0, 0);
|
||||
};
|
||||
var slider = document.querySelector('[data-action="pan"]');
|
||||
slider.addEventListener('input', onChange);
|
||||
slider.addEventListener('change', onChange);
|
||||
onChange();
|
||||
}());
|
||||
|
||||
// Log errors
|
||||
wavesurfer.on('error', function (msg) {
|
||||
console.log(msg);
|
||||
});
|
||||
|
||||
// Bind play/pause button
|
||||
document.querySelector(
|
||||
'[data-action="play"]'
|
||||
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
|
||||
// Progress bar
|
||||
(function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
}());
|
||||
});
|
||||
Binary file not shown.
@@ -0,0 +1,67 @@
|
||||
// Create a WaveSurfer instance
|
||||
var wavesurfer;
|
||||
|
||||
|
||||
// Init on DOM ready
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: '#waveform',
|
||||
waveColor: '#428bca',
|
||||
progressColor: '#31708f',
|
||||
height: 120,
|
||||
barWidth: 3
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Bind controls
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var playPause = document.querySelector('#playPause');
|
||||
playPause.addEventListener('click', function () {
|
||||
wavesurfer.playPause();
|
||||
});
|
||||
|
||||
// Toggle play/pause text
|
||||
wavesurfer.on('play', function () {
|
||||
document.querySelector('#play').style.display = 'none';
|
||||
document.querySelector('#pause').style.display = '';
|
||||
});
|
||||
wavesurfer.on('pause', function () {
|
||||
document.querySelector('#play').style.display = '';
|
||||
document.querySelector('#pause').style.display = 'none';
|
||||
});
|
||||
|
||||
|
||||
// The playlist links
|
||||
var links = document.querySelectorAll('#playlist a');
|
||||
var currentTrack = 0;
|
||||
|
||||
// Load a track by index and highlight the corresponding link
|
||||
var setCurrentSong = function (index) {
|
||||
links[currentTrack].classList.remove('active');
|
||||
currentTrack = index;
|
||||
links[currentTrack].classList.add('active');
|
||||
wavesurfer.load(links[currentTrack].href);
|
||||
};
|
||||
|
||||
// Load the track on click
|
||||
Array.prototype.forEach.call(links, function (link, index) {
|
||||
link.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
setCurrentSong(index);
|
||||
});
|
||||
});
|
||||
|
||||
// Play on audio load
|
||||
wavesurfer.on('ready', function () {
|
||||
wavesurfer.play();
|
||||
});
|
||||
|
||||
// Go to the next track on finish
|
||||
wavesurfer.on('finish', function () {
|
||||
setCurrentSong((currentTrack + 1) % links.length);
|
||||
});
|
||||
|
||||
// Load the first track
|
||||
setCurrentSong(currentTrack);
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Playlist</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.min.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">wavesurfer.js Playlist Demo</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div class="row" style="margin: 30px 0">
|
||||
<div class="col-sm-10">
|
||||
<div id="waveform">
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-2">
|
||||
<button class="btn btn-success btn-block" id="playPause">
|
||||
<span id="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
</span>
|
||||
|
||||
<span id="pause" style="display: none">
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group" id="playlist">
|
||||
<a href="../media/demo.wav" class="list-group-item">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
czskamaarù – Trou
|
||||
<span class="badge">0:21</span>
|
||||
</a>
|
||||
|
||||
<a href="../panner/media.wav" class="list-group-item">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
日本人の話し
|
||||
<span class="badge">1:04</span>
|
||||
</a>
|
||||
|
||||
<a href="../elan/transcripts/001z.mp3" class="list-group-item">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Рассказы о сновидениях
|
||||
<span class="badge badge-info">1:26</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<p>
|
||||
Audio sources:<br />
|
||||
<a rel="nofollow" href="http://www.jamendo.com/en/track/661578/trou"><b>Trou</b> <span class="muted">by</span> <b>czskamaarù</b></a>,
|
||||
<a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
'use strict';
|
||||
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var pluginOptions = {
|
||||
minimap: {
|
||||
waveColor : '#777',
|
||||
progressColor : '#222',
|
||||
height: 30
|
||||
},
|
||||
timeline: {
|
||||
container: '#wave-timeline'
|
||||
},
|
||||
spectrogram: {
|
||||
container: '#wave-spectrogram'
|
||||
},
|
||||
regions: {
|
||||
regions: [
|
||||
{
|
||||
start: 1,
|
||||
end: 3,
|
||||
color: 'hsla(400, 100%, 30%, 0.5)'
|
||||
},
|
||||
{
|
||||
start: 4,
|
||||
end: 5.4
|
||||
},
|
||||
{
|
||||
start: 6.22,
|
||||
end: 7.1
|
||||
}
|
||||
]
|
||||
},
|
||||
elan: {
|
||||
url: '../elan/transcripts/001z.xml',
|
||||
container: '#annotations',
|
||||
tiers: {
|
||||
Text: true,
|
||||
Comments: true
|
||||
}
|
||||
}
|
||||
};
|
||||
var options = {
|
||||
container : '#waveform',
|
||||
waveColor : 'violet',
|
||||
progressColor : 'purple',
|
||||
loaderColor : 'purple',
|
||||
cursorColor : 'navy',
|
||||
plugins: [
|
||||
WaveSurfer.minimap.create(pluginOptions.minimap)
|
||||
]
|
||||
};
|
||||
|
||||
if (location.search.match('scroll')) {
|
||||
options.minPxPerSec = 100;
|
||||
options.scrollParent = true;
|
||||
}
|
||||
|
||||
if (location.search.match('normalize')) {
|
||||
options.normalize = true;
|
||||
}
|
||||
|
||||
// Init wavesurfer
|
||||
wavesurfer = WaveSurfer.create(options);
|
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-activate-plugin]'), function (el) {
|
||||
var activePlugins = wavesurfer.initialisedPluginList;
|
||||
Object.keys(activePlugins).forEach(function(name) {
|
||||
if (el.dataset.activatePlugin === name) {
|
||||
el.checked = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-activate-plugin]'), function (el) {
|
||||
el.addEventListener('change', function (e) {
|
||||
var pluginName = e.currentTarget.dataset.activatePlugin;
|
||||
var activate = e.target.checked;
|
||||
var options = pluginOptions[pluginName] || {};
|
||||
var plugin = WaveSurfer[pluginName].create(options);
|
||||
|
||||
if (activate) {
|
||||
wavesurfer.addPlugin(plugin).initPlugin(pluginName);
|
||||
} else {
|
||||
wavesurfer.destroyPlugin(pluginName);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* Progress bar */
|
||||
(function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
}());
|
||||
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
});
|
||||
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Timeline plugin</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<link rel="screenshot" itemprop="screenshot" href="//katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- timeline format renderer -->
|
||||
<script src="../../dist/plugin/wavesurfer.timeline.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.minimap.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.cursor.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.elan.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.microphone.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.spectrogram.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
<script src="../trivia.js"></script>
|
||||
|
||||
<!-- Styling information for the elan plugin -->
|
||||
<style type="text/css">
|
||||
#annotations {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.wavesurfer-annotations tr.wavesurfer-active td {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.wavesurfer-time {
|
||||
width: 100px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.wavesurfer-tier-Text {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
td.wavesurfer-tier-Comments {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.wavesurfer-handle {
|
||||
background-color: #c9e2b3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<noindex>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="?fill">Fill</a></li>
|
||||
<li><a href="?scroll">Scroll</a></li>
|
||||
</ul>
|
||||
</noindex>
|
||||
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> Plugin system</noindex></h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
<div id="wave-timeline"></div>
|
||||
<div id="wave-spectrogram"></div>
|
||||
<div id="annotations"></div>
|
||||
|
||||
<div class="controls">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="form-group marketing">
|
||||
<h4>Disable and enable plugins on the fly:</h4>
|
||||
<hr />
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value="" data-activate-plugin="minimap">Minimap</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value="" data-activate-plugin="timeline">Timeline</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value="" data-activate-plugin="cursor">Cursor</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value="" data-activate-plugin="spectrogram">Spectrogram</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value="" data-activate-plugin="regions">Regions</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" value="" data-activate-plugin="elan">Elan</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="marketing">
|
||||
<h4>Initialising wavesurfer with plugins</h4>
|
||||
<hr />
|
||||
<p>The <code>plugins</code> option is an array of plugin definitions. Calling a plugin with the parameter <code>deferInit: true</code> will stop it from automatically initialising – you can do that at a later time with <code>wavesurfer.initPlugin('mypluginname')</code>.</p>
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: '#waveform',
|
||||
waveColor: 'violet',
|
||||
// ... other wavesurfer options
|
||||
plugins: [
|
||||
WaveSurfer.timeline.create{
|
||||
container: '#wave-timeline',
|
||||
// ... other timeline options
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
wavesurfer.load('example/media/demo.mp3');</code></pre>
|
||||
</p></noindex>
|
||||
</div>
|
||||
<div class="marketing">
|
||||
<h4>Dynamically adding and initialising a plugin</h4>
|
||||
<hr />
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: '#waveform',
|
||||
waveColor: 'violet',
|
||||
// ... other wavesurfer options
|
||||
});
|
||||
|
||||
// adding and initialising a plugin after initialisation
|
||||
wavesurfer.addPlugin(WaveSurfer.timeline.create{
|
||||
container: '#wave-timeline',
|
||||
// ... other timeline options
|
||||
})).initPlugin('timeline')
|
||||
|
||||
wavesurfer.load('example/media/demo.mp3');</code></pre>
|
||||
</p></noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName" rel="cc:attributionURL">katspaugh</a> is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686',
|
||||
backend: 'MediaElement',
|
||||
plugins: [
|
||||
WaveSurfer.regions.create({
|
||||
regions: [
|
||||
{
|
||||
start: 1,
|
||||
end: 3,
|
||||
color: 'hsla(400, 100%, 30%, 0.5)'
|
||||
}, {
|
||||
start: 5,
|
||||
end: 7,
|
||||
color: 'hsla(200, 50%, 70%, 0.4)'
|
||||
}
|
||||
],
|
||||
dragSelection: {
|
||||
slop: 5
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
|
||||
// this is already being done in /examples/trivia.js
|
||||
// document.querySelector(
|
||||
// '[data-action="play"]'
|
||||
// ).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
|
||||
});
|
||||
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Regions</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- plugins -->
|
||||
<script src="../../dist/plugin/wavesurfer.timeline.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.minimap.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="../trivia.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">wavesurfer.js Regions</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686',
|
||||
backend: 'MediaElement',
|
||||
plugins: [
|
||||
WaveSurfer.regions.create{
|
||||
regions: [
|
||||
{
|
||||
start: 1,
|
||||
end: 3,
|
||||
color: 'hsla(400, 100%, 30%, 0.5)'
|
||||
}, {
|
||||
start: 5,
|
||||
end: 7,
|
||||
color: 'hsla(200, 50%, 70%, 0.4)'
|
||||
}
|
||||
],
|
||||
dragSelection: {
|
||||
slop: 5
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
</code></pre>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<p>
|
||||
The sound file is from <a href="https://librivox.org/librivox-multilingual-short-works-collection-001-by-various/">librivox.org</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@@ -0,0 +1,52 @@
|
||||
'use strict';
|
||||
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Create an instance
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container : '#waveform',
|
||||
waveColor : 'violet',
|
||||
progressColor : 'purple',
|
||||
loaderColor : 'purple',
|
||||
cursorColor : 'navy',
|
||||
plugins: [
|
||||
WaveSurfer.spectrogram.create({
|
||||
container: '#wave-spectrogram'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
if (location.search.match('scroll')) {
|
||||
options.minPxPerSec = 100;
|
||||
options.scrollParent = true;
|
||||
}
|
||||
|
||||
if (location.search.match('normalize')) {
|
||||
options.normalize = true;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
(function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
}());
|
||||
|
||||
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Spectrogram plugin</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- spectrogram format renderer -->
|
||||
<script src="../../dist/plugin/wavesurfer.spectrogram.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
<script src="../trivia.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<noindex>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="?fill">Fill</a></li>
|
||||
<li><a href="?scroll">Scroll</a></li>
|
||||
</ul>
|
||||
</noindex>
|
||||
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> + Spectrogram</noindex></h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
<div id="wave-spectrogram"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-4">
|
||||
<h4>wavesurfer.js Spectrogram Plugin</h4>
|
||||
|
||||
<p itemprop="about">Adds a simple spectrogram to your <strong>wavesurfer.js</strong> instances.</p>
|
||||
|
||||
<h4>Installation</h4>
|
||||
|
||||
<p>
|
||||
<ol>
|
||||
<li>add the Spectrogram plugin script tag</li>
|
||||
<li>create a <code>WaveSurfer</code> instance</li>
|
||||
<li>add a container HTML element for the spectrogram</li>
|
||||
<li>create a Spectrogram instance in the <code>WaveSurfer</code>'s <code>"ready"</code> event callback</li>
|
||||
</ol>
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn btn-large btn-success" href="../../plugin/wavesurfer.spectrogram.js" itemprop="downloadUrl" download>Download <strong>the plugin</strong> (5 KB)</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<h4>Quick Start</h4>
|
||||
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
// your options here
|
||||
plugins: [
|
||||
WaveSurfer.spectrogram.create{
|
||||
wavesurfer: wavesurfer,
|
||||
container: "#wave-spectrogram"
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
wavesurfer.load('example/media/demo.wav');</code></pre>
|
||||
</p></noindex>
|
||||
|
||||
<br />
|
||||
|
||||
<h4>Options</h4>
|
||||
|
||||
<ul class="markdown-body">
|
||||
<li><code>wavesurfer</code> - <em>required</em> - a WaveSurfer instance.</li>
|
||||
<li><code>container</code> - <em>required</em> - the element in which to place the spectrogram, or a CSS selector to find it.</li>
|
||||
<li><code>fftSamples</code> - number of FFT samples (<code>512</code> by default). Number of spectral lines and height of the spectrogram will be a half of this parameter.</li>
|
||||
<li><code>frequenciesDataUrl</code> - URL to load spectral data from.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
window.onload = function () {
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
splitChannels: true
|
||||
});
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('stereo.mp3');
|
||||
|
||||
// Play/pause on button press
|
||||
document.querySelector('[data-action="play"]').addEventListener(
|
||||
'click', wavesurfer.playPause.bind(wavesurfer)
|
||||
);
|
||||
|
||||
|
||||
// Drag'n'drop
|
||||
var toggleActive = function (e, toggle) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
toggle ? e.target.classList.add('wavesurfer-dragover') :
|
||||
e.target.classList.remove('wavesurfer-dragover');
|
||||
};
|
||||
|
||||
var handlers = {
|
||||
// Drop event
|
||||
drop: function (e) {
|
||||
toggleActive(e, false);
|
||||
|
||||
// Load the file into wavesurfer
|
||||
if (e.dataTransfer.files.length) {
|
||||
wavesurfer.loadBlob(e.dataTransfer.files[0]);
|
||||
} else {
|
||||
wavesurfer.fireEvent('error', 'Not a file');
|
||||
}
|
||||
},
|
||||
|
||||
// Drag-over event
|
||||
dragover: function (e) {
|
||||
toggleActive(e, true);
|
||||
},
|
||||
|
||||
// Drag-leave event
|
||||
dragleave: function (e) {
|
||||
toggleActive(e, false);
|
||||
}
|
||||
};
|
||||
|
||||
var dropTarget = document.querySelector('#drop');
|
||||
Object.keys(handlers).forEach(function (event) {
|
||||
dropTarget.addEventListener(event, handlers[event]);
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Split Channel Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Split Channel Waveforms</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="lead pull-center" id="drop">
|
||||
Drag'n'drop your
|
||||
<i class="glyphicon glyphicon-music"></i>-file
|
||||
here!
|
||||
</p>
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>How to Enable Split Channels</h3>
|
||||
|
||||
<p>
|
||||
Set the <code>splitChannels</code> option to <code>true</code>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#wave'),
|
||||
splitChannels: true
|
||||
});
|
||||
</code></pre>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<noindex>
|
||||
Demo music track is <a href="https://www.jamendo.com/en/track/205154/transistor" rel="nofollow"><b>Transistor</b> <span class="muted">by</span> <b>Transistor</b></a> (CC BY-NC-ND 3.0). Thanks!
|
||||
</noindex>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Split Wave Point Plot Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.min.js"></script>
|
||||
|
||||
<script src="../../plugin/wavesurfer.regions.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Split Wave / Point Plot </h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
The Split Wave Point Plot drawer splits the graphic in two, with the upper half being a plot of
|
||||
points defined by time and a range of values. The following example shows the calculated pitch
|
||||
at each point in time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>How to Enable Split Wave/Point Plot</h3>
|
||||
|
||||
<p>
|
||||
Set the <code>renderer</code> option to <code>SplitWavePointPlot</code> and the <code>plotFileUrl</code> to the file containing the time aligned data.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#wave'),
|
||||
renderer: 'SplitWavePointPlot',
|
||||
plotFileUrl: 'data.txt'
|
||||
});
|
||||
</code></pre>
|
||||
</p>
|
||||
|
||||
<h3>Providing Point Data</h3>
|
||||
<p>The data to be graphed can be provided by either providing a file defined in the <code>plotFileUrl</code> or by passing in an array of data in the <code>plotArray</code> option. The time data does not need to be continous and can have gaps.</p>
|
||||
<strong>Note: if the timing of your data does not span the duration of the sound file you should set <code>plotTimeEnd</code> to the total duration of the sound file or the points may not be aligned correctly</strong></li>
|
||||
<h4>Data File Format</h4>
|
||||
<p>If providing data by loading a file, each line of the file must contain two elements: the time and the value of the point separated by a delimiter (defaults to tab). E.g.</p>
|
||||
<pre><code>0.01 123
|
||||
0.02 121
|
||||
0.03 127
|
||||
0.22 120
|
||||
0.23 119</code></pre>
|
||||
|
||||
<h4>Data Array Format</h4>
|
||||
<p>If providing data by a javascript array via the <code>plotArray</code> option the array should have the following form:</p>
|
||||
<pre><code>[
|
||||
{time: 0.02, value: 121},
|
||||
{time: 0.03, value: 127},
|
||||
{time: 0.22, value: 120},
|
||||
{time: 0.03, value: 119}
|
||||
]</code></pre>
|
||||
|
||||
<h3>Options</h3>
|
||||
<p>The following additional options can be set when initializing wavesurfer to control the waveform</p>
|
||||
<ul>
|
||||
<li><code>plotArray:</code> array of objects with time and plot (required unless plotFileUrl is set)</li>
|
||||
<li><code>plotFileUrl:</code> url of the file that contains the plot information (required unless plotArray is set)</li>
|
||||
<li><code>plotNormalizeTo:</code> [whole/segment/none/values] - what value to normalize the plot to (defaults to "whole")</li>
|
||||
<li><code>plotMin:</code> the minimum value to normalize points to. Any value below this will be ignored (defaults to 0)</li>
|
||||
<li><code>plotMax:</code> the maximum value to normalize points to. Any value above this will be ignored (defaults to 1)</li>
|
||||
<li><code>plotTimeStart:</code> the time included in the plot file which corresponds with the start of the displayed wave (defaults to 0)</li>
|
||||
<li><code>plotTimeEnd:</code> the time included in the plot file which corresponds with the end of the displayed wave (defaults maximum plot time)</li>
|
||||
<li><code>plotColor:</code> the color of the plot (defaults to #f63)</li>
|
||||
<li><code>plotProgressColor:</code> the color of the progress plot (defaults to '#F00')</li>
|
||||
<li><code>plotFileDelimiter:</code> the delimiter which separates the time from the value in the plot file (defaults to tab characater = "\t")</li>
|
||||
<li><code>plotPointHeight:</code> the canvas height of each plot point (defaults to 2)</li>
|
||||
<li><code>plotPointWidth:</code> the canvas width of each plot point (defaults to 2)</li>
|
||||
<li><code>plotSeparator:</code> boolean indicating a separator should be included between the wave and point plot</li>
|
||||
<li><code>plotRangeDisplay:</code> boolean indicating if the min and max range should be displayed (defaults to false)</li>
|
||||
<li><code>plotRangePrecision:</code> integer determining the precision of the displayed plot range</li>
|
||||
<li><code>plotRangeUnits:</code> units appended to the range</li>
|
||||
<li><code>plotRangeFontSize:</code> the font for displaying the range - defaults to 20</li>
|
||||
<li><code>plotRangeFontType:</code> the font type for displaying range - defaults to Ariel</li>
|
||||
<li><code>plotRangeIgnoreOutliers:</code> boolean indicating if values outside of range should be ignored or plotted at min/max</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<noindex>
|
||||
Demo is selection of from The Hobbit by J.R.R. Tolkien
|
||||
</noindex>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/*
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
'use strict';
|
||||
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var options = {
|
||||
container : '#waveform',
|
||||
waveColor : 'violet',
|
||||
progressColor : 'purple',
|
||||
loaderColor : 'purple',
|
||||
cursorColor : 'navy',
|
||||
plugins: [
|
||||
WaveSurfer.timeline.create({
|
||||
container: '#wave-timeline'
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
if (location.search.match('scroll')) {
|
||||
options.minPxPerSec = 100;
|
||||
options.scrollParent = true;
|
||||
}
|
||||
|
||||
if (location.search.match('normalize')) {
|
||||
options.normalize = true;
|
||||
}
|
||||
|
||||
// Init wavesurfer
|
||||
wavesurfer = WaveSurfer.create(options);
|
||||
|
||||
/* Progress bar */
|
||||
(function () {
|
||||
var progressDiv = document.querySelector('#progress-bar');
|
||||
var progressBar = progressDiv.querySelector('.progress-bar');
|
||||
|
||||
var showProgress = function (percent) {
|
||||
progressDiv.style.display = 'block';
|
||||
progressBar.style.width = percent + '%';
|
||||
};
|
||||
|
||||
var hideProgress = function () {
|
||||
progressDiv.style.display = 'none';
|
||||
};
|
||||
|
||||
wavesurfer.on('loading', showProgress);
|
||||
wavesurfer.on('ready', hideProgress);
|
||||
wavesurfer.on('destroy', hideProgress);
|
||||
wavesurfer.on('error', hideProgress);
|
||||
}());
|
||||
|
||||
|
||||
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
});
|
||||
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Timeline plugin</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
|
||||
<link rel="screenshot" itemprop="screenshot" href="//katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<!-- timeline format renderer -->
|
||||
<script src="../../dist/plugin/wavesurfer.timeline.js"></script>
|
||||
|
||||
<!-- App -->
|
||||
<script src="app.js"></script>
|
||||
<script src="../trivia.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<noindex>
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="?fill">Fill</a></li>
|
||||
<li><a href="?scroll">Scroll</a></li>
|
||||
</ul>
|
||||
</noindex>
|
||||
|
||||
<h1 itemprop="name"><a href="http://wavesurfer-js.org">wavesurfer.js</a><noindex> + Timeline</noindex></h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<div class="progress progress-striped active" id="progress-bar">
|
||||
<div class="progress-bar progress-bar-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Here be waveform -->
|
||||
</div>
|
||||
<div id="wave-timeline"></div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<div class="col-lg-4">
|
||||
<h4>wavesurfer.js Timeline Plugin</h4>
|
||||
|
||||
<p itemprop="about">Adds a simple timeline to your <strong>wavesurfer.js</strong> instances.</p>
|
||||
|
||||
<p>
|
||||
<a class="btn btn-large btn-success" href="../../plugin/wavesurfer.timeline.js" itemprop="downloadUrl" download>Download the plugin</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<h4>Quick Start</h4>
|
||||
|
||||
<noindex><p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
// your options here
|
||||
plugins: [
|
||||
WaveSurfer.timeline.create{
|
||||
container: "#wave-timeline"
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
wavesurfer.load('example/media/demo.mp3');</code></pre>
|
||||
</p></noindex>
|
||||
|
||||
<br />
|
||||
|
||||
<h4>Options</h4>
|
||||
|
||||
<ul class="markdown-body">
|
||||
<li><code>container</code> - <em>required</em> - the element in which to place the timeline, or a CSS selector to find it</li>
|
||||
<li><code>height</code> - the height (in pixels) of the timeline. The default is 20.</li>
|
||||
<li><code>notchPercentHeight</code> - the height (in percent) of the minor notch lines in the timeline. The default is 90.</li>
|
||||
<li><code>primaryColor</code> - the color of the modulo-ten notch lines (e.g. 10sec, 20sec). The default is '#000'.</li>
|
||||
<li><code>secondaryColor</code> - the color of the non-modulo-ten notch lines. The default is '#c0c0c0'.</li>
|
||||
<li><code>primaryFontColor</code> - the color of the non-modulo-ten time labels (e.g. 10sec, 20sec). The default is '#000'.</li>
|
||||
<li><code>primaryFontColor</code> - the color of the non-modulo-ten time labels (e.g. 5sec, 15sec). The default is '#c0c0c0'.</li>
|
||||
<li><code>timeInterval</code> - number of intervals that records consists of. Usually it is equal to the duration in minutes. (Integer or function which receives pxPerSec value and reurns value)</li>
|
||||
<li><code>primaryLabelInterval</code> - number of primary time labels. (Integer or function which receives pxPerSec value and reurns value)</li>
|
||||
<li><code>secondaryLabelInterval</code> - number of secondary time labels (Time labels between primary labels, integer or function which receives pxPerSec value and reurns value).</li>
|
||||
<li><code>formatTimeCallback</code> - custom time format callback. (Function which receives number of seconds and returns formatted string)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
var GLOBAL_ACTIONS = {
|
||||
'play': function () {
|
||||
wavesurfer.playPause();
|
||||
},
|
||||
|
||||
'back': function () {
|
||||
wavesurfer.skipBackward();
|
||||
},
|
||||
|
||||
'forth': function () {
|
||||
wavesurfer.skipForward();
|
||||
},
|
||||
|
||||
'toggle-mute': function () {
|
||||
wavesurfer.toggleMute();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Bind actions to buttons and keypresses
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('keydown', function (e) {
|
||||
var map = {
|
||||
32: 'play', // space
|
||||
37: 'back', // left
|
||||
39: 'forth' // right
|
||||
};
|
||||
var action = map[e.keyCode];
|
||||
if (action in GLOBAL_ACTIONS) {
|
||||
if (document == e.target || document.body == e.target) {
|
||||
e.preventDefault();
|
||||
}
|
||||
GLOBAL_ACTIONS[action](e);
|
||||
}
|
||||
});
|
||||
|
||||
[].forEach.call(document.querySelectorAll('[data-action]'), function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
var action = e.currentTarget.dataset.action;
|
||||
if (action in GLOBAL_ACTIONS) {
|
||||
e.preventDefault();
|
||||
GLOBAL_ACTIONS[action](e);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Misc
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Web Audio not supported
|
||||
if (!window.AudioContext && !window.webkitAudioContext) {
|
||||
var demo = document.querySelector('#demo');
|
||||
if (demo) {
|
||||
demo.innerHTML = '<img src="/example/screenshot.png" />';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar links
|
||||
var ul = document.querySelector('.nav-pills');
|
||||
var pills = ul.querySelectorAll('li');
|
||||
var active = pills[0];
|
||||
if (location.search) {
|
||||
var first = location.search.split('&')[0];
|
||||
var link = ul.querySelector('a[href="' + first + '"]');
|
||||
if (link) {
|
||||
active = link.parentNode;
|
||||
}
|
||||
}
|
||||
active && active.classList.add('active');
|
||||
});
|
||||
@@ -0,0 +1,145 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Media Element Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Existing Media Element Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<video src="../media/demo_video.mp4" type="video/mpeg"></video>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>How to Enable the Fallback</h3>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
You can choose to use an existing
|
||||
html5 audio or video element manually. Simply set the <code>backend</code>
|
||||
option to <code>"MediaElement"</code> and pass the media element as the first
|
||||
argument to wavesurfer.load(). Include an array of peaks as the second
|
||||
argument, the Web Audio API will not be used to render the peaks.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686',
|
||||
backend: 'MediaElement'
|
||||
});
|
||||
|
||||
// Load audio from existing media element
|
||||
var mediaElt = document.querySelector('video');
|
||||
|
||||
wavesurfer.load(mediaElt);</code></pre>
|
||||
</p>
|
||||
|
||||
<h3>Pre-rendered Peaks</h3>
|
||||
|
||||
<p>
|
||||
If you have pre-rendered peaks (on your server),
|
||||
you can pass them into the <code>load</code>
|
||||
function. This is optional–if you don't provide
|
||||
any peaks,
|
||||
<strong>waserver.js</strong> will first draw a
|
||||
thin line instead of a waveform, then attempt to
|
||||
download the audio file via Ajax and decode it
|
||||
with Web Audio if available.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<pre><code>
|
||||
// init with an array of peak data.
|
||||
wavesurfer.load(mediaElt, [0.0218, 0.0183, 0.0165, 0.0198, 0.2137]);
|
||||
</code></pre>
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
Press this button to see the same demo with pre-decoded peaks:
|
||||
<button class="btn btn-warning" data-action="peaks">
|
||||
Load with pre-rendered peaks
|
||||
</button>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686',
|
||||
backend: 'MediaElement'
|
||||
});
|
||||
|
||||
// Load audio from existing media element
|
||||
var mediaElt = document.querySelector('video');
|
||||
|
||||
wavesurfer.load(mediaElt);
|
||||
|
||||
document.querySelector(
|
||||
'[data-action="play"]'
|
||||
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
|
||||
document.querySelector(
|
||||
'[data-action="peaks"]'
|
||||
).addEventListener('click', function () {
|
||||
wavesurfer.load(mediaElt, [
|
||||
0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
|
||||
]);
|
||||
document.body.scrollTop = 0;
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>wavesurfer.js | Zoom Example</title>
|
||||
|
||||
<link href="data:image/gif;" rel="icon" type="image/x-icon" />
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
<link rel="stylesheet" href="../css/ribbon.css" />
|
||||
<link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />
|
||||
|
||||
<!-- wavesurfer.js -->
|
||||
<script src="../../dist/wavesurfer.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.timeline.js"></script>
|
||||
<script src="../../dist/plugin/wavesurfer.regions.js"></script>
|
||||
|
||||
<!-- Demo -->
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
|
||||
<body itemscope itemtype="http://schema.org/WebApplication">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<ul class="nav nav-pills pull-right">
|
||||
<li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<h1 itemprop="name">Zooming Feature Example</h1>
|
||||
</div>
|
||||
|
||||
<div id="demo">
|
||||
<div id="waveform">
|
||||
<!-- Here be the waveform -->
|
||||
</div>
|
||||
|
||||
<div id="timeline"></div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<button class="btn btn-primary" data-action="play">
|
||||
<i class="glyphicon glyphicon-play"></i>
|
||||
Play
|
||||
/
|
||||
<i class="glyphicon glyphicon-pause"></i>
|
||||
Pause
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-1">
|
||||
<i class="glyphicon glyphicon-zoom-in"></i>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-3">
|
||||
<input data-action="zoom" type="range" min="1" max="200" value="0" style="width: 100%" />
|
||||
</div>
|
||||
|
||||
<div class="col-sm-1">
|
||||
<i class="glyphicon glyphicon-zoom-out"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row marketing">
|
||||
<h3>How to Zoom</h3>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>
|
||||
<pre><code>var wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#wave'),
|
||||
backend: 'MediaElement'
|
||||
});
|
||||
|
||||
document.querySelector('#slider').oninput = function () {
|
||||
wavesurfer.zoom(Number(this.value));
|
||||
};
|
||||
</code></pre>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer row">
|
||||
<div class="col-sm-12">
|
||||
<a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-7">
|
||||
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a <a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
|
||||
</div>
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="pull-right">
|
||||
<noindex>
|
||||
The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
|
||||
</noindex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="github-fork-ribbon-wrapper right">
|
||||
<div class="github-fork-ribbon">
|
||||
<a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-50026819-1', 'wavesurfer.fm');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
'use strict';
|
||||
|
||||
// Create an instance
|
||||
var wavesurfer;
|
||||
|
||||
// Init & load audio file
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Init
|
||||
wavesurfer = WaveSurfer.create({
|
||||
container: document.querySelector('#waveform'),
|
||||
waveColor: '#A8DBA8',
|
||||
progressColor: '#3B8686',
|
||||
backend: 'MediaElement',
|
||||
plugins: [
|
||||
WaveSurfer.regions.create({
|
||||
regions: [
|
||||
{
|
||||
start: 0,
|
||||
end: 5,
|
||||
color: 'hsla(400, 100%, 30%, 0.1)'
|
||||
}, {
|
||||
start: 10,
|
||||
end: 100,
|
||||
color: 'hsla(200, 50%, 70%, 0.1)'
|
||||
}
|
||||
]
|
||||
}),
|
||||
WaveSurfer.timeline.create({
|
||||
container: '#timeline'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// Load audio from URL
|
||||
wavesurfer.load('../media/demo.wav');
|
||||
|
||||
|
||||
// Zoom slider
|
||||
var slider = document.querySelector('[data-action="zoom"]');
|
||||
|
||||
slider.value = wavesurfer.params.minPxPerSec;
|
||||
slider.min = wavesurfer.params.minPxPerSec;
|
||||
|
||||
slider.addEventListener('input', function () {
|
||||
wavesurfer.zoom(Number(this.value));
|
||||
});
|
||||
|
||||
|
||||
// Play button
|
||||
var button = document.querySelector('[data-action="play"]');
|
||||
|
||||
button.addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
|
||||
});
|
||||
Reference in New Issue
Block a user