Web Audio API Latency in Phonegap Project - javascript

So I am using the Web Audio API for PhoneGap project. It plays multiple sounds (amount decided by the user) simultaneously. The below code works very well on android. There is minimal lag; however, on iOS there is quite a bit of lag especially once amount gets to six or so. How would I be able to minimize this? I have tried using the PhoneGap Media API, but then there was a horrible amount of lag on Android.
var myAudio = [];
for (i = 0; i < amount; i++) { //I have taken out some code to make it more simple
myAudio[i] = new Audio(rand.path + ".mp3"); //rand is initialized before
}
for (i = 0; i < amount; i++) {
myAudio[i].play();
}

Related

LocalHost not reloading and crashing on save

So I am building a huge project in React.Js and VSCode, and I have had no problems up to this point.
Recently when dealing with this json object, my program (on localhost:3000) just won't save, and then when I refresh the page, it just crashes.
I can't even close the tab when this happens. It's just frozen in refreshing. I have to Ctl + ALt+ Del to shut it down. It seems like it is happening randomly.
I am using Google Chrome.
What is going wrong? What do I do? Thank you.
for (var obj in json1) {
const json = json1[obj];
for (var i = 0; i < json.length; i++) {
const apt = json[i];
// Do some stuff with the big json object
}
}

How can I make javascript sing?

I saw that there's some singing voices in the Web Speech API using the voice "Good News" (and "Bad News"). But I'd like to know how I can make my own custom song. It seems to sing the same notes. Can I pass it what notes I'd like for each word?
edit: a comment below points out the "Good News" is a mac voice. So the below code might only work on Mac. I'm looking for a more generalized solution for both pc and mac.
if (!window.speechSynthesis) {
alert("Your browser doesn't support speechSynthesis !!");
}
var voices;
function loadVoices() {
voices = window.speechSynthesis.getVoices();
if (voices.length == 0) alert("cannot get voices !!");
console.log(voices.map(function (x) {return x.name;}));
}
var msg = new SpeechSynthesisUtterance("la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la-la");
function sing(name) {
speechSynthesis.cancel();
loadVoices();
msg.voice = voices[0];
for (var i = 0; i < voices.length; i++)
if (voices[i].name == name) msg.voice = voices[i];
speechSynthesis.speak(msg);
}
setTimeout(function() {
sing('Good News');
},1000); // let browser initialize for a sec
I noticed Web Speech api has something called pitch. But after messing with it, the word doesn't really "sing". You can see a codepen here. Also I don't think I could convert a frequency to a pitch, like for example Middle C is 261.6 Hz.
I also noticed another library called meSing.js but the voices sound too robotic:
http://usdivad.com/mesing/
I downloaded mesing.js from github, and I changed the hard coded voice that it uses to other voices that are given in the underlying voice library (meSpeak.js), and even though the voice changes, it still sounds robotic.
I like the sound quality of the first "Good News" but I'd like to know how to make a custom one, is it possible?
edit: maybe I can take 'Good News' with just one word. and then play that with different pitch settings. I'd have to see what the range of pitches are. still experimenting..

Ionic/Cordova - Is there a media/mediaPlayer plugin with working track bar functionality?

Apologies for the open ended question - currently having issues implementing a media player with a track bar that shows the current position and the track's duration. I've tried both the cordovaNativeAudio and cordovaMedia plugins; the native audio plugin is not designed for interactive playback and has no methods allowing retrieval of the duration or current position.
The media plugin, on the other hand, is designed with this in mind - however, on Ionic, as can be seen in the ngCordova docs, the getCurrentPosition() and getDuration() methods are "not working yet".
Is there an alternative? Or has anyone managed to get it to work?
Related to this (possibly) I have just now found a bug report, not sure if it is the same issue as play/pause/stop all work fine on ios and android for me - the roadblocks in my case are currentPosition and duration.
you can use the JW Player which is having very good API for media tracking. It has good support for android, ios and web application.
I tried it for web and ios application and it works perfectly.
By using below code i got total duration and current position of audio file. Go through the code:
var my_media = new Media(audioFile);
my_media.play();
var counter = 0;
var timerDur = setInterval(function() {
counter = counter + 100;
if (counter > 2000) {
clearInterval(timerDur);
}
var duration = my_media.getDuration();
console.log(duration);
if (duration > 0) {
clearInterval(timerDur);
// duration is the total duration of audio file
console.log(duration);
}
}, 100);
setInterval(function(){
my_media.getCurrentPosition(function(position){
if(position > -1){
// position is current position of audio which is playing
console.log(position);
}
}, function(error){
console.log(error);
})
}, 1000)
Note: for every second(1000ms) i am getting the current position

