data.js

module.exports = {
  data: [
    {
      title: 'Conversational',
      demo_url: './assets/media/DonovanCorneetz_UrbanDemo.mp3',
      type: 'audio/mpeg'
    },
    {
      title: 'Urban',
      demo_url: 'http://www.donovanvo.com/Media/DonovanCorneetz_ConversationalDemo.mp3',
      type: 'audio/mpeg'
    }
  ]
};

demos.html

<div class="videogular-container">
  <videogular vg-player-ready="onPlayerReady($API)"
              vg-auto-play="false"
              vg-can-play="onCanPlay()"
              vg-complete="onCompleteVideo()"
              vg-theme="config.theme.url"
              vg-error="onError($event)"
              class="videogular-container audio">
    <vg-media vg-src="config.sources" vg-type="audio" vg-preload="auto"></vg-media>
    <vg-controls>
      <vg-play-pause-button></vg-play-pause-button>
      <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
      <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
      </vg-scrub-bar>
      <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
    </vg-controls>
    <vg-buffering></vg-buffering>
  </videogular>
</div>

demos.js

'use strict';

export default angular.module('myApp.Demos', [
  'ngSanitize',
  'com.2fdevs.videogular',
  'com.2fdevs.videogular.plugins.buffering',
  'com.2fdevs.videogular.plugins.controls'
])
.controller(['$scope', '$sce', '$timeout', 'DataService',
function DemosCtrl($scope, $sce, $timeout, DataService) {
  DataService.get('demos').then(function(data) {
    $scope.sources = data.map(v => ({
      title: v.title,
      src: v.demo_url,
      type: v.type
    }));

    $scope.setSource($scope.sources[0]);
  });

  $scope.config = {
    preload: 'none',
    sources: [],
    theme: {
      url: 'http://www.videogular.com/styles/themes/default/latest/videogular.css'
    },
    plugins: {
      controls: {
        autoHide: true,
        autoHideTime: 3000
      }
    }
  };

  $scope.onPlayerReady = function(API) {
    console.log('ready', API);
    $scope.API = API;
  };

  $scope.onCompleteVideo = function() {
    console.log('done');
  };

  $scope.onCanPlay = function() {
    console.log('Can Play');
  };

  $scope.setSource = function(demo) {
    $scope.API.stop();
    $scope.API.changeSource([{src: $sce.trustAsResourceUrl(demo.src), type: demo.type}]);
    $timeout($scope.API.play.bind($scope.API), 300);
  };

  $scope.onError = function(event) {
    console.log('error', event); // this is returning undefined
  };

}]);