simple music or tunes via HTML? - html

I'm looking for a simple way to put up musical "tunes" on a website.
So here's an analogy to explain my question:
Let's say I want to put up a couple of big triangles as a picture on my web page. I can either draw a bitmap and save as GIF/JPG/PNG, put it up somewhere on the internet, and link to it with an element. That works but the larger the picture the more space my image file takes up.
Alternatively, I can use SVG (even though Internet Explorer support is lacking, grr) and use vector graphics which uses very little bandwidth regardless of image size.
In the music world, I can use WAV or MP3 files. Works great -- but if I just want to publish a 1-minute song of simple notes, by knowing the durations & pitches, & don't care that it sounds 100% exactly like a piano or accordion, is there a way to (a) create a file with the song, and (b) put it online in a format that is space-efficient? 1 minute of MP3 usually takes up hundreds of kilobytes.

You could use a MIDI file, this stores durations/pitches etc. as you suggest. You should be able to easily find software to create this type of file. However you will probably find the results sound terrible, as it is very dependent on the synthesiser hardware/software that is available on the end-user's machine.
For what you need this might be reasonable though.

Look into playing music files on websites using Flash.
You can control the Flash through JavaScript calls.
This is currently the "recommended" way to play small audio clips in a website.
For larger media files, look into streaming FLV files using a Flash player.
Hope this helps :)

Check out the MIDI format for instruments.
http://en.wikipedia.org/wiki/MIDI

Related

Cuts to beats perfect in FCPX but off after rendering

I've put together a movie in Final Cut Pro 10.2.3 with a lot of edits cut to the beat of the audio track. It is synced perfectly when previewed within FCPX but is off by quite a bit after sharing regardless of what settings I choose. I've transcoded all my media and created optimized versions
If you are experiencing a sync problems with FCP, 95% of the time it is because of mixing audio sample rates. Final Cut Pro is having a difficulties in resolving them to match.
Firstly, verify that every audio clip within your Browser has exactly the same sample rate. A bad sign, is if you see a sample rate that is very close to 48,000 Hz, but it's not (for instance 47.998 Hz). Your best friends for preparing audio for sample-precision editing are Apple Logic or discontinued Soundtrack Pro 3.
Secondly, if you have multiple audio formats, transcode them to *.wav.
And only then edit.

Record online blackboard with playback

I'm trying to figure out what would be the best way to record a blackboard type of application in the webbrowser. Where a tutor can record a video of the blackboard with audio.
I think the obvious answer here is to make a html5 canvas and capture it at intervals as images and combine these to a video. Like so
However this has several disadvantages. It is not easy to edit the video later on. Also videos would require a lot of storage space.
What are your ideas? How can I construct this recording and playback of a blackboard?
/Jake
I am currently working on a project that records HTML5 canvas drawings and allows you to play them back later. There are no images, everything is stored in the Javascript/JSON. There is no audio, so I plan on adding a transcript feature along with it. If you want to follow along with my project, it is at http://github.com/eipark. The code is still very much raw and buggy, but I am actively developing it for a school project and hope to have at least the "video" recording portion done in the next week.

Can I playback a SVG animation within SMIL?

for a digital signage project, I created a SVG based rundown, which plays other SVG files in a loop on a Spinetix box.
Now I had to change the playback device. The new one supports SMIL and I'm looking for a way to reuse my old solution on this device. I think of creating a SMIL rundown which plays the standalone SVG files (basically it's the same, I think).
I googled and searched and didn't find a way to realize this. Any ideas? I appreciate your help on this one.
Thank you,
Juri
SMIL is less powerful then SVG as it only handles the playlist timings.. Therefore it will be dificult for you to have the SVG projects taken over on a SMIL-only device ...
SpinetiX launches apparently a new software which is running inside their players, according to the video's it's realy simple to update content now ...
james

how big is too big for a swf file

I am making a flash game. And I want to know how big is too big for a swf file. Also, Ive been looking at my swf file and right now its at 38.2k. Is the swf file that gets created during debugging, is this the correct size for the file that will eventually be placed on the web.
thanks
Kilobytes is small stuff.
Anything less than a couple of megabytes is fine - once you get above that you might start worrying about loading times and keeping users interested during the preloader, but most portals accept files up to 10MB or so.
Yes, the file is the same. A game of 38.2 kb is pretty small, if you go on Flash game sites they regularly run in the multiple of megabytes.
The SWF is slightly smaller in release mode. The size difference is essentially nothing.
As for a guideline size, this depends on who you are expecting to play your game.
if you want your game to reach a very wide audience keep it as small as you possibly can.
a game without any heavy animation , embedded assets like png files or sound will usually be small.
a good discussion regarding Optimal swf size for flash games here at
http://board.flashkit.com/board/showthread.php?t=788271
The difference between debug and release builds is, according to my experience, some 30-40% in file size (debug version being bigger, of course), which is not insignificant.
Anyways, I think you're safe to assume that anything below 100kb is small enough to be considered an instant download, with no need to use preloaders. However, adding graphical and sound assets to the game will quickly push it up in size, at which point the preloader will probably be a good idea.

Is it possible to generate thumbnail from a flv using as3?

Is it possible to generate multiple thumbnails from a FLV using only as3? The flv is on the same server as the swf so I'm not using any dedicated streaming server. I'd imagine that as long as the flv has load the video you'd be able to pull bitmapdata from a specific time of the flv.
My idea is to pull around 8 images from every flv, convert them to buttons and use them as links to specific chapters in the flv.
If this is not possible, would it work better with a dedicated streaming server like red5?
Edit:
I'd also like to know how to do it if it's possible :)
The idea is to not use the server.
The thumbnails will only be used within the swif, so no saving to another location.
You can do this in AS3 as long as you're actually playing the video within Flash. While playing when you seek to the desired frame capture a bitmap. If you want to save the bitmap for later use you need server-side code to store it.
Streaming vs http download will not make this problem any easier or harder (although with a streaming server you can seek to the desired point without having to download the whole flv to that point).
This would be much better done on the server. You'll need an app that can extract an image from an FLV. ffmpeg can do it.
I know it is possible to get mplayer to output stills from an FLV (though might need a bit of fiddling to get the time reference right), and these in turn can be stuffed into ImageMagick to resize into thumbnails. Not best solution, but probably easier than digging around as3's API.
video thumbnailer is a good idea.
http://blog.chrometaphore.com/2010/03/26/how-to-create-video-thumbnails-runtime-in-pure-actionscript-3-0-videothumbnailer/