Video capture for Windows 8 desktop App (HTML + javascript). Not from webcam

I´m developing a Windows 8.1 App for desktop using HTML and Javascript.
I have a video grabber card and i would like to view the video being captured in real-time at my App.
Searching the internet i´ve found some examples and tutorial of capturing video for a Windows 8 App, but all of them are with the webcam, and i would like to know if that should be applicable to any "capture device" like my capture card.
I´ve followed this MSDN tutorial with no success.
http://msdn.microsoft.com/en-us/library/windows/apps/hh452791.aspx
EDIT (adding some more info):
If you follow the tutorial, the detection of capture devices whith the code bellow is ok, it properly detects my capture card.
var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
// Add the devices to deviceList
if (devices.length > 0) {
for (var i = 0; i < devices.length; i++) {
deviceList.push(devices[i]);
}
initCaptureSettings();
initMediaCapture();
document.getElementById("message").innerHTML = "Initialization complete.";
} else {
document.getElementById("error").innerHTML("No video device is found ");
}
}, errorHandler);
But then, it throws an "Access denied" exception at the "oMediaCapture.initializeAsync(captureInitSettings)" at the following section of code:
// Create and initialze the MediaCapture object.
function initMediaCapture() {
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
createProfile();
}, errorHandler);
}
I think this could be because of some kind of access permission to the capture device ¿?¿?
Any help?
Thanks in advance!!
If you only care about the video and do not want to use the audio, just make sure that the settings passed to InitializeAsync() specifies StreamingCaptureMode correctly:
mediaCapture = new MediaCapture();
MediaCaptureInitializationSettings initSettings = new MediaCaptureInitializationSettings();
initSettings.VideoDeviceId = Webcam.Id;
initSettings.StreamingCaptureMode = StreamingCaptureMode.Video; // <----
await mediaCapture.InitializeAsync(initSettings);
Kudos to Slimacik.

<video>.currentTIme doesn't want to be set

I'm trying to write a piece of Javascript that switches between two videos at timed intervals (don't ask). To make matters worse, each video has to start at specific place (about ten seconds, and again, don't ask.)
I got the basics working by just using the YUI Async library to fire to switch the videos at intervals:
YUI().use('async-queue', function (Y) {
// AsyncQueue is available and ready for use.
var cumulativeTime = 0;
var q = new Y.AsyncQueue()
for (var x = 0; x < settings.length; x++) {
cumulativeTime = cumulativeTime + (settings[x].step * 1000)
q.add( {
fn: runVideo,
args: settings[x].mainWindow,
timeout: cumulativeTime
})
}
q.run()
});
So far, so good. The problem is that I can't seem to get the video to start at ten seconds in.
I'm using this code to do it:
function runVideo(videoToPlay) {
console.log('We are going to play -> ' + videoToPlay)
var video = document.getElementById('mainWindow')
video.src = '/video?id=' + videoToPlay
video.addEventListener('loadedmetadata', function() {
this.currentTime = 10 // <-- Offending line!
this.play();
})
}
The problem is that this.currentTime refuses to hold any value I set it to. I'm running it through Chrome (the file is served from Google Storage behind a Google App Engine Instance) and when the debugger goes past the line, the value is always zero.
Is there some trick I'm missing in order to set this value?
Thanks in advance.
Try use Apache server.
setCurrentTime not working with some simple server.
ex) python built in server, php built in server
HTTP server should be Support partial content response. (HTTP Status 206)

Categories