I am trying to make a simple soundboard and currently the formatting works fine in IE9 but in Chrome is has strange boxes that I believe are generated by the script to play the sounds. I can't figure out how to get rid of them.
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Soundboard</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="doc">
<h1>Soundboard</h1>
<!-- JS here to prevent 'flash' of all the default audio players -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("audio").removeAttr("controls").each(function(i, audioElement) {
var audio = $(this);
var that = this; //closure to keep reference to current audio tag
$("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
that.play();
}));
});
});
</script>
<audio src="audio/emintro.mp3" controls autobuffer="true" title="Murray!"></audio>
<audio src="audio/emitheme.mp3" controls autobuffer="true" title="Intro"></audio>
</div>
</body>
</html>
Looks to me like Chrome is trying to display the play/pause and other buttons - as you've defined in your controls parameter. It's just being handled differently. The <audio> tag is new, and not supported equally.
I'd just hide the audio elements and create my own buttons for playing them, that way you define and control the UI.
Related
I have to play a song in browses including Android and iPhone. I did it using the html5 audio player. But playbackrate is not working in Mobile Browsers. Is there any library or plugin available for this? Is web-audio API supports this feature?
In this site playback rate is working in mobiles too. But unable to find which method they are following?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<audio src="./audio/Kalimba.mp3" id="audio1" controls>Canvas not supported</audio>
<button id="playbutton" >Play</button>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#playbutton').click(function () {
var audioElm = document.getElementById("audio1");
var playBackSpeed = 0.5;
audioElm = document.getElementById("audio1");
audioElm.playbackRate = playBackSpeed; // default speed 1
audioElm.play();
});
});
</script>
</html>
The site you're linking to uses Web Audio, but it doesn't use playbackrate to change the tempo of the song. Instead it schedules each note separately, so when you change the tempo, what you're really doing is change the BPM at which notes are scheduled. You can think of it as changing this:
setTimeout(schedule, 1000);
to:
setTimeout(schedule, 500);
when you go from 60 BPM to 120 BPM.
There is, however, a similar thing is Web Audio as what you're doing with the audio element. The AudioBufferSourceNode, which you use to play a pre recorded sample, has a property called playbackRate. This changes the rate of the audio (but doesn't do pitch correction!). Check it out at https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode
There are no any external Plugin or API which is required to play audio in Browser, this is one of the advantages of using HTML5.
Below i am mentioning the same with easy syntax and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<audio controls>
<source src="Kalimba.mp3" type="audio/mp3" />
Audio not supported.
</audio>
My server side data is following:
$total=100;
$jd=array();
for($i=1;$i<=$total; $i++){
$jd["current_value"]=$i;
$jd["total"]=$total;
$jd["some_extra_data"]="Extra data-$i";
echo json_encode($jd);
sleep(1);
}
Now i want to create a progress bar from above ajax request data.
But i don't get a single data from request. all time i get full data. so, i cant create a progress bar.
how can i apply request?
Please me. thanks.
If you are not too adverse to using a JS library then you might consider using JQuerys UI library for this.
http://jqueryui.com/progressbar/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 50
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
If you were to combine this with the JQuery Ajax request then you should be able to achieve what you are after: http://api.jquery.com/jquery.ajax/
You can then periodically call the server side page to get a value to populate the progress bar.
Let me know if thats in the direct direction and I can elaborate if need be.
I use jQuery mobile to make a mobile form and then submit it.
On the main page I import the jQuery libraries.
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Waiter Menu</title>
<link rel="stylesheet" href="js1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="js1.0/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js1.0/jquery.mobile-1.0.min.js"></script>
</head>
When submit the form from the first page and linked to the second, the libraries have pre-import and I don't want that.
Because at the second page I want to use custom JavaScript.
Is there any way not to stop jQuery at linked file?
Thanks in advance!!
---edit----
I found the solution here: How To Disable Ajax In jQuery Mobile Before Page Load?
i put this into form header
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
and I set new header at second file!
I have a lot of server code (PHP) going on in my first page of the Facebook app.
I wan't the users to see a loading animation while waiting for the page.
I've seen many examples here of how to preload a page (using ajax or simply jQuery) but this is different, as I said, the page itself is generated on the server, and while that goes on, the user only sees a white blank page.
I tried to wrap my main page with another php page:
<?php
include_once 'functions.php';
session_start();
$_SESSION['fb'] = new fb();
function phponload(){
echo
'<script>
$(function(){
$("#mwrapper").load("main.php");
});
</script>';
}
?>
<html>
<head>
<script type="text/javascript">
function delayer(){
document.write("<?php phponload();?>");
}
</script>
<link href='styles/default.css' rel='stylesheet' type='text/css' />
<img class='mainload' src='images/loading.gif'></img>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='plugins/clock/clock.css' />
</head>
<body onload='setTimeout("delayer()",1000);'>
<div id='mwrapper'>
</div>
</body>
</html>
now the main php page (main.php) has something like:
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta name="google-site-verification" content="Hyqgg60NTPNA7Q9Z5y9TtezUmwhiEomwZLJDt43Ki2g" />
<!--<img class='mainload' src='images/loading.gif'></img>-->
<?php
include_once 'functions.php';
include 'res/views/getTables.php';
define('TXT_QUESTIONS_NUM', 43);
session_start();
{... more PHP code ... }
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"> </script>
<script src='scripts/menuItems.js'></script>
<script src='scripts/main.js'></script>
<link href='styles/jquery.ui.smooth.theme.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src="plugins/clock/clock.js"></script>
<link rel="icon" href="images/favicon.ico">
</head>
<div class='container' id='main'>
...
</div>
</body>
</html>
Right now, all the code does is loop the GIF - but does not load main.php :(
Thank you!
Is there any error on the Chrome/Firebug console?
I don't understand why you generate the loader JS code in the PHP function (you could put it directly in HTML), but by doing so you are putting a multiline block between the quotes on document.write function, which causes an error.
However, I think the issue is that the browser is interpreting the inserted </script> as the end of the HTML tag, so what's after (the end of the document.write call and the delayer function) are treated as HTML and not as Javascript.
EDIT: Complementing the answer, here's the code I'd use to load another page:
function delayer(){
$("#mwrapper").load("main.php", function(){
$('.mainload').remove();
});
}
Didn't need any PHP generation. Also, the second argument to the load function is a callback called when the load is finish, in this case I used to remove the loading GIF.
i am preparing a jquerymobile app, in which i want to insert a jqplotchart, so that i wrote code for that. but now problem is chart is not being displayed in my page.
libraries i
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
javascript i written:
$(document).bind("mobileinit",function() {
// go to server for chart data
$('#pagePlotChart').live('pageshow',function() {
$.get("mygraphdata", function(data){
$.jqplot('plotChart', data,{
title:'My Chart',
axesDefaults:
{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes:
{ xaxis: { label:"Day", pad: 0 },
yaxis: { label: "Measurement" }
}
});
});
return false;
});
});
html code:
<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
<header data-role="header" data-position="fixed">
<h1>Plot Chart</h1>
</header>
<section data-role="content">
<div id="plotChart" class="myChart"></div>
<button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
</section>
</div>
actually i have to take json data from some php file and pass to this chart. and chart shuld display the graph by using that json data from some php file.
my json data will be in this formate ["v1:myName","g:233","h:322"]..etc.
php file is sending json data. i checked in fidler. but chart is not working.
please tell me solution for this.
First of all I notice you are loading jQuery mobile twice in your page header. Try removing the older version, and moving most or all of your JS includes to the page footer, that way your page can (partially) render before the JS files are downloaded by the browser. Best practice for the jqplot components is certainly to move includes to the footer.
The actual order of loading the jqplot components is almost right. It looks like the main jQuery file needs to be loaded before the main jqplot file, though - right now only the mobile version of jQuery is loading before jqplot. Please see this answer for more detail.
If jqplot is loading but the data is not present, or possibly the data or chart code has a bug, you will see a blank space in the page where the chart should be. Make sure that you can load a static chart page hand-assembled with the data you are getting from your PHP page. This will test the data and the includes.
If jqplot is not loading at all (for example if dependencies are not loaded in correct order) you will not see any empty space for the chart at all on your page and it will be rendered with zero space where the chart should be.
It looks like you are calling the chart div correctly. However I am not sure if $(document).bind("mobileinit",function() is working. The base call for jqplot is normally
$(document).ready(function(). Setting up charts in divs that aren't initially visible when the page is rendered can be tricky. This question might help if that's what the problem is.
See this related question about jQuery Mobile rendering content after page is initialized. Basically you can use .trigger('create') per naugtur's comment.
There is an easier way (worked in my case):
-first: delare your plot container div outside of any page (for example just below body tag):
<body>
<div id="plotContainer"></div>
...
-then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
-finaly: just copy the div with the plot inside your page:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
Hope this helps!!!