I'm writing an mp3 playlist player, and I'm almost done... but, I would like to make the page compatible with older browser (people with older browsers will see a simple list of mp3 links: they can download them, it's not a problem).
Now, I'm afraid I have some problem with javascript syntax, rather than with some specific command.
So, this is my code:
ilikemp3 = 0;
if (document.createElement('audio').canPlayType('audio/mpeg;codecs="mp3"'))
{ilikemp3 = 1};
if (ilikemp3)
{audio_playlist_html5()}
else
{simple_audio_list()};
It's working fine on modern browsers... but, if I run it in older browsers, I get an error message:
Error: document.createElement("audio").canPlayType is not a function
So, I understand that's not the proper way to query a browser.
Can somebody help me?
Thanks a lot!
You could check for the existence of canPlayType in document.createElement('audio') and decide based on that.
if('canPlayType' in document.createElement('audio')) {
//new player
}
else {
//old player
}
Related
Company recently upgraded to Flash v11.8.800.168 and a flash movie which is loaded using SWFObject (1.1) is not working correctly in Internet Explorer (Firefox works fine). The movie is loaded dynamically using a jquery document.ready method using the "new SWFObject(...); so.write("ID")" method (again SWFObject 1.1).\
The movie on load calls a JavaScript function (which is built dynamically using server scripting). The function is being called correctly as checked by a debugger. The JavaScript function calls a method in the flash movie passing it some XML (which is used to render some user and navigation items).
Something like this:
function calledFromFlash() {
document.getElementById("FlashMovie").renderUsingXml('<?xml version 1.0"?><lotsofxml></lotsofxml>');
}
Like I said, this all works still in Firefox with the new Flash version.
When I step through the function above, using step into with the IE Debugger, I get the following steps:
function anonymous() {
return eval(this.CallFunction("<invoke name=\"renderUsingXml\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 0) + "</invoke>"));
}
At this point, I checked the arguments variable and it contains the XML as one would expect. After the next step into, I get this:
try { __flash__toXML(calledFromFlash(undefined)); } catch (e) { "<undefined/>"; }
At this point the debugger is already on the catch, yet one more step into take the code into the "<undefined/>" section and I can see that e is Object Expected
What I've tried:
Static implementation without SWFObject. This works. But then Firefox doesn't process the XML properly (and it seems to be the same issue as IE)
Upgrading to SWFObject 2.2. Using dynamic implementation it fails still. Using static implementation it works in IE but not Firefox
This is NOT my flash movie, the source is... well, I don't know. The guy that wrote it has left the company. That said, this seems like such a crazy issue.
My proposed fix is simply to use SWFObject for Firefox and use a static implementation for IE, but I really want to know what is wrong.
This was caused by a bug in Flash Player 11.8.800.168. It has been fixed in 11.8.800.175.
Bug fixes:
3630443 - [External][Windows][IE] ExternalInterface.call() method with non-ASCII text as a parameter corrupts the characters on the Javascript side
Have exported my flash cs6 game using createjs using "toolkit for createjs". All sounds exported to directory successfully.
Following code calls sounds
var manifest = [
{src:"sounds/cutter.wav", id:"cutter"}
];
var loader = new createjs.PreloadJS(false);
loader.installPlugin(createjs.SoundJS);
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
function playSound(name, loop) {
createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
}
chorme and opera plays sound correctly but firefox.
Thanks in advance :)
I would recommend trying the latest code available at http://www.soundjs.com. You'll also find helpful tutorials and examples that work in firefox. It doesn't offer direct toolkit support, but it can help you understand what the exported code is doing and how to alter it.
My best guess without seeing the code in context is you are trying to call play without waiting for load to complete. This creates a race condition, where sometimes if the sound is cached it will work, and other times it will fail.
It's also possible that it has something to do with the wav encoding. With mp3s we've found you mostly need to stick to default encoding to ensure browsers can actually play the audio. You might also want to consider using mp3 and ogg files for the broadest audio support.
Hope that helps.
I know there have been tons of questions about this topic already but none of them have solved my issue, perhaps I am just missing something.
Anyways, here is the deal. I have a happy little html5 game that plays some audio and sound affects etc and it works great in every browser that supports html5. However, those that don't require a flash fallback. No big deal right? Apparently not… I've made a small swf that should accept the mp3 url from JS and then get the mp3 and play it. I have to use this way as there are a lot of audio files and I would like to try and avoid making a swf file for each one.
Here is the AS - I'm using the ExternalInterface to receive the variable from js.
import flash.external.*;
ExternalInterface.addCallback("callFlash", playSound);
function playSound(file:String):void {
var s:Sound = new Sound();
s.load(new URLRequest(file));
s.play();
}
And then my JS to pass the variable:
var flash = $('#fbplayer')[0];
console.log(flash); //returns flash object so jquery is not the issue
flash.callFlash(fallSource);
So theoretically everything should work fine (if I understand ExternalInterface correctly). However, the following error is thrown:
TypeError: flash.callFlash is not a function
flash.callFlash(fallSource);
I can't seem to find where the issue was.
I'm open to any answers or even a completely different way of doing this.
As long as it works as this is holding up the delivery of the project :C
Thanks!
I know this is really old, but I've never had success finding my flash objects properly with jquery. It's better to go with a getElementById. Also, one other crazy thing I ran into with some modern browsers just a couple months ago is that I actually needed to tell flash to wait a frame after initializing any callbacks via ExternalInterface.
I have NPAPI plugin and I want to detect its version before I embed it into web page. If version is not the latest one I want to show some message that asks users to update the plugin.
Now it's implemented in the following way
if (navigator.mimeTypes && navigator.mimeTypes["application/myplugin"]) {
{
// some code here
if(navigator.plugins["myplugin"] && navigator.plugins["myplugin"].version >= latest_version) {
// we have the latest version (embed the plugin into web page)
document.write ("<object id='plugin'><embed ....></object>");
} else {
document.write ("Show message here");
}
// some code
}
The problem is that navigator.plugins["myplugin"].version works fine in Firefox but not in Chrome. Chrome doesn't expose version property. I can add my own property in NPAPI code, but I don't see the way I can use it before embedding the plugin into page.
Is there any workaround?
Thanks in advance, Andrew
I see a lot of plugins have version information in either the name or the description. You should be able to access that information before the embed.
I actually put the version number in the filename, rather than even the name or description. The reason for this is that if there are multiple plugins with the same name, description, and mimetypes Firefox will generally use the latest version. Older versions of firefox have been inconsistent in how they handle this, so I even usually put the np???_version.dll file in a version-specific subdirectory.
It is a little bit of a pain, but it works consistently the same way in every NPAPI browser.
You can create a JSAPI property of your plugin containing the version. This property returns the plugin's version when called from javascript. So when you try to insert/embed the plugin in the page, you can check through javascript to make the appropriate calls.
I'm playing around with jQTouch for an iPhone OS app that I've been toying with off and on for a while. I wanted to try my hand building it as a web app so I started playing with jQTouch. For reference, here is the page+source (all my code is currently in index.html so you can just "View Source" to see it all):
http://rpj.me/doughapp.com/wd/
Essentially, I'm trying to save pertinent JSON objects retrieved from Google Local into DOM objects using the data() method (in this example, obj is the Google Local object):
$('#locPane').data('selected', obj);
then later (in a different "pane"), retrieving that object to be used:
$('#locPane').bind('pageAnimationEnd', function(e, inf) {
var selobj = $(this).data('selected');
// use 'selobj' here ...
}
In Chromium and Safari on the desktop OS (Snow Leopard in my case), this works perfectly (try it out).
However, the same code returns undefined for the call to $(this).data('selected') in the second snippet above. I've also tried $('#' + e.target.id).data('selected') and even the naive $('#locPane').data('selected'). All variants return undefined in the iPhone OS version of WebKit, but not on the desktop.
Interestingly, the running this on Mobile Safari in the iPhone Simulator fails as well.
If you look at the full source, you'll see that I even try to save this object into my global jQTouch object (named jqt in my code). This, too, fails on the mobile platform.
Has anyone else ever ran into this? I'll admit to not being a web/javascript programmer by trade, so if I'm making an idiot's error please call me out on it.
Thank you in advance for the help!
-RPJ
Update: I didn't make it clear in the original post, but I'm open to any workaround if it works consistently. Since I'm having trouble storing these objects in general, anything that allows me to keep them around is good enough for now. Thanks!
Have you tried using HTML5 data-ref attributes? The data has to be stringified, but you can just do
$('#locPane').attr('data-selected', "somestring");
and still have valid HTML5 markup.
As far as I can tell there seems to be a bug in Mobile Safari storing objects like this. So what I did was to simply store the components of the object in the documents data store.
$(document).data( "lessonCode" , lesson.lessonCode);
$(document).data( "question" , lesson.question);
$(document).data( "answer" , lesson.answer);