Starting and stopping a sound with Javascript - javascript

I need to start a sound effect at will... I need it to be stopped as well before it is over. I'm doing this all in JavaScript. How would I go about this? I've never used sounds before in a page (normally not a good thing to use sounds, this project requires me to).
Any help would be appreciated :)
If it means anything, I'm also utilizing jQuery.

If you're using jquery, have you tried the sound plug-in?

You may want to look into SoundsManager2

Related

Using ScrollPath jQuery plugin, any way to pause scrolling when it hits a certain element?

I am using the jQuery ScrollPath plugin, and I was wondering if their was a way to get the path to stop at each DIV for a second or so. I've seen other plugins do things like that.
I've seen it on other sites, where you keep scrolling, and it halts the scrolling for a second or so.
Here is the site I am using it on:
http://mikelegacywebdesign.com/index.html
I needed to do the same thing using jQuery Scrollpath plugin and I found a workaround way to do it, though I realise that it might not be the best way to do so.
I modified the source code of the plugin at the scrollToStep() function which is basically responsible for the actual scrolling and added a conditional check based on a flag variable in the document which when set true escapes the scrollToStep() method. Now by simply setting the flag using some external code of your choice through suitably handled setTimeout() calls, it's possible to simulate the pause at key-points in the scrollPath.
I hope this helps you.
Here is a jsfiddle with a simple delayed scroll example. I'm not sure how this would interact with the ScrollPath plugin, but it may be a good start.

Loading a HTML5 video to use with canvas

Good day,
I need a javascript only solution to programmatically load a video, so that I can later reference it and draw it on my canvas application. I'm utterly confused on how one would check to see if a video loading is complete, since there is no event for that. Also, it seems, that video.load() doesn't load anything, and I can't seem to get any attributes (everything comes up as null) of the video element, even after starting it to play with video.play().
Any help is much appreciated. Thanks!
A cross-browser implementation of a progress-event can be found in the jMediaelement-libary.
https://github.com/aFarkas/jMediaelement
Could Video.js be what you are looking for? It provides an API which allows access to to tracking and setting of progress.
http://html5doctor.com/video-canvas-magic/ can help i guess

What does JpegMini use to animate the image comparison on the homepage?

Hopefully the title is clear. I'm talking about the large image comparison slider on the homepage of JpegMini.
I've managed to identify it as needing three core files (written as they are named on the site):
jquery.min.js
jquery-ui-1.8.14.min.js
scripts-0135.min.js
It's this last one I'm unable to find any information about so it may hold the secrets but I don't know.
Anyone got any ideas?
The .imagePairs elements have a mousemove event bound:
$('.imagePairs').data('events').mousemove[0].handler
is a function.
The code is apparent inside scripts-0135.min.js, but it is minified.
What you can do is parsing it through jsbeautifier and see if you can make something out of it. It will still have variable names which make no sense, so it will not be easy.
Looking at the code, it seems like they initialize it with $('.imagePairs').myBeforeAfter, which is most probably the function that handles the effect.
I never was able to determine the script used, in the end I searched the web and found a suitable alternative which came with good documentation. http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

best way to add sounds to navigation buttons?

I have a client who has a young target audience and needs his site to play short "catch phrases" when the user clicks buttons. What would be the best way to go about this? I don't necessarily want to use Flash.
If you're looking for a quick dropdown solution, try this library. (I've played a bit with it, and it seems reasonable.)
Yes, you can use it. If someone is using old, crappy browser then he just won't hear a clip - that's not a very big problem I guess.
You could do that using hidden <audio> element and piece of JavaScript.

Javascript forward backward buttons

I'm using the s3Slider javascript slideshow on the homepage of a site I am developing:
http://alexisparkinn.com/
I really like this slideshow but it has no way to enable the user to go to the next or previous image.
How can I add these buttons? Does anybody know the necessary javascript code I need to use or what changes should be made.
Suggestions? Any help would be greatly appreciated.
Thanks!
I know you didn't ask for suggestions, but let me just throw this out there as a solution:
http://jquery.malsup.com/cycle/
After messing around with a ton of sliders, I've ended up going back to this one time after time. (and there is a 4KB version if all you want is the fade effect)
It has pretty decent documentation and is overall pretty easy and straightforward to use.
Anyway, just wanted to throw that out there. Best of luck to you!
Just to hack something in, I'd modify your s3slider copy to include something like this (insert at line 38)
$(element).bind("s3slidernext", function() {
current = items[currNo+1];
fadeElement(false);
});
Then you can probably just call
$('#s3slider').trigger("s3slidernext");
To move the slider forward. Bind that to a button and you're all set.
there are many jquery libraries that can help you out there like http://sorgalla.com/projects/jcarousel/

Categories