Videogular - Creating an Audio Player

index.html

<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
	<videogular vg-theme="controller.config.theme.url" class="videogular-container audio">
		<vg-media vg-src="controller.config.sources" vg-type="audio"></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-volume>
				<vg-mute-button></vg-mute-button>
			</vg-volume>
		</vg-controls>
	</videogular>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>

script.js

'use strict';
angular.module('myApp',
		[
			"ngSanitize",
			"com.2fdevs.videogular",
			"com.2fdevs.videogular.plugins.controls"
		]
	)
	.controller('HomeCtrl',
		["$sce", function ($sce) {
			this.config = {
				sources: [
              {src: $sce.trustAsResourceUrl("http://41.21.178.245:1935/jac-pri/jac-pri.stream/playlist.m3u8"), type: "audio/mpeg"},
              {src: $sce.trustAsResourceUrl("http://41.21.178.245:1935/jac-pri/jac-pri.stream/playlist.m3u8"), type: "audio/ogg"}
          ],
				theme: {
          url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
				}
			};
		}]
	);

style.css

html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.videogular-container {
	width: 100%;
	height: 320px;
	margin: auto;
	overflow: hidden;
}

.videogular-container.audio {
	height: 50px;
}

@media (min-width: 1200px) {
	.videogular-container {
		width: 1170px;
		height: 658.125px;
	}

	.videogular-container.audio {
		width: 1170px;
		height: 50px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.videogular-container {
		width: 940px;
		height: 528.75px;
	}

	.videogular-container.audio {
		width: 940px;
		height: 50px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.videogular-container {
		width: 728px;
		height: 409.5px;
	}

	.videogular-container.audio {
		width: 728px;
		height: 50px;
	}
}

Videogular---Creating-an-Audio-Player.markdown

Videogular - Creating an Audio Player

Forked from [TFD] (http://codepen.io/2fdevs/)'s Pen Videogular - Creating an Audio Player - Streaming Sources

A Pen by Syntax on CodePen.

License.