I'm building a little sequencer like this one, but want to use HTML/JavaScript exclusively (i.e: no Flash).
As you play around with the applet in the link above, you'll notice the potential for several sounds to play simultaneously and/or in rapid succession. I'm using an array of audio objects simulating different 'slots' or channels to achieve the desired polyphony and, as a concept, this seems to work. I'm not experiencing any clipping or cutouts in my audio.
However, this process becomes prohibitively resource-intensive very quickly, regardless of source filetype/compression. It's not uncommon for the web browser itself to crash as the number of sounds playing increases.
So, I"m wondering: What, if any, is the best way to facilitate a fairly heavy audio load without choking the browser? Or, is trying to make HTML/JS work for this purpose a fool's errand?
Any insight would be much-appreciated. Here is a version without sound.
I cant say myself, but here's some examples making use of the new web audio api.
http://chromium.googlecode.com/svn/trunk/samples/audio/index.html
The drum machine is pretty taxing on my system, though. In any case, I figure you'd be interested in the link.
Related
I am trying to create a calling app that uses WebRTC and a feature I want to add is audio obfuscation.
I want the ability to change the audio pitch that I am sending either at the source audio or even at the receiving end.
I have tried various famous libraries like P5.js but still was unable to get the result.
Need some suggestions/sample code in which I can modulate real time audio or even simulate the feeling that I am modulating the real time pitch of the audio.
I would prefer javascript as it will be rendered on the client but I am even open to using some alternative like WebAssembly if that will help me do the job.
Thanks in advance!
I am building a web app which will have 3D objects and much of sound manipulation in real time.
Should I do it with webGL or it would be better with actionscript (in a flex project) ?
I am intersted in good performance (many sounds will be played recurrently and in specific times).
An other factor is that I already know Javascript and webGL but not Actionscript, mxml etc.
Listening to your valuable opinion.
WebGL is not capable of playing sound - however other parts of HTML5 are.
I would highly recommend the HTML 5 audio api, it will allow you to position a listener and sounds, so played sounds will emanate from different directions (e.g. behind you or beside you).
If you wish to loop your sounds, it's as easy as setting a variable on the source node (the thing that plays the sound).
I'm wondering if any new HTML5 functions or existing JS library would allow me to access information about the sound that's currently playing in an Audio object. For example, I'd like to be able to access an array of ranges the a song is currently playing at (that is, low values appear for deep bass sounds and higher values appear for shriller sounds). I'm not a sound engineer, so I'm not quite sure what the correct terminology is.
A comparable library would be the C++ BASS library (http://www.un4seen.com/), although I certainly don't need the same breadth of functionality.
I did a little more digging around and found this: chromium.googlecode.com/svn/trunk/samples/audio/visualizer-gl.html
It's pretty much what I'm looking for, but I can't figure out how it works. Thoughts?
The chromium visualizer uses the Web Audio API.
Firefox offers the Audio Data API.
These are the two options available at the moment, and they're not compatible with each other. Eventually an agreement will be reached.
If you intend to do something cross-browser, you're condemned to using Flash for now, there is a pretty good library called SoundManager2 that gives you the necessary data. Check out their visualization demos.
This question already has answers here:
How to write a web-based music visualizer?
(4 answers)
Closed 5 years ago.
I'm trying to use JavaScript to display the waveform for and audio file, but I don't even know how to get started. I found the Audio Data API, but am unfamiliar with most audio terms and don't really know what is provided or how to manipulate it. I found examples of waveforms in JavaScript, but they are too complicated/I can't comprehend what is going on. Then my question is: how can you use JavaScript to create a waveform of a song on canvas, and what exactly is the process behind it?
Here's some sample code from my book (HTML5 Multimedia: Develop and Design) that does exactly that; Audio Waveform. It uses the Mozilla Audio Data API.
The code simply takes snapshots of the audio data and uses it to draw on the canvas.
Here's an article from the BBC's R&D team showing how they did exactly that to build a couple of JS libraries and more besides. The results all seem to be openly available and rather good.
Rather than use the Audio Data API, which you cannot be sure is supported by all your users' browsers, it might be better if you generate your waveform data server-side (the BBC team created a C++ app to do that) and then at least you are decoupling the client-side display aspect from the playback aspect. Also, bear in mind that the entire audio file has to reach the browser before you can calculate peaks and render a waveform. I am not sure if streaming files (eg MP3) can be used to calculate peaks as the file is coming in. But overall it is surely better to calculate your peaks once, server-side, then simply send the data via JSON (or even create + cache your graphics server-side - there are numerous PHP chart libraries or you can do it natively with GD).
For playback on the browser, there are several good (non-Flash!) options. Personally I like SoundManager 2 as the code is completely decoupled from display, meaning that I am free to create whatever UI / display that I like (or that the client wants). I have found it robust and reliable although I had some initial difficulty on one project with multiple players on the same page. The examples on their site are not great (imho) but with imagination you can do some cool things. SM2 also has an optional Flash fallback option for antique browsers.
I did just that with the web audio api and I used a project called wavesurfer.
http://www.html5audio.org/2012/10/interactive-navigable-audio-visualization-using-webaudio-api-and-canvas.html
What it does is, it draws tiny rectangles and uses an audio buffer to determine the height of each rectangle. Also possible in wavesurfer is playing and pausing using space bar and clicking on the wave to start playing at that point.
Update: This POC website no longer exists.
To check out what I made go to this site:
Update: This POC website no longer exists.
This only works in a google chrome browser and maybe safari but I'm not sure about that.
Let me know if you want more info.
Not well supported yet but take a look at this Firefox tone generator.
It's not the type of game that really need a server to operate. I'm using javascript and html5 right now, and I cant think of a way to prevent the game from being rip off.
Using obsfucator is useless, the game would still work offline.
Implementing a validation scheme is not invincible either. Someone smart can just crack the script and remove the validation part.
Make it attractive for users to play on your site.
For example:
Provide online Highscores.
Introduce a multiplayer option
Create friends list
Provide a server based achievement system
Develop other games and provide them on the same page so users want to come back
Create "level packs" and similar add on content and release them on your page
Overall, there are other possibilities to get users to play on your site besides technical restrictions, which - as you already found out - are difficult to deploy in an open source, browser driven environment. But, on the web, this has always been a feature, not a bug.
You're right in that a clientside-only can't be prevented from running offline. How about moving part of the game logic to the server?
You could continue to use html5 and javascript, but move your javascript to the server side using node.js For example http://www.yuiblog.com/blog/2010/09/29/video-glass-node/
If you combine obfuscation and validation, you'll go a long way. Can someone crack and use it offline? Possibly. Is it really going to be worth the effort? I mean, even an installed game can be cracked. This is especially true if you make the validation extra obfuscated by hand by spreading it out over several methods.
I would avoid moving more logic to the server than you have to, because it would obviously slow the app way down, but you might be able to get away with moving tiny crucial pieces that only happen rarely like between levels (chapters?).