My objective is to process talk-radio audio streams with compression and eq, from the <audio> element.
In FF 32.0.03 the stream downloads, but no sound.
There's no error shown in firebug.
I tried this code from both file:/// and localhost (wamp).
I commented-out the web-audio <script>, the streams played as expected in FF both from file:/// and from localhost.
I removed the comments, returned it to original code.
Next, I ran this in Google Chrome 38.0.2125.101 m (same code, same url src), it ran as expected, worked fine, compressor was effective.
As before, I ran the script from both file:/// and localhost on Chrome, both worked without a hitch.
I suspect one of three things:
This may be collateral damage from a security (SOP perhaps?) decision.
It's a Mozilla web-audio bug.
It may require user interaction (but clicking the play-arrow should satisfy that).
I tried the moz-ask a question help area, but haven't heard anything.
I got on Mozilla dev-webdev list thinking I could get answers, but didn't get much back.
I'm hoping someone on SOF who's more knowledgeable about cross-browser web-audio might shed some light on this, it'd be a pity if FF was restricted from processing streamed audio because of a security decision, I'm hoping this is a bug.
Mozilla's original code example:
http://mdn.github.io/compressor-example/
I changed the <audio> src from the example's mp3 files to a stream.
This is the script I ran in the above tests:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Compressor example</title>
</head>
<body>
<h1>Compressor example</h1>
<audio controls>
<!-- the following line is my only change -->
<source src="http://74.202.111.236:2512/;" type="audio/mp3">
</audio>
<button data-active="false">Add compression</button>
</body>
<script>
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
var button = document.querySelector('button');
// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaElementSource(myAudio);
// Create a compressor node
var compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.value = -50;
compressor.knee.value = 40;
compressor.ratio.value = 12;
compressor.reduction.value = -20;
compressor.attack.value = 0;
compressor.release.value = 0.25;
// connect the AudioBufferSourceNode to the destination
source.connect(audioCtx.destination);
button.onclick = function() {
var active = button.getAttribute('data-active');
if(active == 'false') {
button.setAttribute('data-active', 'true');
button.innerHTML = 'Remove compression';
source.disconnect(audioCtx.destination);
source.connect(compressor);
compressor.connect(audioCtx.destination);
} else if(active == 'true') {
button.setAttribute('data-active', 'false');
button.innerHTML = 'Add compression';
source.disconnect(compressor);
compressor.disconnect(audioCtx.destination);
source.connect(audioCtx.destination);
}
}
</script>
</html>
I'm posting this simply for closure. It's not the answer I was looking for, but it is the answer that Mozilla has provided.
As I commented above, bugzilla.mozilla.org/show_bug.cgi?id=996685 has listed three other bug reports, including mine, as having fallen victim to Same Origin Policy.
There is an 04/15/2014 patch to the Mozilla code-base that illustrates the changes, available as an attachment to 996685.
Thanks to all who've taken a look.
Related
I've upgraded to Products.TinyMCE 1.3.25 on my Plone 4.3.10rc1 installation. When I add an embeded video in edition mode, I can't resize the frame. It occurs only with Youtube videos, but it works fine with Vimeo, por instance.
I have tried an answer in https://github.com/tinymce/tinymce/issues/3614?_pjax=%23js-repo-pjax-container, but without answer yet.
Any issues about that? Thanks in advance...
You cannot resize the video because it's dimensions are being explicitly set by the media plugin.
I am on TinyMCE version 3.5.12 (2016-10-31). I tried to debug the JavaScript. And in the media plugin, there is part of code, which compares URL with some pattern, and if the URL is YouTube, than it sets the size to exactly 425x350.
The part of code is this:
// YouTube Embed
if (src.match(/youtube\.com\/embed\/\w+/)) {
data.width = 425;
data.height = 350;
data.params.frameborder = '0';
data.type = 'iframe';
setVal('src', src);
setVal('media_type', data.type);
}
...
setVal('width', data.width || (data.type == 'audio' ? 300 : 320));
setVal('height', data.height || (data.type == 'audio' ? 32 : 240));
I don't understand the purpose of the code yet, but clearly, it is there for purpose, not just some broken code.
Maybe it is meant as setting the dimensions for the first time, as initial size, but it sets them always.
Using TinyMCE 4 and the paste plugin with a custom image upload handler (based on documentation sample), I've got the upload working just fine. However, when the upload fails, the image is still added to the content. The sample indicates calling the failure method for errors but that doesn't remove the image.
I've tried adding a paste_postprocess callback to filter the content, but at that point there is no difference in the content between a successfully uploaded image and a failed one. They both appear in the content like:
<div style="display:none"><img src="data:image/jpeg;base64, datahere" /></div>
The end result in the content is actually different. A successful upload has an image source like:
<img src="http://website/uploads/mceclip11.jpg" />
Whereas a failed upload looks like:
<img src="blob:http://website/dd3bdcda-b7b1-40fe-9aeb-4214a86a92a9">
To try this out, I created a TinyMCE Fiddle here.
Any ideas on how to remove the failed upload image from the content before it's displayed to the user?
For anyone who might try something similar, I figured out a way to deal with this.
After calling the failure method as shown in the examples, I now call a method to remove the failed image before it shows up in the editor.
The function looks something like this:
function removeFailedUpload() {
var editor = tinymce.EditorManager.get('editorId');
var $html = $('<div />',{html:editor.getContent()});
$html.find('img[src^="data:"]').remove();
editor.setContent($html.html());
}
The simplest solution is to make use of the undo manager:
tinymce.activeEditor.undoManager.undo();
In version 5 you can pass an optional object to remove the image in case of failure.
function images_upload_handler(blobInfo, success, failure) {
failure('Fail fail fail', { remove: true });
alert('failed upload');
return;
},
see the docs.
I suggest two methods for more compact removal with keeping the cursor position.
Method 1:
var editor = tinymce.activeEditor;
editor.selection.collapse();
$(editor.dom.doc).find('img[src^="blob:"]').remove();
Method 2:
var editor = tinymce.activeEditor;
var img = $(editor.dom.doc).find('img[src^="blob:"]').get(0);
if (img)
editor.execCommand('mceRemoveNode', false, img);
It adds logs when plugins say something. It adds logs when it gets anything from the cache manifest. It logs HTTP information sometimes.
My 1 little log gets flooded by 10,000 logs I don't need or want.
Use only in development:
(function(){
var originalConsole = window.console;
window.console = {};
window.console.log = window.console.debug = window.console.error = function(){};
window.myLog = function() {
originalConsole.log.apply(originalConsole, arguments);
};
}());
This will save a local copy of the original window.console object.
It will change the original window.console object to use empty functions.
And finally it will define a global myLog function which will use the local copy of the original window.console to actually log stuff.
This way all the other code will use the useless console.log() and your code could use myLog().
on the Console tab select No info on the left Hand I have attached a screenshot here
You should update to the google chrome latest version
$.ajax({
type: 'POST',
url: "ajaxClients.php",
data: '&m=removeAlert&id='+ alertId,
success: function(resultData) {
if ($('#noteRow_'+ alertId).length)
{
alert('ROW FOUND - CONTENT IS: '+ $('#noteRow_'+ alertId).html() +' -- REPLACING CONTENT NOW');
}
$('#noteRow_'+ alertId).html('<font color="red">- Note has been removed</font>');
}
});
So it is simple enough. On the success i do get the alert, it shows the content in the alert, etc.
Then right after when i try to set the html to something else, it does nothing. I have tried .empty(), .remove()... there are no console errors. Any ideas what i am missing?
EDIT - html...
<div id="noteRow_127"><img onclick="removeAlert('127')" style="cursor:pointer;" alt="Remove Message" title="Remove Message" src="images/notificationRemove.png" border="0"> [04/04/2013 06:26 PM] <b>Austin</b>: afvazf</div>
The "removeAlert()" is what fires the ajax call...
EDIT 2...
I guess somehow this is being put on the page 2 times. Although in the PHP file there is only one instance of the function that builds the rows, so i guess i just need to figure out wth is going on there. So for anyone else with this issue, inspect the element (with chrome or similar) and ctrl+f for it and see if it is on the page more than once!
FINAL EDIT:
Since i could not figure out how it was ending up on the page twice
$('[id="noteRow_'+ alertId +'"]').html('<font color="red">- Note has been removed</font>');
Took care of it!
http://jsbin.com/ujimiw/2/edit
It seems to work fine from my perspective. I just bound the click handler to the button and it works.
I would like to add functionality to a ruleset that fires a distinct rule based on whether or not the browser is mobile or not. (one rule fires for a standard browser, a different rule fires for a mobile browser) I know that the browser detection can be done any number of ways, but my first inclination would be with javascript.
Any thoughts on how to start with this?
You can use the useragent object, like this:
rule detect_agent {
select when pageview ".*"
pre {
browser_name = useragent:browser_name();
browser_version = useragent:browser_version();
os = useragent:os();
os_type = useragent:os_type();
os_version = useragent:os_version();
full_useragent = useragent:string();
message = <<
<p><strong>Information about your browser:</strong></br />
<em>Browser name:</em> #{browser_name}</br />
<em>Browser version:</em> #{browser_version}</br />
<em>Operating system:</em> #{os}</br />
<em>OS type:</em> #{os_type}</br />
<em>OS version:</em> #{os_version}</br /></p>
<p>#{full_useragent}</p>
>>;
}
append("body", message);
}
You might have to do some parsing of your own, though, since the browser_name and os may or may not be correct. Here's what it looks like in Chrome on a Mac (you can test it using this URL in any browser):
Here's what it looks like in Safari on an iPad:
Do some research into what the UserAgent strings look like for the browsers you care about. Then you can use the useragent:string() function together with match() to determine what to do with it. (If you want an example of how to do that, let me know.)