How can I get the amplitude data from an MP3 file? - javascript

Im trying to use html5 and javascript to get the amplitude (and other components) of an mp3. Any libraries that would help?

First you need to divide the problem to real-time playback and non-linear amplitude, etc. access.
For real-time playback you can use Web Audio API
https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html
Example for beats
https://beatdetektor.svn.sourceforge.net/svnroot/beatdetektor/trunk/core/js/beatdetektor.js
For non-linear, non-real-time access, there are two ways
If you allow server-side processing you can write your proxy sending the data to Echo Nest servers and retrieve information via Echo Next Remix API
Extracting beats out of MP3 music with Python
If you want to avoid server-side processing at all you need to decode the MP3 in pure Javascript to get the access to the raw audio data in non-real-time fashion
https://github.com/devongovett/mp3.js
Then you need to apply the necessary filters on the raw audio data to extract the information you need on it. This is a problem of signal processing and not directly connected to Javascript programming. If you specify more carefully what kind of data you are after people might help you with related Javascript libraries, like ones for fast fourier transform.

Related

How to do realtime audio analysis with playback in NodeJs?

So here is my problem. I want to play audio from nodejs running on a raspberry Pi and then adjust the brightness of an LED strip also connected to the same PI based on the frequency readings from the audio file. However I can't seem to find anything in node that gives the same functionality as the WebAudio API AnalyserNode.
I found a few libraries (https://www.npmjs.com/package/audio-render) that come close and are based on Web Audio API but the frequency values it produces are completely incorrect. I verified this by comparing it to a browser version I created using the Web Audio API.
I need the audio to play from node while also being analyzed to affect the brightness levels.
Any help would be appreciated. I really thought this would be simpler to handle in node but 6 hours later and I'm still without a solution.
Victor Dibiya at IBM has an excellent example that illustrates how to use the web-audio-api module to decode an audio file into a buffer array of PCM data from which one can extract amplitude data from sound files and infer beats:
https://github.com/victordibia/beats
I have this working on a Raspberry Pi with LEDs controlled via Fadecandy.

visualizing PCM data streamed over a peer connection in realtime?

I have an experimental sound project I'm working on that streams PCM audio data over a webRTC connection.
Unfortunately I have to do some special processing to the raw data before sending it over the stream, so I haven't been able to pipe the stream directly over webRTC. Instead I do processing in the ScriptProcessorNode
I know that ScriptProcessorNode has been deprecated in favor of AudioWorkerNode Essentially I am doing the same thing because I have a web worker which processes the script processor node's data.
This processed data is then sent over webRTC, which I want to visualize and interact with on the other end.
I came across several repos that do this kind of thing but I can't seem to find one that works efficiently with real-time peer streamed data.
wavesurfer-js.org/
works great but only loads full audio files, not streamed data. I was able to manipulate the library a little bit to be able to update the waveform visualization with live stream data, but the way I'm doing it is not performant.
https://github.com/bbc/waveform-data.js + https://github.com/bbc/peaks.js
This one looks promising and I have yet to try it. Lots of features for interacting with the waveform.
github.com/soundcloud/waveformjs
Works well and has an 'update' function that is performant, but the library is not being maintained and doesn't support much functionality beyond viewing the waveform.
Does anyone have any experience with a good library for this purpose?
Thanks

Adding server-side libraries for javascript

I am currently coding my offline game into an online game by use of node.js and socket.io
In my game, I use vectors from a library called p5.js to store position of player, collision related movement, etc.
However, the server side (a txt file called "server.js") does not have p5.js like the client, so I can't send information about the player's with vectors.
Here is my question: How could I make the server.js file have access to my p5.js library?
Note: Simply sending x and y values, and then using them to make a vector would be a difficult solution, as I would no longer be able to send a single array holding all the information of all players. Also, enemies, food, trail positions, and much more also depend on vectors. Coverting all of these would be difficult to code.
What you want to do is simple, but it won't feel simple until you fully understand all the parts involved, and for that I'm afraid it's going to take you at least a few months given your current level.
How could I make the server.js file have access to my p5.js library?
Is your p5.js a browser-only library, or you can import it as a module in your server? If it's the second option, all you have to do for your server to access it is:
const p5 = require('p5.js');
Keep in mind that:
Server should handle the position, movement, and actions of players so they can't cheat.
The client should be just a visual display of the information coming from the server, plus sending the player key inputs to the server.
So unless you want to make client side prediction and entity interpolation, which I doubt because you are starting out, keep it simple. No need to share libraries between client and server yet.

Executing Binary Code

I'm designing a game and have a somewhat unique problem.
To play the game, players each write a simple javascript program that continually makes a request of my backend for the game state and then decides what to do and posts their move (also to my backend).
I want to store the user scripts on my end though, so I've given them the option to upload their scripts with the standard HTML5 input type="file". Then I use FileReader to read in the raw binary, and associate that binary input as a "bot" for the user in Mongo. (My backend is written in Go)
Docs for FileReader:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
So far, I've found a resource for converting the binary back to ascii:
Converting Binary to text using javascript
I found a javascript interpreter that I can allegedly execute javascript from:
https://github.com/jterrace/js.js
In this situation, is there a better way to run the uploaded code, perhaps as an executable? Is a javascript sandbox solution like JSJS overkill?
It should always be a good idea to sandbox any user submitted code, regardless if it's executed on the client or server.

Passing values from Python to JavaScript

For a research project we are developing a system in python which takes raw data from a real time sensor and applies different DSP filters to it. So far so good. The other part of the system should be the plotting of the data and the access to some controllers for modifying the sample rate and other parameters. The last days I have been trying to use HTML5 + javascript as the technology to do the data plotting; I am using d3.js for the graphics and mimic.js to implement the xmlrpc protocol to communicate the python side with the HTML file. After a lot of tweaking i ALMOST managed to communicate both parts of the system. However, I ran into the 'Cross origin request' error (I am using chrome).
After that I have been thinking of some other strategies in order to communicate python with the GUI:
Using a SimpleHTTPServer. However, I need to have a SimpleXMLRPCServer running so I can register the function (register_function) to pass the value. Is there a way to implement a xmlrpc within a SimpleHTTPServer?
I have been thinking about using json but I am not sure if this is the best way to go as the data streaming will be quite big and fast(4 channels with constant updates).
So after all this testing I really would appreciate a piece of advice:
Is if feasible to have such HTML5 GUI? is it efficient for plotting such amounts of data?
if so, what would be a realistic strategy to implement a communication between Python and HTML/js?
Is xmlrpc the best protocol to use?
Yep. Also you can use some JavaScript charts libraries. Such as amCharts, highcharts, plot.
Really, JSON is better.
XMLRPC isn't very light. See p.2 :)

Categories