Here is my play function: As you can see I setVolume() in multiple locations to 0. This has absolutely no effect. I've tried to also set to 0.8, 0.2, doesn't matter it wont work. I've also tried non string value, which doesn't really matter as the value is converted to a float val inside of the Obj-C module. I also NSLogged to ensure the value was being passed correctly and it is.
Testing with iPad iOS 9.2 | Cordova 6.2 | Cordova Media Plugin 2.3.1.
play: function(src, seekTime)
{
App.Log.info('Playing audio source', src);
seekTime = seekTime ? seekTime : 0;
var obj = {
source: src,
startTime: new Date().getTime(),
seekTime: seekTime,
duration: 0,
preloadedNext: false,
audioSource: false
};
obj.audioSource = new Media(src, function(event){
$this.player().onAudioEnd(event, obj);
}, function(){
//on error
}, function(status)
{
obj.audioSource.setVolume("0.0");
if(status == 2){
obj.audioSource.setVolume("0.0");
obj.audioSource.seekTo(obj.seekTime * 1000);
obj.timer = setInterval(function(){
obj.seekTime++;
obj.duration = obj.audioSource._duration;
if(obj.duration < 0){
return;
}
if(obj.seekTime >= (obj.duration - $this.default.fadeTime))
{
if(obj.preloadedNext){
return;
}
obj.preloadedNext = true;
$this.player().preloadNext(obj);
}
}, 1000);
}
});
obj.audioSource.setVolume("0.0");
obj.audioSource.play();
obj.audioSource.setVolume("0.0");
obj.audioSource.seekTo(obj.seekTime * 1000);
console.log('Audio Source', JSON.stringify(obj));
$this.playing.push(obj);
}
Any help or direction would be awesome.
The following sample code works fine and it is tested in Android & iOS devices:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
</head>
<body>
<button id="playMp3">Play MP3</button><br><br>
<button id="playMp3Mild">Play MP3 Mild</button><br><br>
<button id="playRemoteFile">Play Remote File</button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js:
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
document.querySelector("#playMp3").addEventListener("touchend", playMP3, false);
document.querySelector("#playMp3Mild").addEventListener("touchend", playMp3Mild, false);
document.querySelector("#playRemoteFile").addEventListener("touchend", playRemoteFile, false);
};
function playMP3() {
var mp3URL = getMediaURL("sounds/button-1.mp3");
var media = new Media(mp3URL, null, mediaError);
media.setVolume(1.0);
media.play();
}
function playMp3Mild() {
var mp3URL = getMediaURL("sounds/button-1.mp3");
var media = new Media(mp3URL, null, mediaError);
media.setVolume(0.1);
media.play();
}
function playRemoteFile() {
var media = new Media("http://SERVER_IP:PORT/media/test.mp3");
media.setVolume(0.1);
media.play();
}
function getMediaURL(s) {
if(device.platform.toLowerCase() === "android") return "/android_asset/www/" + s;
return s;
}
function mediaError(e) {
alert('Media Error');
alert(JSON.stringify(e));
}
The sample app can be downloaded from the github page. Ensure to add media and device plugin to test the same. More info can be found on the README file of the sample app. Hope it helps.
I'm not sure this will solve your issue, but maybe the volume is not set to zero because the setVolume is called too "early". Could you please try this code and report eventually some logs in order to refine my solution?
play: function(src, seekTime)
{
App.Log.info('Playing audio source', src);
seekTime = seekTime ? seekTime : 0;
var obj = {
source: src,
startTime: new Date().getTime(),
seekTime: seekTime,
duration: 0,
preloadedNext: false,
audioSource: false
};
obj.audioSource = new Media(src, function(event){
$this.player().onAudioEnd(event, obj);
}, function(){
//on error
}, function(status)
{
obj.audioSource.setVolume("0.0");
if(status == 2){
obj.audioSource.setVolume("0.0");
obj.audioSource.seekTo(obj.seekTime * 1000);
obj.timer = setInterval(function(){
obj.seekTime++;
obj.duration = obj.audioSource._duration;
if(obj.duration < 0){
return;
}
if(obj.seekTime >= (obj.duration - $this.default.fadeTime))
{
if(obj.preloadedNext){
return;
}
obj.preloadedNext = true;
$this.player().preloadNext(obj);
}
}, 1000);
}
});
//obj.audioSource.setVolume("0.0");
obj.audioSource.play();
setTimeout(function() { //try to set volume to 0 after 10 milliseconds
obj.audioSource.setVolume("0.0");
}, 10);
setTimeout(function() { //try to seekTo after 1 second
obj.audioSource.seekTo(obj.seekTime * 1000);
}, 1000);
console.log('Audio Source', JSON.stringify(obj));
$this.playing.push(obj);
}
Can you set a mute delay of one second to see if it creates at least a correct delayed behaviour? (process of elimination)
setTimeout(function() {
obj.audioSource.setVolume("0.0");
}, 1000);
Related
I'm using the GAPI v4 endpoint to access google sheets, I've used the example from the Google quickstart and get a 404 error of Requested entity was not found. Why would this be happening, it shouldn't be happening since I've used their example, my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Application Conversion Viewer</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<pre id="content" style="white-space: pre-wrap;"></pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
new Vue({
el: '#app',
mounted () {
var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
apiKey: 'MY-KEY',
clientId: 'MY-CLIENT-ID',
discoveryDocs: 'https://sheets.googleapis.com/$discovery/rest?version=v4',
scope: 'https://www.googleapis.com/auth/spreadsheets.readonly'
}).then(function () {
console.log('SUCCESS')
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, function(error) {
console.log(error)
appendPre(JSON.stringify(error, null, 2));
});
}
/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listMajors();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* #param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
/**
* Print the names and majors of students in a sample spreadsheet:
* https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
*/
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
range: 'Class Data!A2:E',
}).then(function(response) {
var range = response.result;
if (range.values.length > 0) {
appendPre('Name, Major:');
for (i = 0; i < range.values.length; i++) {
var row = range.values[i];
// Print columns A and E, which correspond to indices 0 and 4.
appendPre(row[0] + ', ' + row[4]);
}
} else {
appendPre('No data found.');
}
}, function(response) {
appendPre('Error: ' + response.result.error.message);
});
}
console.log('LOAD')
handleClientLoad()
}
})
</script>
</body>
</html>
I've tried several approaches to get this to work, neither of which work. The quickstart seems to be wrong: https://developers.google.com/sheets/api/quickstart/js
I have used zipUtil plugin to extract the zip folder and Below is the image showing how i used ZipUtil plugin in my application. I am using phone gap 2.9.0 and Xcode 5.1, I am very new in phone gap development and I want to unzip/extract the downloaded zip file from the server.
I am able to download the zip file from server and I am getting path of that file as well, But I am not able to extract that zip file.
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "user-scalable=no,width=device-width" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test Page</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="ZipUtil.js"></script>
<style type="text/css">
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>
<script type="text/javascript" charset="utf-8">
var localPath;
function init() {
document.addEventListener("deviceready", ready, true);
}
function ready() {
console.log("App is ready.");
}
function download() {
// var remoteFile = "https://dl.dropbox.com/u/6731723/a.zip";
var remoteFile = "https://github.com/shazron/ZipUtil/archive/master.zip";
var localFileName = remoteFile.substring(remoteFile.lastIndexOf('/') + 1);
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
fileSystem.root.getFile(localFileName, { create: true, exclusive: false }, function (fileEntry) {
localPath = fileEntry.fullPath;
console.log("localPath1:" + localPath);
if (device.platform === "Android" && localPath.indexOf("file://") === 0) {
localPath = localPath.substring(7);
}
console.log("localPath2 save:" + localPath);
var ft = new FileTransfer();
ft.download(remoteFile,
localPath, function (entry) {
console.log("file path:" + entry.fullPath);
var linkopen = document.getElementById("openlink");
linkopen.style.display = "block";
linkopen.href = entry.fullPath;
// var dwnldImg = document.getElementById("dwnldImg");
//dwnldImg.src = entry.fullPath;
//dwnldImg.style.visibility = "visible";
//dwnldImg.style.display = "block";
}, fail);
}, fail);
}, fail);
}
function fail(error) {
console.log("error:" + error.code);
}
function unzip(){
//alert("hi");
// this is both a zip progress and and result handler
var win = function(json) {
if (json.zipProgress) {
// {"zipProgress":{"entryNumber":1,"source":"/path/to/test.zip","filename":"myfolder/myfile.png","entryTotal":10,"zip":false}}
console.log((json.zipProgress.zip? "zip" : "unzip") + " entry " + json.zipProgress.entryNumber + "/" + json.zipProgress.entryTotal + " ("+ ((json.zipProgress.entryNumber/json.zipProgress.entryTotal)*100).toFixed(2) + "%)" );
} else if (json.zipResult) {
// zip ok, and done
// {"zipResult":{"zip":false,"source":"/path/to/test.zip","target":"/path/to/targetfolder/"}}
console.log((json.zipResult.zip? "zip" : "unzip") + " OK: " + JSON.stringify(json));
}
}
// handles failure
var fail = function(obj) {
if (obj && obj.zipResult) {
// zip failed, and done
// {"zipResult":{"zip":false,"source":"/path/to/test.zip","target":"/path/to/targetfolder/"}}
console.log((obj.zipResult.zip? "zip" : "unzip") + " FAIL: " + JSON.stringify(obj));
} else {
// general failure message
console.log("FAIL: " + obj);
}
}
var zu = cordova.require("cordova/plugin/ziputil");
zu.unzip(win, fail, localPath, localPath+'/unzip/');
}
</script>
</head>
<body onload="init();">
Download file
<br />
<br />
<br />
open
</body>
</html>
In the above code I used ZipUtil plugin but its showing error,
2013-12-05 15:10:38.739 TestUnzip[6934:a0b] CDVPlugin class ZipUtil (pluginName: ZipUtil) does not exist.
2013-12-05 15:10:38.740 TestUnzip[6934:a0b] ERROR: Plugin 'ZipUtil' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.
I am experimenting with Raymond Camden's watermark code and also example from Phonegap camera API.
Camera works well.
However,
Uncaught ReferenceError: canvas is not defined
is shown in LogCat.
I have tried to place the variables in function as well as global. But the error still appears. My code is as below:
<!DOCTYPE html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
<script type="text/javascript" charset="utf-8">
var watermark;
var canvasDOM;
var canvas;
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
} </script>
<script type="text/javascript" charset="utf-8">
canvasDOM = $("myCanvas")[0];
canvas = canvasDOM.getContext("2d");
watermark = new Image();
watermark.src = "q1.jpg";
function cybershot() {
navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
}
function camError(e) {
console.log("Camera Error");
console.log(JSON.stringify(e));
}
function camSuccess(picuri) {
console.log("Camera Success");
var img = new Image();
img.src=picuri;
img.onload = function(e) {
canvas.drawImage(img, 0, 0);
canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
}
}
</script>
<style>
#myCanvas {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1>Watermark Camera</h1>
<button onclick="cybershot();">Capture Photo</button> <br>
<p/>
<canvas id="myCanvas"></canvas>
</body>
</html>
Solution
There's an error in this code.
Javascript used must be placed inside a onDeviceReady() function. It is an equivalent of classic jQuery document ready.
In this case javascript is executed inside a HEAD before BODY content is loaded into the DOM. onDeviceReady() will delay its execution until everything is loaded into the DOM.
Fixed code
Your javascript should look like this:
var canvas;
var watermark;
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady() {
canvasDOM = $("myCanvas")[0];
canvas = canvasDOM.getContext("2d");
watermark = new Image();
watermark.src = "q1.jpg";
}
function cybershot() {
navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
}
function camError(e) {
console.log("Camera Error");
console.log(JSON.stringify(e));
}
function camSuccess(picuri) {
console.log("Camera Success");
var img = new Image();
img.src=picuri;
img.onload = function(e) {
canvas.drawImage(img, 0, 0);
canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
}
}
Try moving this part (the entire content of the script block) canvasDOM = $("myCanvas")[0]; into $(document).ready(function(){ });
I've implemented the audio record plugin on IOS using phonegap/cordova 1.7. IOS5.1
I'm using it over the standard media.startrecord() function as I want to change the bitrate to reduce the size of the file.
It works fine in the simulator.
On the real iphone it records successfully once but subsequently refuses.. it seems to work but on playback I'm getting an error 4 MediaError.MEDIA_ERR_NONE_SUPPORTED
I've created a new project with just a bare bones record and playback and I'm still getting the same issue.
Here's the test code - It's very basic - just a couple of links to record two separate files and play them back. The setTimeout is there to record just a couple of seconds of audio each time.
I've googled til I've worn out my fingerprints but haven't found a resolution.
Any insight you can give would be very gratefully received.
I'm wondering if I'm failing to close out the recording/playback properly? Or are files referenced differently on the sim v the iPhone?
Many thanks!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript">
var fs,mediaRec=null, recInterval,recordSettings = {"FormatID": "kAudioFormatULaw","SampleRate": 16000.0,"NumberOfChannels": 1,"LinearPCMBitDepth": 16};
function recfile1() {recordAudio("test.wav");}
function recfile2() {recordAudio("test2.wav");}
function success(){console.log("ok");}
function recordAudio(fname) {
fs.root.getFile(fname, {create: true, exclusive: false}, function(entry){
mediaRec = new Media(entry.fullPath, success, function(){alert("failed");});
mediaRec.startRecordWithSettings(recordSettings);
recInterval = setTimeout(function() {
mediaRec.stopRecordWithSettings();
}, 2000);
}, function(){console.log("error");});
}
function playfile(fname) {
var my_media;
fs.root.getFile(fname, {create: false, exclusive: false},
function success(entry) {
my_media = new Media(entry.fullPath,function(){console.log("ok");},function(err){alert(err.code+" "+err.message);});
my_media.play();
},
function() {
console.log("not found file");
}
);
}
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){fs=fileSystem;}, function(){console.log("failed");});
Media.prototype.startRecordWithSettings = function(options) {
Cordova.exec(null, null, "AudioRecord","startAudioRecord", [this.id, this.src, options]);
};
Media.prototype.stopRecordWithSettings = function() {
Cordova.exec(null, null, "AudioRecord","stopAudioRecord", [this.id, this.src]);
};
}
</script>
</head>
<body onload="onBodyLoad()">
<a onclick="playfile('test.wav');">play</a>
<a style='margin-top:100px;' onclick="recfile1();">record 1</a>
<a style='margin-top:100px;' onclick="recfile2();">record 2</a>
<a onclick="playfile('test2.wav');">play2</a>
</body>
</html>
I have implemented the Jquery.mobile.scrollview.js and i am able to scroll the dropdown,But what happens is when i click to scroll the checkboxes inside the dropdown the checkboxes gets invisible and only the text is shown.. IS there is any workaround is there... Please let me know..
IS there any example on this..... I am adding my code below .. and giving data-scroll = 'y' in my div part ...
<!-- Scroll View code -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#evtCatcher
{
}
#evtCatcher .ui-scrollview-view
{
padding: 10px;
}
</style>
<script src="jsScroll/jquery.js" type="text/javascript"></script>
<script src="jsScroll/jsdefault.js" type="text/javascript"></script>
<script src="jsScroll/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jsScroll/jquery.mobile.scrollview.js" type="text/javascript"></script>
<script src="jsScroll/iscroll.js" type="text/javascript""></script>
<script type="text/javascript">
function fnClick() {
alert('clicked');
}
</script>
<script>
$("[ data-role=page]").live("pageshow", function(event) {
var $page = $(this);
$page.find("[data-scroll]:not(.ui-scrollview-clip)").each(function() {
var $this = $(this);
// XXX: Remove this check for ui-scrolllistview once we've
// integrated list divider support into the main scrollview class.
if ($this.hasClass("ui-scrolllistview"))
$this.scrolllistview();
else {
var st = $this.data("scroll") + "";
var paging = st && st.search(/^[xy]p$/) != -1;
var dir = st && st.search(/^[xy]/) != -1 ? st.charAt(0) : null;
var opts = {};
if (dir)
opts.direction = dir;
if (paging)
opts.pagingEnabled = true;
$this.scrollview(opts);
}
});
changeDelayFormElementClick();
});
function changeScrollMethod() {
var val = $("#s_method").val();
var $sv = $("#evtCatcher").scrollview("scrollTo", 0, 0);
if (val === "scroll") {
$sv.css("overflow", "scroll");
}
else {
$sv.css("overflow", "hidden");
}
$sv.data("scrollview").options.scrollMethod = val;
}
function changeDelayFormElementClick() {
$("#evtCatcher").data("scrollview").options.delayedClickEnabled = ($("#s_delay").val() === "yes");
}
var cb_hd_pd,
cb_hd_sp,
cb_hm_pd,
cb_hm_sp,
cb_hu_pd,
cb_hu_sp;
var hd = $.mobile.scrollview.prototype._handleDragStart;
var hm = $.mobile.scrollview.prototype._handleDragMove;
var hu = $.mobile.scrollview.prototype._handleDragStop;
function getDummyEvent(o) {
return { target: o.target, _pd: false, _sp: false, preventDefault: function() { this._pd = true; }, stopPropagation: function() { this._sp = true; } };
}
function updateEvent(e, cb_pd, cb_sp) {
if (cb_pd.checked)
e.preventDefault();
if (cb_sp.checked)
e.stopPropagation();
}
$.mobile.scrollview.prototype._handleDragStart = function(e, x, y) {
hd.call(this, getDummyEvent(e), x, y);
updateEvent(e, cb_hd_pd, cb_hd_sp);
};
$.mobile.scrollview.prototype._handleDragMove = function(e, x, y) {
hm.call(this, getDummyEvent(e), x, y);
updateEvent(e, cb_hm_pd, cb_hm_sp);
};
$.mobile.scrollview.prototype._handleDragStop = function(e) {
hu.call(this, getDummyEvent(e));
updateEvent(e, cb_hu_pd, cb_hu_sp);
};
$(function() {
cb_hd_pd = $("#cb_hd_pd")[0];
cb_hd_sp = $("#cb_hd_sp")[0];
cb_hm_pd = $("#cb_hm_pd")[0];
cb_hm_sp = $("#cb_hm_sp")[0];
cb_hu_pd = $("#cb_hu_pd")[0];
cb_hu_sp = $("#cb_hu_sp")[0];
});
</script>
Thanks in Advance :)