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!
Related
I've played around with the web audio api before, but it's a very specific and unambiguous that it wants to connect all the sources together to the destination for it to work. However it seems given how iframes and other ways sound can be introduced there'd need to be an extremely elaborate script to tie in new sources to an analyzer node headed to the output.
Note I'm not talking about routing a stream from a microphone like here, there shouldn't be any permission required. Also I'm not talking about audio sources already hooked into the web audio api, there are a ton of examples about processing audio from inside the web audio api. I'm curious if there's a generic way to process audio on a page before (or after) it hits the speakers.
Essentially I was curious if anyone has seen or built an application that's reactive to audio in html and or has thoughts on putting something like this together.
The solution I have in mind would be a script which triggers when media is played and attaches the media source to the web audio api > an analyzer node > destination. I haven't found any javascript event that appears to work in this way.
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.
Say i like to create my very own progressive streaming mechanicsm in Javascript because i'm finding the browser's built in streaming mechanism not fault-tollerant enough or i like to implement my own custom method over WebSocket. I would like to create a buffer which holds the already downloaded segments of a continous media file (say an arraybuffer or something like that). Is it possible to play this file even if it's not already downloaded from start-to-end?
My only idea was the Web Audio API which has a noteOn() function for preceisely timing the start of each segment. However i don't know how gapeless this would be. Also it introduces the problem that i have to know exactly where audio files can be cut safely on the server side so the next part can be decoded without any loss and gaps. E.g. mp3's bit reservoir stores audio data in neighbour audio frames even in CBR mode which makes things difficult.
What about creating a ScriptProcessorNode that feeds from your incoming buffers? The biggest issue is making sure that the segments are convertible to raw audio samples, but otherwise you could write a simple function in the onaudioprocess event handler that pulls in the next available buffer chunk and copies it into the node's output buffers. Since this would be a pull-on-demand mechanism, you wouldn't need to worry about timing segment playback.
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.
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).