We Keep Coding

JavaScript: Simple SoundCloud API example for Streaming won't work properly with Safari

I'm quite frustrated with a simple soundcloud api streaming example I'm working on for couple of days know. It basically just chooses randomly a SC-url and prints out a volume information. I'm using the audiostreamsource.js library by Gregg Tavares for creating the audiocontext and the p5.js for creating a paragraph.
That's it...
It works perfectly fine on Fireforx/Chrome. But for some reason it only works in Safari when I refresh the page. Sometime it even crashes with Safari. :( I think I'm just not experienced enough to get behind that problem. I really tried to solve it from every possible angle. Now I'm stuck.... :(
You can see my little example here: http://christianlosert.com/test/01/
EDIT: To see the problem you have to past the link above into a new browser tab. Then you'll see that after a couple of milliseconds the streaming aborts in Safari.
Can anybody see my mistake?
PS: With the help of Gregg Tavares I tried to create an streaming example without the audiostreamsource.js/p5.js library to make sure the bug is on my side of the code. Curiously this example works ONLY with Safari (not Firefox/Chrome): http://christianlosert.com/test/greg/
I really have absolutely no clue what's going on here

The soundcloud 3.0 library does not work with Safari. See
soundcloud's 2.0 sdk works but 3.0 does not as of Oct 29th, 2015
You can either
use the soundcloud 2.0 library (problem: it initializes flash even if it doesn't use it)
Just make the soundcloud API request on your own using some XHR code
Basically you make an XHR request to
https://api.soundcloud.com/resolve?url=<musicUrl>&client_id=<yourclientid>&format=json&_status_code[302]=200
note: you need to call encodeURIComponent on <musicUrl> and possibly on _staus_code[302]
If the result has a status of 302 then follow the location
var result = JSON.parse(resultString);
if (result.status.substr(0, 3) === "302" && result.location) {
do XHR on result.location
else
use result as normal

Html5 audio tag not working in Local IIS for Google translate_tts

Trying to use google's translate_tts as my fallback if the browser doesn't support speechSynthesis for my project.
Now I am having some trouble with getting the html5 audio working properly.
Been scratching my head and googling all day on why it wasn't working for me.
Then I came across some articles/forums saying that it's something to do with IIS. So I did a test code outside my site to see what happens, and was surprised this worked properly! But when using the same code in my original project which is running in IIS it doesn't work. AND it works when using IIS EXPRESS. I check the MIME types in IIS and mpeg and mp3 are there.
Even doing it in javascript doesn't work in IIS.
TextToSpeech.Audio = document.createElement("AUDIO");
TextToSpeech.Audio.src = url;
TextToSpeech.Audio.playbackRate = 1;
TextToSpeech.Audio.preload = 'auto';
TextToSpeech.Audio.volume = 1; // 0 to 1;
TextToSpeech.Audio.addEventListener('ended', function () {
//i have some code here...
});
TextToSpeech.Audio.addEventListener('error', function (error) { });
TextToSpeech.Audio.play();
Has anyone encountered this issue and happened to resolve it? Your help will be much appreciated, Thanks!
UPDATE: After some more googling, this might be because I am calling it from within my site hosted in IIS which has a proper hostname and my IIS Express runs the site in localhost:PORT which Google sees as noreferrer?

starting some time in the last few days, google seems to have placed a 'captcha' on this service and made it so that it can no longer be called by a server. so this may all be moot.
it used to be you could ONLY call it as a noreferrer, so i don't think noreferrer is your issue (or may be the least of your issues starting a few days back). one way to workaround the issue in fact was to add ref='noreferrer' to your link.
and this may be your initial issue: using wget, you had to use the -U Mozilla option which makes wget appear to be a browser. if you called the url without that, it didn't return anything. so if there is a way to make your IIS look like a browser when calling the google url, that may work.
this link google text-to-speech artile still does work in a browser, maybe that will help you use it the way you want.
however... starting july 28th, i get a '503 service not available' after using it for years with wget on my linux server. could be because it's metered and i've overrused it... i hope it comes back on. i only use it about 100x/day.
they always said it was 'not public' but it is widely used that way...
so that could be related if you're still trying to call it from IIS which i would think behaves similarly to calling it from a linux server.

chrome.bluetooth.write error? IOReturn code: 3758097088

I'm working on a simple chrome web store app that uses a new API called chrome.bluetooth. The API is rather new and only available to the google chrome dev channel.
I have managed to discover all devices, search through their services and if they have the service I need to connect, it establishes a connection.
My chrome.bluetooth.onConnection function works fine, it returns a socket which I am attempting to write to:
chrome.bluetooth.onConnection.addListener(function(socket){
log("Connected", arguments);
if (socket) {
sockets.push(socket);
var data = str2ab("hello"); //My string to array buffer converter
chrome.bluetooth.write({ //Try to write to socket
socket:socket,
data:data
},function(){
log("Wrote to socket",socket,data,arguments)
})
}
});
After I attempt to write, chrome.runtime.lastError message is:
"Failed to send data. IOReturn code: 3758097088"
Im not quite sure what I am doing wrong, mainly because I don't understand the error. What does "IOReturn code: 3758097088" mean? I was wondering if anybody knows what I am doing wrong and what this error means?
Cheers,

There have been recent improvements to the API, including a big update to the OS X support; the code would be replaced by chrome.bluetoothSocket.send now. Give that a try.

In the event you have not tracked this down yet, if your running on OSX (at least) that maps to "kIOReturnNoDevice" as defined in IOReturn.h:
http://www.opensource.apple.com/source/xnu/xnu-1504.7.4/iokit/IOKit/IOReturn.h
After tracking the error back through the chrome source code, I determined that this is the error returned by "IOBluetoothRFCOMMChannel writeAsync" in chrome "bluetooth_socket_mac.mm" method "BluetoothSocketMac::Send"
This error is made more obtuse because IOReturn.h refers to 0x2c0 for "kIOReturnNoDevice", but when the constants are defined 0xe0000000 seems to be added to each of them (presumably this is an offset so they don't collide with other constants), thus the decmal value is 3758097088 rather then 704.
I can't tell you exactly what OSX is trying to tell you with that error code, but hopefully that provides you with the context you need to find your issue.

Cordova/Phonegap 1.6 media Example

i dont want to mention that Phonegap has gone sloppy recently...
but I'm trying to use the Media example taken AS IS from their website
using Xcode 4.3..
beside replacing phonegap.js with cordove.js, duh, i got a lot of errors:
ERROR: Method 'create:withDict:' not defined in Plugin 'Media'
FAILED pluginJSON = {"className":"Media","methodName":"create","arguments":["Media1","9476cdcf-7f6c-5e05-a022-fa488e8bed40","http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3"]}
Will use resource 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3' from the Internet.
ERROR whitelist rejection: url='http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3'
ERROR whitelist rejection: url='http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3'
ERROR whitelist rejection: url='http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3'
Unable to download audio from: http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3
Failed to initialize AVAudioPlayer: (null)
i just used their example as is, and i'd expect it works...
what should i change? is that a xcode issue maybe??

"whitelist rejection"
Basically, you need to add any external URLs you want to access to the "whitelist" (i.e.: the ExternalHosts key in the Cordova.plist file).
See this answer:
https://stackoverflow.com/a/8045541/878602
...or the PhoneGap Wiki FAQ for iOS:
http://wiki.phonegap.com/w/page/41631150/PhoneGap%20for%20iOS%20FAQ

it looks to me that you can't download the mp3. Can you enter that url in the iphone's safari and download the mp3?
Do you have your own webserver to try maybe? You could see the logs and see if it gets there at all.
BTW I just used the same example yesterday in Android and it works for me.

If you may updating the cordova. They have changed many function names.
For example if you are using the startAudioRecord function in previous versions. Currently they have changed it as startRecord.
Likewise they have changed many internal function names.
Just open your cordova.js. check appropriate function and function name exists.

Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

I get the following error in Chrome's developer tools window when I try to set a cookie using this jQuery plugin:
Uncaught Error: SECURITY_ERR: DOM Exception 18
What does this error mean and how can I fix it? I get the same error when I use this jQuery plugin.

You're most likely using this on a local file over the file:// URI scheme, which cannot have cookies set. Put it on a local server so you can use http://localhost.

I also had this issue while developping on HTML5 in local.
I had issues with images and getImageData function.
Finally, I discovered one can launch chrome with the --allow-file-access-from-file command switch, that get rid of this protection security.
The only thing is that it makes your browser less safe, and you can't have one chrome instance with the flag on and another without the flag.

You can also "fix" this by replacing the image with its inline Base64 representation:
img.src= "data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
Useful, when you do not intend to publish the page on the web, but instead use it on local machines only.

Faced with the same situation playing with Javascript webworkers. Unfortunately Chrome doesn't allow to access javascript workers stored in a local file.
One kind of workaround below using a local storage is to running Chrome with --allow-file-access-from-files (with s at the end), but only one instance of Chrome is allowed, which is not too convenient for me. For this reason i'm using Chrome Canary, with file access allowed.
BTW in Firefox there is no such an issue.

This error pops up, if you try to create a web worker with data URI scheme.
var w = new Worker('data:text/javascript;charset=utf-8,onmessage%20%3D%20function()%20%7B%20postMessage(%22pong%22)%3B%20%7D'); w.postMessage('ping');
It's not allowed according to the standard: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html#dom-worker

I had this issue when using the history API.
window.history.pushState(null, null, URL);
Even with a local server (localhost), you want to add 'http://' to your URL so that you have something similar to:
http://localhost...

I wasn't completely happy by the --allow-file-access-from-files solution, because I'm using Chrome as my primary browser, and wasn't really happy with this breach I was opening.
Now I'm using Canary ( the chrome beta version ) for my development with the flag on.
And the mere Chrome version for my real blogging : the two browser don't share the flag !

One can also receive this error if using the new (so far webkit only) notification feature before getting permission.
First run:
<!-- Get permission -->
<button onclick="webkitNotifications.requestPermission();">Enable Notifications</button>
Later run:
// Display Notification:
window.webkitNotifications.createNotification('image', 'Title', 'Body').show();
The request permission functions needs to be triggered from an event caused by the user, otherwise it won't be displayed.

I was been getting that error in mobile safari when using ASP.NET MVC to return a FileResult with the overload that returns a file with a different file name than the original. So,
return File(returnFilePath, contentType, fileName);
would give the error in mobile safari, where as
return File(returnFilePath, contentType);
would not.
I don't even remember why I thought what I was doing was a good idea. Trying to be clever I guess.