I am creating a little JavaScript music player that sits on the btottom of the page, a lot like streampad. But streampad uses a flash progress bar for the song and JavaScript for everything else and I am having a hard time finding anyone who does this with JavaScript alone. Can anyone point me in the right direction on how this can be done (preferably without using HTML5)?
There's no way to do this with just Javascript, without going into html5 (the audio tag).
SoundManager 2 has a hidden flash component, and the UI is completely in JS. It's up to you to implement a seekbar or whatever you want, but there's a whole lot of example code. SM2 seems pretty popular, and is used by a number of big sites (Soundcloud, Last.fm, Muxtape).
i think you may found usefull look at theese:
Monitoring Loading Progress of SWFs
http://code.google.com/p/swfsound/
SWFSound is based on SWFObject and
allows cross-plattform, cross-browser
sound support for HTML/JavaScript
using Flash Player 8 and higher.
http://code.google.com/p/swfobject/
SWFObject is an easy-to-use and
standards-friendly method to embed
Flash content, which utilizes one
small JavaScript file
just some example
http://www.happyworm.com/jquery/jplayer/
http://www.bauer.uh.edu/parks/video3.htm
You can't do that without HTML 5 or Flash.
You could however create an hidden flash player and control it via javascript using External Interfaces.
Maybe you can use a library that implements a progress bar using html5 and javascript, see RGraph: http://www.rgraph.net/examples/progress.html
Related
I am building Chrome extension. I need to place a text over the YouTube flash player using JavaScript code. I saw many programmers did that but I didn't understand HOW?
Update: I need to place the text when the player been in full screen.
Simply use CSS and the position tag to place floating HTML elements. Note the YouTube flash player is just that, a flash object, so you can use normal HTML to place things on top of it.
You can read more here.
To manipulate the DOM (document model) with JavaScript you can use the built in javascript functions or use something like jQuery.
I would like to know if it is possible to visualise audio from soundcloud's custom player:
http://developers.soundcloud.com/docs/custom-player#
At the moment I could only think about using videos, but I would like to know if it is possible to do with javascript or jQuery, maybe there are some cool libraries out there?
EDIT:
So far this is the only exact thing I found that does exactly what I want, but I am having trouble in understanding how it works, I was trying to play around with source code but had no luck ;/ and I don't wan't to copy it exactly. Maybe you could explain principle behind it and suggest how to change it's appearance?
check here: http://learningthreejs.com/blog/2012/05/08/sound-visualisation-vuemeter-in-webgl/
or you can search other Web Audio Api examples for Chrome and Safari and Data Audio API for Firefox
If you go to this website you will notice http://craigsworks.com/projects/qtip2/ qTip2 Jquery Plug (the green template theme) .. It is a project called qTip2 Jquery Plugin. It looks similar to http://hypem.com/ Jquery.
Is this what they used for audio player located on top. It looks like they used this Jquery and and implemented JavaScript into qTip2. I was looking to do something similar I noticed that there is 22 JavaScript, 2 CSS, 2 PHP and HTML. One reason to successfully code this, is because trying to achieve a player that hovers above and users can browse around the site and their music is not interrupted. I seen it done with I-frames but that is not going to be acceptable. If you have an Ajax example that would be terrific. I can't find any useful resources relating to an Ajax MP3 player that could be on the top panel. Do you think this will work , am I on the right track?
If you could please provide source code or any resources I would greatly appreciate. Thank you
If you can use html5 https://github.com/goldfire/howler.js that can then have your player in fixed position block element.
I'd like to know if there is any cross browser light-weight invisible sound players that are controlled by JavaScript, but not using any frameworks like jQuery.
I'm not looking to use HTML5 at all. So maybe a solution that uses Flash.
Something that is not more than load() and play().
I believe SoundManager 2 may fit your needs:
http://www.schillmania.com/projects/soundmanager2/
If you don't care about old browser, i'd suggest looking at what you can do with the audio tag of HTML5.
For example to play see: http://dev.w3.org/html5/spec/Overview.html#playing-the-media-resource
The 1Pixelout Player for Wordpress could by used (just use the SWF) and then hidden with CSS
http://wpaudioplayer.com/
-edit
DewPlayer has also JavaScript Controls (scroll down to the bottom)
http://www.alsacreations.fr/dewplayer-en
SoundJS
http://www.createjs.com/#!/SoundJS
A Javascript library that provides a simple API, and powerful features to make working with audio a breeze.
Nice looking examples
Easy to use
Large following of users
Continuous development
Published on GitHub
and you can use it via a CDN:
http://cdnjs.cloudflare.com/ajax/libs/SoundJS/0.4.1/soundjs.min.js
I'm aware this is probably a very simple problem with a 1-line-of-code answer but I've been on it a while now and it's still eluding me. We have a site that comprises mainly of an embeded flash object containing navigation controls. All I want is to insert a small .swf movie that will play like an intro scene to the website before the main .swf loads for the site itself. All this means is I want to call up 1 flash object, play it through and then replace it with another once finished. This seems to be a relatively simple desire but after a couple of hours worth of forum-trawling I'm still denied a simple solution. Anyone know any better?
The simpler solution is for all of this to be handled within Flash. That would give you a finer overall control.
If you handled this both with Javascript & Flash, a likely problem will be to have to wait for a movie to be loaded before it starts playing.
You could for instance call a Javascript function from the first movie when it completes playing, but you won't be able to avoid the delay between the two movie whilst the second movie loads.
If for some reasons, you don't have access to the code in any of these movies, create a third movie that will act as a container for both swfs where you'll be able to monitor loading progress and react accordingly.
As far as I know (will be glad if someone will correct me) you can't really know when Flash object has finished loading - for the JavaScript code it's pretty much "black box".
So, your best alternative is hide the "intro" after specific amount of time, for example five seconds:
window.setTimeout("document.getElementById('intro').style.display = 'none';", 5000);
This will hide element with the ID "intro" after five seconds.
There are a couple of solutions.
You can embed the intro and the navigation in one movie clip and just show the navigation after the intro movie has played.
You can also use ExternalInterface in flash in the intro movie. ExternalInterface allows Flash to call JavaScript functions and vice versa. So you basiclly write a small function in JS that changes the clips and call it via ExternalInterface at the end of the intro.