Skip to content

Instantly share code, notes, and snippets.

@laradevitt

laradevitt/app.js

Created October 13, 2016 18:36
Show Gist options
  • Save laradevitt/94f7e21eaf6d3441b9475fc8f5201201 to your computer and use it in GitHub Desktop.
Save laradevitt/94f7e21eaf6d3441b9475fc8f5201201 to your computer and use it in GitHub Desktop.
Download ZIP
jPlayer + AngularJS + Prismic.io - Simple demo that uses AngularJS and prismic.io API to load an audio file into jPlayer
Raw
app.js
// Set your API endpoint below!
'use strict';
var app = angular.module('app', ['prismic.io'])
.config(['PrismicProvider', function(PrismicProvider) {
PrismicProvider.setApiEndpoint('https://[YOUR SUBDOMAIN].prismic.io/api');
PrismicProvider.setLinkResolver(function(ctx, doc) {
return 'document/' + doc.id + '/' + doc.slug + ctx.maybeRefParam;
});
}])
/**
* Directive: jplayer
*/
.directive('jplayer', ['Prismic', function (Prismic) {
return {
restrict: "A",
scope: {},
templateUrl: "jplayer.html",
link: function (scope, element, attrs) {
angular.element(document).ready(function() {
scope.songTitle = '';
scope.url = '';
scope.$watchGroup(['songTitle', 'url'], function(newValues, oldValues, scope) {
if (newValues != oldValues) {
var jPlayer = $(element).find('#jquery_jplayer_1').jPlayer({
ready: function (event) {
$(this).jPlayer('setMedia', {
title: scope.songTitle,
mp3: scope.url
});
},
swfPath: 'js',
supplied: 'mp3',
wmode: 'window',
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true,
volume: 1
});
}
});
});
},
controller: ['$scope', function($scope) {
var params = {
id: 'documents',
type: 'audio',
query: '[[:d = at(document.type, "audio")]]',
pageSize: 5
};
Prismic.query(params.query,
function(searchForm) {
return searchForm.page('1').pageSize(params.pageSize);
}
).then(
function (data) {
if (data.results_size > 0) {
var random = Math.floor(Math.random() * data.results_size);
var document = data.results[random];
$scope.songTitle = document.fragments["audio.title"].value;
$scope.albumTitle = document.fragments["audio.album"].value;
$scope.url = document.fragments["audio.audio_file"].value.file.url;
}
}
);
}]
};
}]);
Raw
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>(Example) jPlayer + AngularJS + Prismic.io</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/miktemk/jPlayer-metro-skin/master/skin/metro-fire/jplayer.metro-fire.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
</head>
<body>
<div ng-cloak>
<div class="audioplayer" jplayer></div>
</div>
<script src="https://unpkg.com/prismic.io/dist/prismic.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.rawgit.com/awulder/angular-prismicio/master/dist/angular-prismicio.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
jplayer.html
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-controls">
<a class="jp-play"><i class="fa fa-play"></i></a>
<a class="jp-pause"><i class="fa fa-pause"></i></a>
</div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
<div class="jp-current-time"></div>
</div>
</div>
<div class="jp-details">
<div class="jp-title">&nbsp;</div>
</div>
<div class="jp-no-solution">
Media Player Error<br>
Update your browser or Flash plugin
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment