JPlayer - MP3 Playlist support using Flash fallback - html

I'm new to JPlayer, and don't really know how to use it well. I'm trying to create a player which only uses MP3 files, I know not every browser natively supports MP3 playback so for the Player to work it needs to use the Flash fallback in some cases.
Currently I can make the Player work with a single MP3 but when multiple MP3's are added only the first track plays.
Here is my current script
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$("#jquery_jplayer").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", { mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" },
{ mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3" });
},
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
volume: 1,
wmode:"window",
solution: "html,flash",
errorAlerts: true,
warningAlerts: false
});
});//]]>
</script>
</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface all_rounded_corners">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>Previous</li>
<li>Next</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can tell I've gone wrong somewhere but I don't know where, I'm hoping for your help. Feel free to modify the script to make it work and possibly direct me to an example of it working.
Thank you for your help.


Instead of jPlyer you need to use jPlayerPlaylist, need to do something like bellow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface all_rounded_corners">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>Previous</li>
<li>Next</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>//<![CDATA[
var myPlaylist = null;
$(document).ready(function () {
myPlaylist = new jPlayerPlaylist(
{
jPlayer: "#jquery_jplayer_N",
cssSelectorAncestor: "#jp_container_N"
},
[
{
mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
}
],
{
playlistOptions: {
enableRemoveControls: true
},
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
solution: "html,flash"
});
myPlaylist.option("autoPlay", true);
myPlaylist.add({ title: "", artist: "", mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3", poster: "", });
});
</script>

Related

could route to different templates in angular

Below is a HTML page, Couldn't get content when click on page 1
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider){
$routeProvider.when("/page1", {
template : <h1>Page 1</h1>
})
.when("/page2", {
template: <h1>Page 2</h1>
})
.otherwise({
template: <h1>note found</h1>
})
});
</script>
</body>
</html>
Is there any mistake in above code. Is issue with reference.
Can someone please correct it?
Page 3 will not show anything.

The first mistake you missed around quotes for templates in javascript code:
$routeProvider.when('/page1', {
template : '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1>note found</h1>'
});
And no need to use a exclamation mark in links:
Page 1
Page 2
Page 3

You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Oranger
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.otherwise({redirectTo:'/'});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>

There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/page1", {
template: '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1> note found </h1>'
})
});
</script>
</body>
</html>

AngularJS function unable to be called in ng-view

Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk

Google Map does not work with Pjax while navigating from another page

I want to have a google map on my website, but the map does not show up if I first open index.html and navigate to map.html.
But if I directly open map.html or refresh the browser window while being on map.html the map shows up.
How can the map show up when navigating from index.html to map.html?
I'm using the standalone Pjax JavaScript module v0.1.4 stable (no jquery).
I added document.write("rendered at: "+ Date.now()) In my example code for better understanding.
index.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is site 1</h4>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
style.css
#map-canvas {
width: 90%;
height: 500px;
}
example.js
document.addEventListener("DOMContentLoaded", function() {
var pjax = new Pjax({
selectors: [".dynamic"]
})
console.log("Pjax initialized.", pjax)
})

Assign the style explicitly to the map div the map work .. could be you have an error in the path for style.css
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel= "stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://raw.githubusercontent.com/MoOx/pjax/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a/src/pjax.js"></script>
<script type="text/javascript" src='example.js'></script>
</head>
<body>
<div class="col-sm-2">
<div class="list-group dynamic">
Start
Map
</div>
</div>
<div class="col-sm-10">
<h1>STATIC HEADING</h1>
<script type="text/javascript">document.write("rendered at: "+ Date.now())</script>
<div class="dynamic">
<h4>this is a dynamic line, this is the map site</h4>
<div id="map-canvas" style="width:90%; height:500px;"></div>
</div>
</div>
<!-- map is not displayed currently -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(50.0, 10.0)
var mapOptions = {center: latLng,zoom: 4,mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript" src='example.js'></script>
</body>
</html>

beforeActivate not firing jeasyui

I've read through many of these questions and they are answered the same. I've tried it but can't get it to work. I've gotten the code very small. What am I doing wrong? The tabs work fine, but no event getting fired.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
beforeActivate: function(event,ui) {
alert("Tabs Changed");
}
});
});
</script>
</head>
<body>
<div class="easyui-tabs" id="tabs">
<div Title="Home" >
Home
</div>
<div Title="Admin">
Admin
</div>
</div>
</body>
</html>
thanks,
dave

jQuery link not fired

I am trying to load some ajax Content, but whenever i click on the link jQuery does not respond.
Heres my html with jquery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="e3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='img/site/loader.gif' alt='loading...' />";
// load() functions
$(document).ready(function()
{
$("#omtA").click(function()
{
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
}
);
);
</script>
</head>
<body>
<div id="page">
<div id="content">
<div id="up">
<div id="tab">
<ul id="tabmenu">
<li id="anm" class="tbs blue"><span>Anm</span></li>
<li id="kom" class="tbs blue"><span>Kom</span></li>
<li id="omt" class="tbs blue"><span>Omt</span></li>
<li id="sts" class="tbs blue"><span>Sts</span></li>
</ul>
</div>
<div id="usrp">
<a name="usrl"></a>
<div id="usr">
hans
</div>
</div>
</div>
</div>
<div id="bottom">
</div>
</div>
</body>
</html>
But when I click on the the Omt link with the id omtA nothing happends.
I have also tried
$("a#omtA").click(function()
make the link a class and tried
$(".omtA").click(function()
and
$("a.omtA").click(function()
But none of that helped.

Use this.. You have missed the closing brace } ..
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
});

It looks like you are missing an ending brace:
$(document).ready(function() {
$("#omtA").click(function() {
var loadUrl = "fomt.php";
$("#usr")
.html(ajax_load)
.load(loadUrl, "fid=<?php echo $fid;?>");
});
}/* <- that brace was missing */);