I am new to Phonegap (Cardova),I want to play a local mp3 file,it can play a file from url,but not a local file.My file is located in Assets --> www --> audio --> Ikhlas.mp3 , I using Jquery Mobile with multiple pages. and in each page I will have to play a different audio file with Oclick Play Button. when ever i click the button to play i got the following errors :
07-19 07:43:58.829: E/MediaPlayer(1081): Attempt to call getDuration without a valid mediaplayer,
07-19 07:43:58.838: E/MediaPlayer(1081): Attempt to perform seekTo in wrong state: mPlayer=0x0, mCurrentState=0
any help will be highly appreciated. Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="css/themes/default/my_style.css">
<link rel="stylesheet" media="screen" href="http://openfontlibrary.org/face/droid-arabic-naskh" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script>
var myaudio = new Audio('/android_asset/www/audio/Ikhlas.mp3');
function playStream() {
try {
//alert ("ffff");
myaudio.id = 'playerMyAdio';
myaudio.play();
} catch (e) {
alert('no audio support!');
}
}
function stopStream() {
try {
myaudio.pause();
} catch (e) {
alert('no audio support!');
}
}
</script>
<div data-role="page" id="Ikhlas">
<div data-role="header">
back
<a href="index.html" data-icon="home" class="ui-btn-right" class="ui-icon-nodisc"
data-iconshadow="false" data-iconpos="notext">Home</a>
</div>
<!-- /header -->
<body>
<div data-role="content">
<button onClick="playStream()">play</button><br />
<button onClick="stopStream()">stop</button><br />
</div>
<!-- /content -->
<div data-role="footer">Go Back</div>
</div>
</body>
</html>
Use Media instead of Audio
and put this line of code
var myaudio = new Media('/android_asset/www/audio/Ikhlas.mp3');
inside your function playStream()
Related
I'm trying to make a song play when I click on an image. everytime I do it using the solutions on the here Either the image doesn't show, the audio doesn't play, or both. I don't understand what my issue is and could use any help.
My HTML
`
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>#F7D64B</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css"
href="https://csshake.surge.sh/csshake.min.css">
</head>
<body>
<script>
var audio = new Audio('Music/song.wav');
function myAudioFunction
<script>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<a onclick="document.getElementById("audio").play();">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
</center>
</body>
<footer>
<!-- art by #woun404-->
<!-- #F7D64B -->
</footer>
</html>`
Here's a working example:
document.getElementById('play').addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('audio').play();
});
<audio id="audio" src="http://www.soundboard.com/handler/DownLoadTrack.ashx?cliptitle=Never+Gonna+Give+You+Up-+Original&filename=mz/Mzg1ODMxNTIzMzg1ODM3_JzthsfvUY24.MP3"></audio>
<a href="#" id="play">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
Using JavaScript only would look like this:
<body>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</center>
<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
<script>
</body>
It is advised to use JavaScript for big projects since it works way faster.
I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks
I am trying to open image files using JavaScript. It works successfully on Chrome (showing no errors), but the image refuses to show on my iPhone. Is this because the image is too large (like the DATA url is too long)?
My code uses FileReader, gets the img.src, and outputs it as an img tag as shown below:
if(window.FileReader) { //do this
$('input').change(function() {
$("#result").html("SELECTING IMAGE ... ... ...");
var fr = new FileReader;
fr.onload = function() {
var img = new Image;
img.onload = function() {
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
$.ajax({url: img.src, async: true, success: function(result){
$("#result").html("<img src='ajax-loader.gif' />");
setTimeout(function(){
$("#result").html("<img src='" + img.src + "' /> <br/> <br/>" + "<a href='" + img.src + "'>View in browser</a>");
console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
}, 1000);
}});
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
} else {
alert("You don't support FileReader");
}
<html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>iViewr</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body cz-shortcut-listen="true">
<div onclick="document.getElementById('iPUT').style.opacity=0.01">
<button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
<button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
<button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
<br>
</div>
<div id="inputDIV" onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id="iPUT" accept="image/*" capture="camera" style="opacity: 0.5;"></div>
<div id="result">Please choose a file to view it.</div>
<script src="index.js"></script>
</body></html>
You can see it in action here at: http://iviewr.neocities.org/
Thanks in advance!
Use the URL.createObjectURL() on the file chosen by the input, as shown below.
Credits to #dandavis.
$('input').change(function(){
var resultPreview = document.getElementById('result');
var file = document.querySelector('input[type=file]').files[0]; //selects the very first file
var fr = new FileReader();
fr.addEventListener('load', function(){
//once the FileReader is loaded,
resultPreview.src = fr.result;
console.log("Finished reading Image");document.getElementById('iPUT').style.opacity=0.01;
document.getElementById('help').innerHTML="You can choose another image by tapping the screen again.";
}, false);
if (file){ //if there even is a first file
fr.readAsDataURL(file); //don't want to mess with Data URLs!! this calls the function above
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<title>iViewr</title>
<!-- The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site. -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div onclick="document.getElementById('iPUT').style.opacity=0.01">
<button onclick="document.getElementById('result').style.zoom=0.5;this.blur();">Zoom out</button>
<button onclick="document.getElementById('result').style.zoom=1.0;this.blur();">Zoom normal</button>
<button onclick="document.getElementById('result').style.zoom=1.5;this.blur();">Zoom in</button>
<br />
</div>
<div id='help'>Tap the middle of the screen to select an image for the computer to guess.</div>
<div id='inputDIV' onclick="document.getElementById('iPUT').style.opacity=0.5"><input type="file" id='iPUT' accept="image/*" capture="camera"></div>
<img id='result' src=''/>
<script src='index.js'></script>
</body>
</html>
I'm using this magnific pop up plug in (http://dimsemenov.com/plugins/magnific-popup/documentation.html)
This is my very basic html, I simply want the button to open a pop up window in that page.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</script>-->
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/jquery.magnific-popup.js"></script>
<title>Burn That Burger</title>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="normalize.css" media="all">
<link rel="stylesheet" href="style/unsemantic-grid-responsive.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all">
</head>
<body>
<div id="popup">
test pop up goes here
</div>
<button>create and show popup</button>
</body>
</html>
Javascript:
$(document).ready(function () {
$('button').magnificPopup({
items: {
src: '#popup',
type: 'inline'
}
});
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/vGAsL/19/
you have applied the popup id to your body, instead of a separate div.
<body>
<div id="popup">
test pop up goes here
</div>
<button> create and show popup </button>
I think you have an issue in your body tag, it should be:
<body>
<div id="popup">
test pop up goes here
</div>
im currently using PhoneGap and for some reason when i click a button, the function is undefined. iv tryed putting it inside the deviceReady function, as well as the document ready function, but neither seemed to make a difference.
I can't see what the problem is, if anyone can help that would be great.
My HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.theme-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/libary.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
<title>Libary</title>
</head>
<body>
<div id="capture" class="wrapper" data-role="page">
<div data-role="header">
<h1>Libary</h1>
</div>
<div data-role="content" class="app">
Retrieve Photo
<p id="pictureStatus"></p>
<div id="imagelocation">
<img id="capturedImage"></img>
</div>
</div>
</div>
</body>
</html>
My JavaScript/jQuery:
document.addEventListener("deviceready", onDeviceReady, false);
var platform;
function onDeviceReady() {
//Find out what platform the device is running
platform = device.platform;
//Camera Section
function retrievePicture() {
// Take a picture using device camera and retrieve image
//navigator.camera.getPicture(onCaptureSuccess, onCaptureFail, {Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY});
$('#pictureStatus').text("hello");
}
function onCaptureSuccess(imageData) {
$('#capturedImage').css("display", "block");
var imageLocation = imageData;
$('#capturedImage').attr("src", imageLocation);
$('#pictureStatus').text(imageLocation);
}
function onCaptureFail(message) {
$('#pictureStatus').text(message);
}
}
Please don't define functions inside functions like that. Remove your retrievePicture() from inside the onDeviceReady() function and it should work fine.
As mentioned by #Robin van Baalen, this may be an interesting and relevant read - What you need to know about Javascript scoping.
Also, Functions and function scope.