I'm trying to build an mp3 player for my site using JavaScript (and any plugins/frameworks(jQuery)/libraries that are relevant) & html5. So I built the player (more accurately, I implemented jPlayer), and now I want to make a visualizer.
Ok maybe it's not a visualizer (all the names for ways to visualize sound always confused me), I guess what I want is something like this:
(source: anthonymattox.com)
Or just something that graphs the amplitude (loudness) of an MP3.
So to start, does anyone know an API that can do this?
If you don't that's ok; I guess I'll build my own. For which I need to know:
Does anybody know a way to get the amplitude/loudness of an mp3 at any given point using JavaScript?
EDIT
Changed to a question about php: Visualization of MP3 - PHP
You would need to be able to decode the MP3 yourself. The html5 audio element, and the browsers's implementations of it, don't expose this sort of data. For example, look at Firefox's exposed methods for JavaScript. The closest thing to what you want is the "volumechange" event. But that is in reference to the volume mixer on the browser's rendered control (i.e. output volume). It has nothing to do with the actual dB of the audio source.
I imagine that the only feasible way to do this is to render your waveform to a graphic ahead of time, and then "reveal" it as the song plays (e.g. with the "timeupdate" event).
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!
In a Chrome extension, is it possible to create an waveform or spectrogram image (or canvas) element based on only a .wav file URL of an <audio> tag?
I assume that solving this will require multiple steps:
Load the sound file data.
Convert the data into a format that can be used for drawing, possibly an array of sample values, similar to the .dat format of soxformat.
Generate an image or draw on a canvas.
Please provide JavaScript code to turn this:
<audio src="http://goo.gl/hWyNYu" controls />
into this:
This needs to be done without having to play back the audio, as opposed to existing solutions and without using server-side solutions.
Rather than being a question about a specific step in the process, this question seeks a complete answer with complete code so anybody could test it first and understand it later.
Well, theoretically, you should be able to use those existing client-side solutions without playing back the audio, using an OfflineAudioContext. Unfortunately, those solutions both use ScriptProcessorNode, and from what I've heard, existing implementations are broken when using ScriptProcessorNode in an OfflineAudioContext, and not likely to be fixed. I suspect AnalyserNode may be broken in OfflineAudioContext too.
It would probably work to use an OfflineAudioContext to just "play back" the entire sound file, then draw your canvas based on the output buffer that is created.
Or you could use a regular AudioContext, but make sure the output isn't audible (say, by piping the sound through a gain node with gain of zero). This is really ugly, slow, and would interfere with any other Web Audio API usage on your page.
You could also try fetching the entire file just as a binary blob into an ArrayBuffer, and parse it yourself. The WAV file format is not all that complicated (or you might be able to find open source code to do this). If you wanted to handle compressed formats like MP3 this way, you would definitely not want to write the decoder from scratch.
EDIT:
I think the Web Audio-based solutions above are too complicated. You have to set up an AudioBuffer and decode the audio into it using decodeAudioData anyway. Once you've done that, there is no need to even create an AudioBufferSourceNode. You can just get the audio data directly from the AudioBuffer by calling getChannelData on it.
We are making an web based music editor and mixer based on the Web Audio api. Users can mix together multiple tracks, crop tracks, etc. The actual mixing together of the tracks just involves playing back all the sources at once.
We want to be able to add the option to save the mix and make it available for download to a user's computer. Is there some way to do this on the front end (like connecting all the sources to one destination/export node), or even the backend (we are using RoR)?
RecorderJS does exactly what you need, and it could not possibly be easier to use. Really, really great library.
https://github.com/mattdiamond/Recorderjs
P.S. Look into OfflineAudioContext and my answer to this question (Web audio API: scheduling sounds and exporting the mix) for info on doing a faster-than-realtime mixdown of your audio.
Users data looks to be on client side?
Basically when converting data with base64 into dataURI, datas are diplayed inline so they can be add 1 by 1 togheter into one single blob object, and be downloaded.
But this method is only good for smalls files, causing crash and freezing with most browser, this is only good for blob size less than 10mb after some personnal tests, this will be better soon for sure.
<audio controls><source src="data:audio/ogg;base64,BASE64.......BASE564......BASE64............."></audio>
or
<a href="data:audio/ogg;base64,BASE64...BASE64..BASE64....>Download</a>
Probably not your way, just an idea but your project is interesting ;)
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.