How to properly calculate the current frame rate of the video element?
Or is there even a built-in function I can get from it?
On chrome side, I can calculate using below function
function calcFrameRate(){
window.currentFrameRate = 0;
window.currentFrameCount = 0;
setInterval(function(){
var video = document.getElementById('myvideo');
window.currentFrameRate = (video.webkitDecodedFrameCount - window.currentFrameCount) / 10.0;
window.currentFrameCount = video.webkitDecodedFrameCount;
}, 10000);
}
However webkitDecodedFrameCount does not implemented in Safari, any idea how to accomplish in Safari?
Related
I am trying to make an audioplayer using the p5.js Javascript Library and Soundcloud API. Most of it works well, but I am encountering some minor problems in the Safari Browser.
This is the website and the javascript file with all the functions is sketch.js.
There is a progressbar on the website and when clicked it should jump to a point in the song.
var progressBar = document.getElementById('progressBar');
progressBar.addEventListener("click", function(progbar) {
var percent = (progbar.offsetX / this.offsetWidth);
sound.jump(sound.duration() * percent);
sound.onended(endSong);
}, false);
In Firefox it works as expected as long sound.playMode('restart') is set. But Safari creates an InvalidStateError
When sound.playMode('sustain') is set both Firefox and Safari equally jump to a point in the song but the song is played twice.
Does anybody have a clue what might be wrong here?
I have the following workaround for Safari, Firefox and Chrome:
progressBar.addEventListener("click", function(progbar) {
percent = (progbar.offsetX / this.offsetWidth);
setTimeout(function(){
Object.assign(sound, {_playing: true});
sound.playMode('restart');
}, 100);
sound.stop();
sound.playMode('sustain');
sound.jump(sound.duration() * percent);
}, false);
I have an html audio player and I use it with createMediaElementSource() to make a visualizer. But I can't change the volume for it from Safari. When I change the volume to 0 it logs it correctly (0) in the console, but the actual volume is still at 1. It works in other browsers.
const AudioContext = window.AudioContext ||
window.webkitAudioContext
var audio = new AudioContext()
var $audioPlayer = document.querySelector('.player-element__player')
var analyser = audio.createAnalyser()
analyser.fftSize = 32
analyser.connect(audio.destination)
var source = audio.createMediaElementSource($audioPlayer)
source.connect(analyser)
$audioPlayer.volume = 0
Seems like the solution for now is to make a GainNode and control the volume from there.
I am attempting to visualize audio coming out of an element on a webpage. The source for that element is a WebRTC stream connecting to an Asterisk call via sip.js. The audio works as intended.
However, when I attempt to get the frequency data using web audio api, it returns an array of all 0's, even though the audio is working. This seems be a problem with createMediaElementSource. If I call getUserMedia and use createMediaStreamSource to connect my microphone to the input, I indeed get the frequency data returned.
This was attempted in both Chrome 40.0 and Firefox 31.4. In my search I found similar errors with Android Chrome but my versions of desktop Chrome and Firefox seem like they should be functioning correctly. So far I have a feeling that the error may be due to the audio player getting it's audio from another AudioContext in sip.js, or something having to do with CORS. All of the demos that I have tried work correctly, but only use createMediaStreamSource to get mic audio, or use createMediaElementSource to play a file (rather than streaming to an element).
My Code:
var context = new (window.AudioContext || window.webkitAudioContext)();
var analyser = context.createAnalyser();
analyser.fftSize = 64;
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var visualisation = $("#visualisation");
var barSpacingPercent = 100 / analyser.frequencyBinCount;
for (var i = 0; i < analyser.frequencyBinCount; i++) {
$("<div/>").css("left", i * barSpacingPercent + "%").appendTo(visualisation);
}
var bars = $("#visualisation > div");
function update() {
window.requestAnimationFrame(update);
analyser.getByteFrequencyData(frequencyData);
bars.each(function (index, bar) {
bar.style.height = frequencyData[index] + 'px';
console.debug(frequencyData[index]);
});
};
$("audio").bind('canplay', function() {
source = context.createMediaElementSource(this);
source.connect(analyser);
update();
});
Any help is greatly appreciated.
Chrome doesn't support WebAudio processing of RTCPeerConnection output streams (remote streams); see this question. Their bug is here.
Edit: they now support this in Chrome 50
See the test code for firefox about to land as part of this bug:
Bug 1081819. This bug will add webaudio input to RTCPeerConnections in Firefox; we've had working WebAudio processing of output MediaStreams for some time. The test code there tests both sides; note it depends a lot on the test framework, so just use it as a guide on hooking to webaudio.
I have created an app using appcelerator for Iphone , which buy click on buttons it will play a relative sound , here is the code, but the problem is when i play the audio many times and play different audios using this function the sound starts to lag and have noise inside, can anybody help me with it , Thanks.
var soundplaying = 0;
var sound;
function playaudio(url) {
if (soundplaying == 0) {
sound = Ti.Media.createSound({});
sound.setUrl('../assets/audio/' + url);
sound.addEventListener('complete', function() {
sound.release();
soundplaying = 0;
});
sound.play();
soundplaying = 1;
}
}
(i have tried to release the sound object after each time but still no use, I tried to createSound only once but seems the titanium dose not support changing url for Media.Sound) dynamically.
I could have solve this issue temporary , by changing the audio files format to .m4a (aac).
i was using mp3 earlier.
Been doing tests using modernizr and css media queries to see results on different devices. I added a test for -webkit-device-pixel-ratio:2 to detect when there's a retina display device, which will then execute a small jquery script to insert an image into the page.
However the script doesn't get executed, instead it calls the callback function of another test. Any ideas why this is? Been testing on ipad 2, iphone 4 and android emulator.
The pure css media query works like a charm, and inserts a message. The Modernizr mq test doesn't seem to work.
/*
* Retina Display Test
*/
{
test: Modernizr.mq('-webkit-device-pixel-ratio:2'),
yep: 'js/retina.js',
nope: 'js/regular.js',
},//end retina test
https://dl.dropbox.com/u/85173358/devicewidth/orientation.html
Here is what I use :
Modernizr.addTest('highres', function() {
// for opera
var ratio = '2.99/2';
// for webkit
var num = '1.499';
var mqs = [
'only screen and (-o-min-device-pixel-ratio:' + ratio + ')',
'only screen and (min--moz-device-pixel-ratio:' + num + ')',
'only screen and (-webkit-min-device-pixel-ratio:' + num + ')',
'only screen and (min-device-pixel-ratio:' + num + ')'
];
var isHighRes = false;
// loop through vendors, checking non-prefixed first
for (var i = mqs.length - 1; i >= 0; i--) {
isHighRes = Modernizr.mq( mqs[i] );
// if found one, return early
if ( isHighRes ) {
return isHighRes;
}
}
// not highres
return isHighRes;
});
Then test Modernizr.highres anywhere in your JS.
Note : this code is not from me
I'd like to hear your answer too.
For your reference, this worked in my desktop mozilla:
var pr = Modernizr.mq('only all and (max-width: 2000px) and (min--moz-device-pixel-ratio: 1)');
alert(pr); //returns true.
So, either it returns nothing, such as:
"If a browser does not support media queries at all (eg. oldIE) the mq() will always return false."
Or perhaps you're not in webkit ratio 2. Some other possibilities:
(-webkit-min-device-pixel-ratio: 1.5)
(-o-min-device-pixel-ratio: 3/2)
(min--moz-device-pixel-ratio: 1.5)
(min-device-pixel-ratio: 1.5)
I'd like to hear if any of these work for you, thanks! :)
According to w3.org documentation, to the above list of messages you may want to add:
'only screen and (min-resolution: 192dpi)'
and
'only screen and (min-resolution: 1.5dppx)'
Also I am not sure about
min--moz-device-pixel-ratio
in the mozilla documentation it is specified as
-moz-device-pixel-ratio
by the way this works for me (tested on an iPhone 4s).