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
|
||||
};
|
||||
});
|
||||
;
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user