Why CreateJS code not working in firefox? - javascript

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.

Related

Detecting MP3 support in a page for old browser

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
}

HTML/JS github pages project doesn't load images or sounds when run with firefox

Alright so this is a weird one, I'm not entirely sure if this is the right SE site, but I think it is because it regards web code/browser compatibility. If not, someone tell me in the comments I'll move it.
So basically, I have my game's source code on github. I also am hosting the game itself on github pages. This game should (I believe) function on Firefox and Chrome browsers. The source code has nothing unique to either browser.
The game runs fine on chrome. However, on Firefox this is not the case. None of the assets (images, sounds) are showing up/working on the github pages link. The weird thing is this though: on my local file system, when I open the html file with FF it runs/renders the assets just fine. Also, when I download the zip of my project and try it w/ FF, it also works fine. Why is this the case?
(Note, if you want to see the problem, click on the github pages link, then click on "Start Game", this will open it up to the game where the problem is occuring)
Edit:
Forgot to mention, the error I get in the FF console is NS_ERROR_NOT_AVAILABLE: it leads to line 421 which is this: g2d.drawImage(playerSprite, spriteLoc[0], spriteLoc[1]); where I draw the image onto the canvas. g2d is supposed to be ctx btw, thats a bad java habbit.
try changing the path of the resources.
you call the sound files, and image files this way:
laserSound = new Audio("resources\\Sounds\\laserblast.wav");
playerSprite.src = "resources\\Sprites\\Sprite.png";
you need to change the path to this:
laserSound = new Audio("resources/Sounds/laserblast.wav");
playerSprite.src = "resources/Sprites/Sprite.png";
that is change this \ to this /
the current way you are getting it, Firefox does not find where you files are at.
also, why dont you put init(); at the bottom of the JS file, its just to make sure, that the JS parser already knows that certain functions you will be calling are defined, like update() and initBackground() (this does not seem to be a problem, but just to be on the safe side.)

Where in metadata of a video in html5 is the fps saved?

In order to fully implement my custom html5 video player, I need the the exact frame rate of a video. However I have not been able to find it yet and am using a standard value of 25.
Typically videos have a frame rate value in meta-data so I accessed meta-data using something like this:
var vid = document.getElementById("myVideo");
vid.onloadedmetadata = function(e) {
console.log(e);
};
However I can't find frame rate here. Maybe I am not reading metadata at all.
I can use your help.
Thanks!
Try https://mediainfo.js.org (github)
It works on ui only, no backend needed
I just implemented it and it looks like it worked perfectly fine (at least in Chrome v 70.0.3538.77) for gettting wide media information
It looks like modern browsers beginning to work with some binary libraries
I'm 95% sure the standard html5 video api does not expose the fps information, from what I've read in the past months - other apis like MPEG-DASH and jwplayer do present more / different data.
Your best bet would be to snoop around w3schools.com/tags/ref_av_dom.asp and similar mdn pages.
You can calculate this in realtime yourself and it should work most of the time but I can imagine there's a case or two when it wouldn't. Look at PresentedFrames and then do something like:
fps = video.time / PresentedFrames
view more about PresentedFrames here (currently proposal) and similar attributes at the same link.
mediainfo.js works pretty good - even if used locally in a browser using 'http(s)://'.
To use it locally, just make sure you also download the accompanying mediainfo.wasm and put it into the same directory as mediainfo.min.js.
Alternatively you can install media-info using npm.
The only caveat is, that it doesn't run from the 'file://' protocol.

WebAudio not playing after stop(0)

I'm writing something like a web-audio-editor, and I think I'm close to finishing the basics. I can play and stop an audiofile, but when I try to call the play method again it just won't work, even though the parameters havn't changed.
I'd be glad to see someone look into my problem as I cannot see why it doesn't work when similar code in other projects does. Unfortunately I cannot create a jsfiddle, because I would need to load an external mp3-file and it seems I'm not allowed to do that. But I have pasted the javascript here and the corresponding html file here.
All you need is a server you can upload the files to and a mp3 on it. Alternately you could use this link, but I will delete the files eventually.
You can't call start() on an AudioBufferSourceNode more than once. They're one-time-use only.
Really the only way to do this is to create a new AudioBufferSourceNode from the underlying AudioBuffer every time you need to start playback.
You can also leave it running and simply disconnect it from the gain-node, and the oscillator would presumably just idly/silently produce a waveform.
To avoid creating a new AudioBufferSourceNode, you can simply use the playbackRate like this:
source.playbackRate.value = 0; to pause.
source.playbackRate.value = 1; to play.

Javascript throws error when trying to send var to AS3 ExternalInterface

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.

Categories