cwilso / volume-meter Goto Github PK
View Code? Open in Web Editor NEWSimple example of implementing a clip-detecting volume meter in Web Audio.
License: MIT License
Simple example of implementing a clip-detecting volume meter in Web Audio.
License: MIT License
Hi! About a month ago this was working, but now shows "Stream generation failed" error in Chrome (I checked several PCs).
Hi!
How can I use it with playing mp3 from tag ?
I saw what you wrote and thought the CPU issues would be caused by createScriptProcessor
Having between 30 to 45% CPU usage on this volume meter, I spend some time to look for ways to improve this.
In conclusion, it has nothing to do with it, this is cause by calling recursively requestAnimationFrame
This example with easily push your CPU usage to 30%:
var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 20;
var canvasContext = canvas.getContext('2d');
document.body.appendChild(canvas)
var rafId;
function drawLoop(time) {
canvasContext.clearRect(0, 0, 100, 20);
canvasContext.fillRect(0, 0, Math.random() * 100 * 1.4, 20);
rafID = window.requestAnimationFrame(drawLoop);
}
This repo is more about the web audio API usage, but do you have any suggestion to improve this?
I get this error when trying to load the page in chromium:
getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
navigator.getUserMedia is not working even if changed to navigator.mediaDevices.getUserMedia.
Hi,
this small library would be perfect for me, but It doesn't work with Cordova.
Buffers are always to 0.
It's a bit weird because It work well in Android Chrome but not when in a Cordova App that use a Android Chrome webview..maybe It's related to this : https://bugs.chromium.org/p/chromium/issues/detail?id=419446
This isn't a bug from your library but If you have any idea why and how I could solve this, I would praise you like a god. If not, you can close this issue right now and thanks for that lib!
Chrome stopped auto-loading of windows.onload. That's why the the demo stopped working.
I have created a fork with a fix:
I like your project thank you for your great project.
I will volume meter just on system audio not on live input (mic), how to?
What do I replace and to come be? Would you like to show me the code, please?
I use this lib and it works fine for audio like mp3, but
How to using this lib for video like mp4?
Here is TypeScript typings if someone is using this module in a TypeScript environment:
export = createAudioMeter;
declare type ScriptProcessorNodeMod = ScriptProcessorNode & {
clipping = boolean;
lastClip = number;
volume = number;
clipLevel = number;
averaging = number;
clipLag = number;
checkClipping: () => boolean;
shutdown: () => void;
};
declare function createAudioMeter(
audioContext: AudioContext,
clipLevel: number,
averaging: number,
clipLag: number,
): ScriptProcessorNodeMod;
Hi I'm trying to use this example and the input stream only lasts for 5 seconds on firefox (same with the input effects, but not audiorecorder?). Is this an issue with the examples or web audio api?
Thanks for taking a look at this, I'm more of an artist than a coder, the work with web audio is really exciting!
I was wondering how one would have to change this to get it working with chrome.
For me it works well with Firefox, but on chrome and edge it only asks for mediaStream access but the meter does not animate after that....
Hello, thanks for useful example. I have integrated it in my React app, with calling of meter.shutdown()
and window.cancelAnimationFrame(rafID)
when component is unmounted. It works fine, however I can't relaunch this gotStream(stream)
function when the stream is changed (user choosed another microphone). Maybe you have any suggestions about how it can be relaunched with updated stream?
Hi!
For some reason I still get this error even with HTTPS protocol: Stream generation failed
I earlier created issue #5 for HTTP, but now HTTPS also seems to fail
Just FYI. Many of the functions used here are or will be deprecated soon including navigator.getUserMedia and createScriptProcessor.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.